FBJS の Animation についてまとめておく

FBJSのアニメーションについては、FBJS Animation. Part 1 – Basicsをみればわかります。
ここ以下は、自分のために噛み砕いておくメモです。

Animationのメソッド

from(<CSSプロパティ>, <開始値>)

アニメーションの開始時の値を決めうちしたい場合に使う

使い方：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
 // box を縦横 200px から 100px に変形する
 // from の設定がないと2度目以降は、アニメーションしてるけどしてないように見える
 function sample() {
  Animation(document.getElementById('box'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####to(<CSSプロパティ>, <終了値>)
アニメーションの終了時の値を決める場合に使う

使い方：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
 // box を縦横 200px から 100px に変形する
 // from の設定がないと2度目以降は、アニメーションしてるけどしてないように見える
 function sample() {
  Animation(document.getElementById('box'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####by(<CSSプロパティ>, <値>)
アニメーションに追加する値

使い方：

1
2
3
4
5
6
7
8
9
10
11
 <script>
 // クリックするたびに 10px づつ box のサイズを大きくする
 function sample() {
  Animation(document.getElementById('box'))
   .by('width', '10px')
   .by('height', '10px')
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####hide()
アニメーション完了時に、CSS Style を display:noneにする

使い方：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
 // box を縦横 200px から 0px に変形し、非表示にする
 function sample() {
  Animation(document.getElementById('box'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '0px')
   .to('height', '0px')
   .hide()  // ここで完全に消してしまう
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####show()
アニメーション前に、CSS Style を display:blockにする
display:inline にしたい場合は、アニメーション完了時に自分でセットする

使い方：

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
 <script>
 // box を縦横 200px から 0px に変形し、非表示にする
 function sample() {
  Animation(document.getElementById('box'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '0px')
   .to('height', '0px')
   .hide()  // ここで完全に消してしまう
   .go();
 }

 function sample2() {
  Animation(document.getElementById('box'))
   .to('width', '200px')
   .to('height', '200px')
   // show の記述がないと、 sample を呼び出した後 sample2 を呼び出しても表示されない
   .show()
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

<div onclick="sample2();">
表示

####duration(<ミリ秒>)
アニメーションを指定したミリ秒かけて実行する

使い方：

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
 <script>
 function sample1() {
  Animation(document.getElementById('box1'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .duration(10000) // 10秒かけてアニメーション
   .go();
 }

</script>
 <div id="box1" onclick="sample1();" style="background-color: #eeeeee; height: 200px; width: 200px;">

<script>
 function sample2() {
  Animation(document.getElementById('box2'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .duration(100) // 0.1秒かけてアニメーション
   .go();
 }

</script>
 <div id="box2" onclick="sample2();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####go()
アニメーションを実行する

使い方：

1
// そのまんま

####
blind()
対象のエレメントを小さくしたりするときに、中身がはみ出ないようにする。
対象のエレメントに overflow:hidden を与えているみたい
(アニメーション中だけなので気をつけて。)
使い方：

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
 <script>
 function sample1() {
  Animation(document.getElementById('box1'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .blind()
   .go();
 }

</script>
 <div id="box1" onclick="sample1();" style="background-color: #eeeeee; height: 200px; width: 200px;">
はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら

<script>
 function sample2() {
  Animation(document.getElementById('box2'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '100px')
   .to('height', '100px')
   .go();
 }

</script>
 <div id="box2" onclick="sample2();" style="background-color: #eeeeee; height: 200px; width: 200px;">
はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら
  はみでるかしら、はみでないかしら、どちらかしら、わかるかしら、どうでもいいかしら

####ease(<関数>)
一定間隔でないアニメーションをさせる場合に設定する。

規定の関数は、以下の３つ

1
2
3
4
5
6
// Animation.ease.begin
Math.sin(Math.PI/2*(a-1))+1;
// Animation.ease.both
.5*Math.sin(Math.PI*(a-.5))+.5;
// Animation.ease.end
Math.sin(.5*Math.PI*a);

使い方：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <script>
 function sample() {
  Animation(document.getElementById('box'))
   .from('width', '200px')
   .from('height', '200px')
   .to('width', '0px')
   .to('height', '0px')
   .hide()
   .ease(Animation.ease.begin)
   .duration(1000)
   .go();
 }

</script>
 <div id="box" onclick="sample();" style="background-color: #eeeeee; height: 200px; width: 200px;">

####checkpoint(<区切り？float>, <関数>)

使い方：

1
2
3
// 気分が乗れば書き加える
// わかるんだけど、わからない
// もう少しちゃんと調べて、噛み砕いてメモれる日までしばし待機

####ondone(<何だろう>)

使い方：

1
// しらべるかどうかは、気分次第

####stop()

使い方：

1
// しらべるかどうかは、気分次第