【Javascript】jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog

2012
09/28

jQueryによる無限ループするアニメーションと三角関数の話

DEMO

最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。
正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。

ADs

余談ですが・・・三角関数とは

言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。
y = sin(x)　という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。

要素を回転させ続けるアニメーション

回転（正確には円運動）をさせたい場合、円の公式が分かれば実現できます。
中心点を(a,b)、半径をr、X軸からの角度をcとすると

x = a + (r*Math.cos(c));
y = b + (r*Math.sin(c));

となりますので、cを動的に変更すれば要素を円運動させることができます。

具体的には以下のようにsetIntervalで連続してcを増加させていき、xとyをそれぞれleft、topの値とします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var rotate = function(){
var a = 300; //left: 0;top: 0;なので右起点での中心地
var b = 150; //left: 0;top: 0;なので上起点での中心地
var r = 100; //半径
c = 0;
setInterval(function(){
//0.001を大きな数字にすると動きが早くなります
$('#img01').css({
left: (a + (r*Math.cos(c*0.01*Math.PI))) + 'px',
top: (b + (r*Math.sin(c*0.01*Math.PI))) + 'px'
});
c++;
},1);
}
$(function(){
rotate();
});

要素を行ったり来たりさせ続けるアニメーション

sinおよびcosは-1から+1の値をとります。
ということは、たとえば600pxの幅の範囲内で往復させるとした場合、300倍して300を足せば0から600の間を行ったりきたりする式になることが分かります。その結果を横方向の動きとします。

1
2
3
4
5
6
7
8
9
10
11
12
13
var move = function(){
d = 0;
setInterval(function(){
//0.001を大きな数字にすると動きが早くなります
$('#img02').css({
left: 300+(300*Math.sin(c*0.01*Math.PI)) + 'px',
});
d++;
},1);
}
$(function(){
move();
});

蛇行するアニメーション

sinおよびcosの値をそのままy方向の動き（CSSでいうtopかbottom）にすると、上下に行ったり来たりする動きが実現できます。
それに加えてx方向へ直線の動きをするようにしてやると、正弦波に沿った蛇行するアニメーションが実現できます。

以下の例では上下の動き（CSSのtop）は単純なsinですが、x方向（CSSのleft）は範囲内で収まるように前述の「行ったり来たりするアニメーション」と同じ式を入れています。もし単純な横の動き（どこまでも右方向へ進む、など）の場合は、left: e + ‘px’　などとしてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
var curve = function(){
e= 0;
setInterval(function(){
$('#img03').css({
left: 300 - 300*Math.sin(0.001*e*Math.PI) + 'px',
top: 100*(Math.sin(0.01*e*Math.PI)) + 'px'
});
e++;
},1);
}
$(function(){
curve();
});

setIntervalでアニメーションさせるという方法はWEBOPIXEL様のjQueryで背景画像をアニメーションで無限ループさせるという記事を参考にしました。ありがとうございます。

ADs

Related Articles関連記事

Post Comments

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

Comments

jqueryのアニメーションの動きをいろいろと探していたところ、こちらの「蛇行」するアニメーションが自分のイメージにとても近かったので使用させていただきたいと思っております。
ただ、使用したい対象に設定したところ、対象が上下に動いたときに上がエリア（height:150pxのfooter）からはみ出てしまい、サイトの構造上対象が隠れてしまうので、蛇行アニメーションをエリアの天地内で収まるように位置をずらしたいのですが、まだ初心者なのでずらす方法がわからず困っています。
どのようにしたら限られた範囲内ではみ出さないように蛇行できるでしょうか。よろしければ教えてください。

  • aco
  • 2013年5月21日 10:51 AM

aco 様
コメントありがとうございます。

上記の「蛇行するアニメーション」をそのまま使用した場合、上下の動きである

top: 100*(Math.sin(0.01*e*Math.PI)) + ‘px’

は100から-100の値を取ります。

目的の150px内に収めるのであれば、上記のtopが0から150を取るようにすればよいので

top: 75+75*(Math.sin(0.01*e*Math.PI)) + ‘px’

となります。

Math.sin(0.01*e*Math.PI)の部分は-1から1の範囲となりますので、

1のとき・・・top: 150
-1のとき・・・top: 0

となります。

なお、動かす対象となるオブジェクト（上記の場合の「$(‘#img03’)」）の左上が基準となりますので、このオブジェクトのheightの値だけ下にはみ出します。なので動かす範囲は、対象オブジェクトのheightやwidthを考慮して割り出す必要があるかもしれません。

  • 管理人
  • 2013年5月21日 12:33 PM

早速のご回答本当にありがとうございます！！
教えていただいたやり方で試してみたいと思います。

  • aco
  • 2013年5月21日 1:03 PM

Category

Archive

Search

Social