もっと簡単なアニメーション [JavaScript]
以前にYahoo! UI Libraryを使用したアニメーションを紹介しました。今回はもっと簡単なアニメーション方法を紹介します。
まず今回使用するライブラリScript.aculo.usをダウンロードしましょう。現在の最新バージョンはscript.aculo.us 1.8.3 です。
解凍するとlibとsrcというフォルダが出来ます。この2つのフォルダにある9つのファイルをサーバにUPします。私の場合、libというフォルダを作りそこへUPしました。
ライブラリのロードは以下のようにして行います。
Script.aculo.usは、prototype.jsを使用しているのでこちらもロードしておきます。”?load=effects,dragdrop”は今回使用するライブラリファイルです。省略すると全ライブラリを読み込むため処理が重くなってしまいます。
使用する画像を配置しましょう。画像以外でもOKです。
後は簡単です。idをパラメータにしてにして関数を呼び出すだけです。関数によってはnewをつけないと動かなかったり、id以外のパラメータが必要だったりします。
サンプルページはこちらです。実際の動作はサンプルで確認してみて下さい。
画像が消えてしまった場合は、再読み込みして下さい。また、1回目はライブラリのロードに時間がかかり、アニメーションが重かったりします。これも再読み込みで改善されます。
http://www.skillworker.net/test/aculousAnim.html
1.フェードイン
画像をフェードインさせるため、最初にstyle="display:none;"を指定して画像を消しておきましょう。
フェードイン処理ですが、たったこれだけです。"test1"は先ほど付けたIDです。
実際細かいオプションを指定できるのですが、これだけでも充分なアニメーションが可能です。
2.フェードアウト
画像をフェードアウトさせます。
3.BlindUp
画像を下から上に消します。
4.BlindDown
画像を上から下に表示します。
5.ドラッグ&ドロップ
ボタン押下後に画像をドラッグ&ドロップできるようになります。
6.SlideUp
画像を下から上に消します。
7.SlideDown
画像を上から下にスライド表示します。
8.折りたたむ
画像を縦、横の順で折り畳んで消します。
9.縮小後消失
画像を縮小し消します。
10.TVスイッチOFF
画像をテレビのスイッチをオフにした時の効果で消します。
11.落下後消失
画像を落下させて消します。
12.拡大アニメ表示
画像を拡大しながら出現させます。
13.拡大アニメ消失
画像を拡大して消します。
14.縮小後消失2
画像を縮小して消します。
15.点滅
画像を点滅させます。
16.シェイク
画像を左右に小刻みに揺らします。
17.移動アニメ
画像を現在の位置から指定した分移動させます。移動量は正数または負数を指定できます。
この場合、横100縦50移動させます。
18.透明度アニメ
画像の不透明度を変化させます。
この場合、透過度を1.0から0.0に変化させています。
逆も可能ですね。
19.アニメ組み合せ
複数のアニメーションをまとめて実行します。
Effect.Scaleは、指定サイズに拡大縮小(100が等倍)します。この場合、画像を縦横300移動しながら、50%に縮小します。
20.スクロール
指定したIDまでスクロールさせます。
まだまだ色んなことが出来るようですが、今回はここまでにします。
この記事で参考にした書籍です。
10日でおぼえるAjax 入門教室
まず今回使用するライブラリScript.aculo.usをダウンロードしましょう。現在の最新バージョンはscript.aculo.us 1.8.3 です。
解凍するとlibとsrcというフォルダが出来ます。この2つのフォルダにある9つのファイルをサーバにUPします。私の場合、libというフォルダを作りそこへUPしました。
ライブラリのロードは以下のようにして行います。
Script.aculo.usは、prototype.jsを使用しているのでこちらもロードしておきます。”?load=effects,dragdrop”は今回使用するライブラリファイルです。省略すると全ライブラリを読み込むため処理が重くなってしまいます。
<script src="/lib/prototype.js" type="text/javascript"></script> <script src="/lib/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script> |
使用する画像を配置しましょう。画像以外でもOKです。
<div id="test1"> <img src="sample2.jpg" id="img1" width="200" border="0"></div> |
後は簡単です。idをパラメータにしてにして関数を呼び出すだけです。関数によってはnewをつけないと動かなかったり、id以外のパラメータが必要だったりします。
サンプルページはこちらです。実際の動作はサンプルで確認してみて下さい。
画像が消えてしまった場合は、再読み込みして下さい。また、1回目はライブラリのロードに時間がかかり、アニメーションが重かったりします。これも再読み込みで改善されます。
http://www.skillworker.net/test/aculousAnim.html
1.フェードイン
画像をフェードインさせるため、最初にstyle="display:none;"を指定して画像を消しておきましょう。
<div id="test1" style="display:none;"> <img src="sample2.jpg" id="img1" width="200" border="0"></div> |
フェードイン処理ですが、たったこれだけです。"test1"は先ほど付けたIDです。
Effect.Appear("test1"); |
実際細かいオプションを指定できるのですが、これだけでも充分なアニメーションが可能です。
2.フェードアウト
画像をフェードアウトさせます。
Effect.Fade("test1"); |
3.BlindUp
画像を下から上に消します。
Effect.BlindUp("test2"); |
4.BlindDown
画像を上から下に表示します。
Effect.BlindDown("test2"); |
5.ドラッグ&ドロップ
ボタン押下後に画像をドラッグ&ドロップできるようになります。
new Draggable("test2"); |
6.SlideUp
画像を下から上に消します。
Effect.SlideUp("test2"); |
7.SlideDown
画像を上から下にスライド表示します。
Effect.SlideDown("test2"); |
8.折りたたむ
画像を縦、横の順で折り畳んで消します。
Effect.Fold("test2"); |
9.縮小後消失
画像を縮小し消します。
Effect.Squish("test2"); |
10.TVスイッチOFF
画像をテレビのスイッチをオフにした時の効果で消します。
Effect.SwitchOff("test2"); |
11.落下後消失
画像を落下させて消します。
Effect.DropOut("test2"); |
12.拡大アニメ表示
画像を拡大しながら出現させます。
Effect.Grow("test2"); |
13.拡大アニメ消失
画像を拡大して消します。
Effect.Puff("test2"); |
14.縮小後消失2
画像を縮小して消します。
Effect.Shrink("test2"); |
15.点滅
画像を点滅させます。
Effect.Pulsate("test2"); |
16.シェイク
画像を左右に小刻みに揺らします。
Effect.Shake("test2"); |
17.移動アニメ
画像を現在の位置から指定した分移動させます。移動量は正数または負数を指定できます。
Effect.MoveBy("test2", 100, 50); |
この場合、横100縦50移動させます。
18.透明度アニメ
画像の不透明度を変化させます。
new Effect.Opacity("test2", { from:1.0, to:0.0 }); |
逆も可能ですね。
new Effect.Opacity("test2", { from:0.0, to:1.0 }); |
19.アニメ組み合せ
複数のアニメーションをまとめて実行します。
new Effect.Parallel([ new Effect.MoveBy("test2", 300, 300), new Effect.Scale("img2", 50) ]); |
Effect.Scaleは、指定サイズに拡大縮小(100が等倍)します。この場合、画像を縦横300移動しながら、50%に縮小します。
20.スクロール
指定したIDまでスクロールさせます。
new Effect.ScrollTo("test3"); |
まだまだ色んなことが出来るようですが、今回はここまでにします。
この記事で参考にした書籍です。
10日でおぼえるAjax 入門教室
コメント 0