jQueryでパスを使ったアニメーション【デモつき】 - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

自分が頑張って仕事をすると、ほかの人の仕事の邪魔をするというジレンマ

改めてjavascriptについて

先日投稿したcanvasとは？ですがサンプルで動かしたものはjavascriptを使い cssだけでもできたりします。
canvasにしてもある程度の部分まではIE8でもjavascriptのライブラリを使用することにより 動作させることは可能です。
また、スマートフォンではdraggableが動作しないのですが、
こちらもjavascriptで 動作させることが可能です。

※前回使用したのはpep.jsです。
いくつか試してみたところ、今のスマホのgoogle chromeでは動かなかったりしたのですが
このプラグインは良好に動作いたしました
（ドラッグのイベント発火にちょっとコツがいるような感じですが）

で、javascriptすごい！
ってことで今回はちょっとがんばったのにボツになった javascriptのアニメーションです。
jqueryを使用すると要素のアニメーションはかなり楽に作ることができるようになりましたが
さらに複雑な動きをベジェ曲線をつかって動作させることができるというものです。

パラメータがちょっとだけややこしいです
x,yはそのまま座標です。
angleは２点（start,end）のそれぞれを向いた角度から右回りです。
lengthはそのままの距離を1とした値になります。

大まかな値はこちらで確認しつつ、細かい調整をすると早く作ることができると思います。

[get_20131129]

実際に動かしてみると

実際にみるとこんな感じの動きが簡単に作れるということです。

スタート

ちょっと楽しい動きをつけたい！スマホでも！というような案件にはピッタリかと思います。

参考サイト

https://github.com/weepy/jquery.path