このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第16回

Yahoo! UI Library 3で驚きのアニメーションを作成

2009年10月20日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

動きをさらにアレンジする

 イージングで動きに変化を付けたとはいえ、上からまっすぐ降ってくるだけではまだ面白味に欠けます。もう少しアレンジしてみましょう。

 はじめに、画像がランダムに横、縦方向にずれた状態から落下するようにします。以下のように乱数を使って得られた値を、fromで指定するxy座標値に加算します。


var randX = Math.random() * 400 - 200;
var randY = Math.random() * 1000;


 実際のスクリプトはサンプル06です。

fig5-1.png fig5-2.png
fig5-3.png サンプル06の実行結果画像の落下速度などがばらばらになり、横にも少しずれてアニメーションする

●サンプル06(スクリプト=YUI_startupanime.js)


YUI().use('anim', function(Y){
    Y.on('load', function(){
        Y.all('.yui3-startup-anime').each(function(ele){
            var randX = Math.random() * 400 - 200;
            var randY = Math.random() * 1000;
            (new Y.Anim({
                node: ele,
                duration : 4.0,
                easing: Y.Easing.elasticOut,
                from : { xy: [ ele.getX()+randX, -ele.getAttribute('height')-randY ], opacity : 0.0 },
                to   : { xy: [ ele.getX(), ele.getY() ], opacity : 1.0 }
            })).run();
        });
    });
});

※HTML部分はサンプル05と同じです


 さらに手を加え、落下中、画像にゴムボールのような動きを付けるために画像のサイズを伸縮させましょう。fromとtoの引数に、画像の横幅を設定するY.Animのwidthプロパティ、縦幅を設定するheightプロパティをそれぞれ追加します。画像のサイズは getAttribute('width')、getAttribute('height')で取得できます。fromではgetAttribute('width')*0.02 として横幅を小さく、getAttribute('height')*2 として縦幅を大きく変形させ、toで元のサイズに戻しています。

 以上をまとめたスクリプトがサンプル07です。

fig5-4.png fig5-5.png
fig5-6.png サンプル07の実行結果。画像が伸縮しながら落下する

●サンプル07(スクリプト=YUI_startupanime.js)


YUI().use('anim', function(Y){
    Y.on('load', function(){
        Y.all('.yui3-startup-anime').each(function(ele){
            var randX = Math.random() * 400 - 200;
            var randY = Math.random() * 1000;
            (new Y.Anim({
                node: ele,
                duration : 4.0,
                easing: Y.Easing.elasticOut,
                from : { xy: [ ele.getX()+randX, -ele.getAttribute('height')-randY ],
                            width : ele.getAttribute('width')*0.02,
                            height : ele.getAttribute('height')*2,
                            opacity : 0.0 },
                to   : { xy: [ ele.getX(), ele.getY() ],
                            width : ele.getAttribute('width'),
                            height : ele.getAttribute('height'),
                            opacity : 1.0 }
            })).run();
        });
    });
});

※HTML部分はサンプル05と同じです


 次回は、アニメーション付きの画像スライドショーを作成してみましょう。どうぞお楽しみに。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く