jQueryによる三角関数を利用したアニメーションの再考(step関数を使ったバージョン)

以前jQueryによる無限ループするアニメーションと三角関数の話という記事を書きました。

setIntervalを使ってアニメーションさせるという方法はjQuery標準のanimate関数とは違う時間軸で動くため、ほかのアニメーションと組み合わせる場合やイージングプラグインを使用する際に上手くいきません。

animate関数を使用して曲線上の動きを実装するためには、step functionというものを使用すれば通常のjQueryのanimate処理として動作させることが可能となります。

.animate() | jQuery 日本語リファレンス | js STUDIO
2つ目の型の.animate()のoptionsにはstep関数を指定する項目があります。 この関数はアニメーションのステップ毎にコールバックとして呼び出され、 カスタムアニメーションを有効にした際や、アニメーションを変更したい場合に便利です。 step関数は2つの引数(nowとfix)を受け取る事ができ、アニメーション中のDOM要素に設定することが可能です。

簡単に言うと、アニメーション実行時の1コマごとに実行される関数のことです。1コマごとにtop,leftなどに三角関数などを使った計算結果を当てはめることで、animate関数を使用して曲線上の動きを実現出来ます。

DEMO(「動かす」ボタンで実行されます)

AD

基本的な書式

animate自体は何もさせず、数値だけ使用したい場合

jQueryのanimateはプロパティにleft,top,marginなどのCSSのキーと値を指定することで、その値をアニメーションさせることができます。
このプロパティにCSSとして存在しないキーを指定した場合、目に見えてアニメーションが実行されることはありませんが、数値のみを取得することができます。

たとえば以下のように「count」というCSSには存在しないキーを指定した場合、「0から400まで5000ミリ秒かけてカウントアップする都度の値」がstepのnowに入ります。
この「count」という変数はobj[0].countとして取り出すことができます。

step関数を使用した曲線上の動きと一般的なanimateとの組み合わせ

DEMOで使用したスクリプトは以下のとおりです。
setIntervalで動作させる方法よりも、他のanimateとの組み合わせが簡単にできることが分かるかと思います。

step関数内では数値をCSSに当てはめるだけですので、曲線上の動きだけでなく、たとえば16進数に変換して色のアニメーションやclipに適用して切り抜く動きを表現したりなど、より多彩なアニメーションを実現することができそうです。

なお、jQueryのanimateもsetIntervalで少しずつ動かしてアニメーションを実現しているので、setIntervalを使うこと自体に問題があるということはありません。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。