Wood-Roots:blogHOMEJavascript201307/31jQueryによる三角関数を利用したアニメーションの再考(step関数を使ったバージョン)Javascript以前jQueryによる無限ループするアニメーションと三角関数の話という記事を書きました。setIntervalを使ってアニメーションさせるという方法はjQuery標準のanimate関数とは違う時間軸で動くため、ほかのアニメーションと組み合わせる場合やイージングプラグインを使用する際に上手くいきません。functionというものを使用すれば通常のjQueryのanimate処理として動作させることが可能となります。STUDIO2つ目の型の.animate()のoptionsにはstep関数を指定する項目があります。カスタムアニメーションを有効にした際や、アニメーションを変更したい場合に便利です。step関数は2つの引数(nowとfix)を受け取る事ができ、アニメーション中のDOM要素に設定することが可能です。簡単に言うと、アニメーション実行時の1コマごとに実行される関数のことです。1コマごとにtop,leftなどに三角関数などを使った計算結果を当てはめることで、animate関数を使用して曲線上の動きを実現出来ます。function(now,fx){//「fx」には実行されているオブジェクトや初期値、終了値などいろいろな情報が入っている//行いたい処理。nowが現在の値なので、通常nowだけでいいと思う。//こんな感じで行いたい処理を記述します。});animate自体は何もさせず、数値だけ使用したい場合jQueryのanimateはプロパティにleft,top,marginなどのCSSのキーと値を指定することで、その値をアニメーションさせることができます。このプロパティにCSSとして存在しないキーを指定した場合、目に見えてアニメーションが実行されることはありませんが、数値のみを取得することができます。以下のように「count」というCSSには存在しないキーを指定した場合、「0から400まで5000ミリ秒かけてカウントアップする都度の値」がstepのnowに入ります。この「count」という変数はobj[0].countとして取り出すことができます。function(now,fx){console.log(now);}})step関数を使用した曲線上の動きと一般的なanimateとの組み合わせDEMOで使用したスクリプトは以下のとおりです。setIntervalで動作させる方法よりも、他のanimateとの組み合わせが簡単にできることが分かるかと思います。obj[0].count;//アニメーションその1//「count」は5000ミリ秒かけて0から400までカウントアップする変数となります。'px'});}})//あとはおまけのアニメーションです。//setIntervalでアニメーションを実現する方法と比べ、イージングの適用やanimateとの連携も行いやすい。'0'});});});})(jQuery);step関数内では数値をCSSに当てはめるだけですので、曲線上の動きだけでなく、たとえば16進数に変換して色のアニメーションやclipに適用して切り抜く動きを表現したりなど、より多彩なアニメーションを実現することができそうです。jQueryのanimateもsetIntervalで少しずつ動かしてアニメーションを実現しているので、setIntervalを使うこと自体に問題があるということはありません。コメントをキャンセルメールアドレスが公開されることはありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。