【Javascript】jQueryによる三角関数を利用したアニメーションの再考（step関数を使ったバージョン） | Wood-Roots:blog

2013
07/31

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

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

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

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

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

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

DEMO（「動かす」ボタンで実行されます）

ADs

基本的な書式

1
2
3
4
5
6
7
8
9
10
11
12
obj.animate({
//いつものanimateと同じような記述
left: '100px'
},{
duration: 5000,//スピード（ミリ秒かけてアニメーションが実行される）
step: function(now,fx){
//「fx」には実行されているオブジェクトや初期値、終了値などいろいろな情報が入っている
//行いたい処理。nowが現在の値なので、通常nowだけでいいと思う。
$(this).css('top',now/2 + 'px'); //こんな感じで行いたい処理を記述します。
}
);

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

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

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

1
2
3
4
5
6
7
8
obj.stop(true,false).animate({
count: 400
},{
duration: 5000,
step: function(now,fx){
console.log(now);
}
})

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function($){
$(function(){
//
$('button').on('click',function(){
var obj = $(this).closest('.block').find('.item');
obj.removeAttr('style');
//セットした変数を初期化するだけなので通常はいらないと思う
delete obj[0].count;
//アニメーションその1
//「count」は5000ミリ秒かけて0から400までカウントアップする変数となります。
obj.stop(true,false).animate({
count: 400
},{
duration: 5000,
step: function(now,fx){
//stepへのコールバック関数で、好きなアニメーションを設定
//「now」は上記のcountが取る値をリアルタイムに取得しています
$(this).css({
left: now,
top: 200-200*Math.cos(now/40) + 'px'
});
}
})
//あとはおまけのアニメーションです。
//setIntervalでアニメーションを実現する方法と比べ、イージングの適用やanimateとの連携も行いやすい。
.animate({
left: '+=200px'
})
.animate({
top: '-=200px'
})
.animate({
left: '0',
top: '0'
})
;
});
});
})(jQuery);

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

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

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

Category

Archive

Search

Social