Dojo 1.7アニメーション効果の詳細

12209 ワード

JavaScript 機能クラスアニメーションドジョウブトン

本教程ではDojo 1.7のツールバッグが提供するJavaScriptの効果を探ってみます.これらの効果はあなたのページとウェブサイトにクールな効果をもたらします.
本文はOliverによって翻訳されました. Dojo Effects
本論文はdojo 1.6の同名教程を更新し、1.7版の最新の書き方を使用している.
翻訳の過程で1.6版の訳文を参考にしました.dojo 1.6公式教程:手を取ってHTML 5 JavaScriptアニメーションの特効を作成することを教えます.
ことばを引く
前の一連の教程では,DOMノードをどのように使い,操作するかを学びました.DOMイベントを処理します.しかし、私たちがDOMノードを操作していると、一部の変換が突然消えてしまいます.例えば、ノードを削除すると、ユーザーから見れば、ページ上で突然消えてしまうことがあります.Dojoが提供する標準的な特殊効果ツールを使って、より一貫したユーザー体験を構築できます.そして、私たちのアプリケーションをより精緻で完璧に見せることができます.もっとdojo/uを使うならbase/fxとdojo/fxのカバンの中の更に多くの機能、私達は一連の特効を結び付けて、とてもクールな動的なユーザー体験を創造することができます.
注:Dojo 1.7は二つのfxモジュールを含んでいます.base/fxとdojo/fx

dojo/_base/fxはいくつかの最も基本的な特効方法を提供しています.animeProperty、anim、fadeIn、およびfadeOutを含みます.

dojo/fxは、chain、combine、wipeIn、wipeOut、及びsidto

を含む、より多くの高級効果を提供しています.
(Dojo 1.7の新しい書き方は、各モジュールを明確に導入することを要求します.Dojo baseの基本モジュールを含みます.これらのモジュールは以前のバージョンではデフォルトでロードされていますので、特に注意して使用してください.)
フェードアウト効果ファニング
最も一般的な効果の一つはDOMノードのフェードアウトとフェードアウトです.この効果はホームページでよく使われますので、ドジョウはドジョウの基礎カバンに含まれています.この効果を用いて,ノードのページでの出現と消失が連続的で滑らかに見えるようにすることができた.以下はドジョウを使ってフェードアウト効果を作成するコードの例です.

<button id="fadeOutButton">Fade block out</button>
<button id="fadeInButton">Fade block in</button>
 
<div id="fadeTarget" class="red-block">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var fadeOutButton = dom.byId("fadeOutButton"),
            fadeInButton = dom.byId("fadeInButton"),
            fadeTarget = dom.byId("fadeTarget");
 
        on(fadeOutButton, "click", function(evt){
            fx.fadeOut({ node: fadeTarget }).play();
        });
        on(fadeInButton, "click", function(evt){
            fx.fadeIn({ node: fadeTarget }).play();
        });
    });
</script>

Dojo内のすべてのアニメーション効果関数は一つのパラメータオブジェクトしか受け入れられません.このパラメータオブジェクトには一連の属性が含まれていて、必要なアニメーション効果を設定します.その中で一番重要な属性の一つはnodeです.node属性値は、DOMノードまたはDOMノードのID(文字列)である.もう一つのパラメータdurationでは、この効果の再生を継続する時間を指定します.単位はミリ秒です.durationが指定されていない場合、デフォルトの再生時間は350ミリ秒です.もちろん異なるアニメーション効果には異なるパラメータがありますが、フェードアウト効果にはこの2つのパラメータで十分です.
Dojoのアニメーション効果関数の戻り値は、dojo.Animationオブジェクトです.このオブジェクトにはいくつかの方法があります.プレイ、pause、stop、status、gotoPercentの名前から、これらの方法はアニメーション効果の放送をコントロールするために使われていることが分かります.作成したばかりのオブジェクトはすぐに再生されません.プレイ方法を呼び出してから再生します.
表示例
効果を消去 Wiping
もう一つのよくある効果は消去効果です.実際にはノードの高さを変えて、その内容を徐々に表示または消失させることです.効果はちょっと似ています.ワイパーとフロントガラスに切った跡があります.消去効果は、ページのドロップダウン効果を作成します.特に、ページにはあまり使われていないものがあります.もちろん、拭き取るのが淡白より美しいと感じるかもしれません.
以下のコード例を見てください.

<button id="wipeOutButton">Wipe block out</button>
<button id="wipeInButton">Wipe block in</button>
 
<div id="wipeTarget" class="red-block wipe">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var wipeOutButton = dom.byId("wipeOutButton"),
            wipeInButton = dom.byId("wipeInButton"),
            wipeTarget = dom.byId("wipeTarget");
 
        on(wipeOutButton, "click", function(evt){
            fx.wipeOut({ node: wipeTarget }).play();
        });
        on(wipeInButton, "click", function(evt){
            fx.wipeIn({ node: wipeTarget }).play();
        });
    });
</script>

fadeIn/fadeOutとは異なり、消去関数を使用して参照が必要なのはdojo/fxパッケージです.もう一つの注意が必要なのは、この例ではターゲットノード「wipeTarget」にcss種類wipeを追加しました.この種類はノードのheight:autを設定しています.これはwipeIn関数の効果がノードの既存の高度からその自然高度に変化するからです.
表示例
スライド効果スリング
前にフェードアウトと消去の効果が見られましたが、どちらの効果もページ上のノードの位置を変えることはできません.ノードがスライドしたいなら、fx.slade Toを使います.スライド効果は動的感を作り出し、あるロード度を表すためにも使われます.dojo.fx.slade To関数はパラメータ指定ノードの目標位置にあります.(ページ上のleftとtop位置は、ピクセルpx単位)を目標位置にスライドさせます.

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
 
<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");
 
        on(slideAwayButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
        });
    });
</script>

表示例
アニメーションイベント Animation Events
前述したように、Dojo内のすべてのアニメーションの特効関数は、ドジョジョ・アニメーションのオブジェクトに戻ります.このオブジェクトは、アニメーションの放送を一時停止する方法だけでなく、一連のイベントを提供してくれます.アニメーション放送前に、放送後に異なる応答動作を行うことができます.最も重要なのは、最も一般的な2つのことです.件は:beforeBeginとonEndです.アニメーションイベントを使用したコードの例を見ます.

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
 
<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom-style", "dojo/dom", "dojo/domReady!"], function(fx, on, style, dom) {
         
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");
             
            on(slideAwayButton, "click", function(evt){
                //   beforeBegin   Animation         slideTo   ，
                //      connect  。            beforeBegin      。
                var anim = fx.slideTo({
                    node: slideTarget,
                    left: "200",
                    top: "200",
                    beforeBegin: function(){
                         
                        console.warn("slide target is: ", slideTarget);
                         
                        style.set(slideTarget, {
                            left: "0px",
                            top: "100px"
                        });
                    }
                });
 
                //         beforeBegin          onEnd     slideTo  ，
                //         connect        ，  ……     
                //（   ：            ，               ）
                on(anim, "End", function(){
                    style.set(slideTarget, {
                        backgroundColor: "blue"
                    });
                }, true);
 
                //              ！
                anim.play();
            });
 
            on(slideBackButton, "click", function(evt){
                var anim = fx.slideTo({
                    node: slideTarget,
                    left: "0",
                    top: "100",
                    beforeBegin: function(){
                         
                        style.set(slideTarget, {
                            left: "200px",
                            top: "200px"
                        });
                    }
                });
 
                on(anim, "End", function(){
                    style.set(slideTarget, {
                        backgroundColor: "red"
                    });
                }, true);
 
                anim.play();
            });
    });
</script>

このコードの例では、before Beginとon Endを追加する際にイベント名プレフィックスの「on」を省略する必要があることに気づきました.これはaddEventListenerの使い方と一致しています.この2つのイベントのコールバック方法はあまり違っています.beforeBeginの処理方法は直接にパラメータとしてslade To関数に伝達されました.これはいくつかのアニメーション効果before Begin処理関数がオブジェクト作成時に接続されています.onを通じて私たちのbeforeBegin処理関数を接続すれば、私たちの処理関数はこの動画自身のbeforeBegin処理書にあります.数を数えると呼び出されます.したがって、パラメータとして導入された方法は、我々の処理関数が最初に実行されることを保証します.
表示例
直列アニメーション Chining
複数のアニメーション効果を連続して再生したいなら、どうすればいいですか?先ほど述べたEndイベントを利用して、もう一つの効果が終わった時にもう一つの新しい効果を起動できますが、これは明らかに不便です.このような一般的なニーズに対して、dojo/fxモジュールは非常に便利な機能を提供して、複数の効果を連続的に再生したり、同時に再生したりすることができます.のいずれも新しいdojo.Animationオブジェクトを返します.アニメーション全体を記述できるイベントと方法が含まれています.まず、fx.chainを見てみます.アニメーションの効果を次から次へとつなげて放送するにはどうすればいいですか?

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
 
<div id="slideTarget" class="red-block slide chain">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {
         
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");
             
        //     click                
        on(slideAwayButton, "click", function(evt){
            fx.chain([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.chain([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
         
    });
</script>

ご覧のように、私たちはfx.chainを呼び出した時に直接に特殊行列に入りました.この方法で戻ってきたdojo.Animationオブジェクトに対して、プレイ方法を呼び出して全体の効果チェーンを起動します.今は一つ一つ起動する必要はありません.fx.chainは問題を解決しました.
表示例
アニメーションを組み合わせる Commbining
dojo/fxで提供されるもう一つの便利な方法componeは複数のアニメーション効果を同時に起動することができます.その帰りのdojo.Animationオブジェクトは、最も時間がかかります.アニメーション効果が終了したら、OnEndイベントをトリガします.他の例を見てみましょう.

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
 
<div id="slideTarget" class="red-block slide chain">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {
         
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");
 
        //     click                
        on(slideAwayButton, "click", function(evt){
            fx.combine([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "200", top: "200" })
            ]).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.combine([
                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
         
    });
</script>

この例では、フェードアウトとスライド効果は順次再生するのではなく、同時に発生します.
chainとcompbineを使うことによって、いくつかの簡単な効果で素晴らしいアニメーション効果を組み合わせることができます.同時にchainとcobineの戻り値は依然としてアニメーションオブジェクトです.つまり、それらはさらに直列に結合され、非常に複雑な効果を生み出すことができます.
表示例
おわりに
Dojoの特殊効果を使って、素早くページに面白いアニメーション効果を加えることができます.dojo/ubase/fxモジュールにはフェードアウト法fadeInとfadeOutが含まれています.dojo/fxモジュールを通して、摩擦やスライドなどの多くの機能が強い効果があります.また、chainとcompbineの2つの方法があります.簡単に、より複雑で、より複雑で、より高度なアニメーションを構築することができます.もちろん、アニメーションの効果をさらにコントロールしたいなら、例えば、wipeOutのように、あるDOMノードの高さを調整しますが、完全に0に縮小しません.アニメーションを通して背景色のグラデーションを調整しますか?Dojoは、より汎用的で強力なdojo.animatePropertyオブジェクトを提供します.今後の教程で詳しく紹介します.

JavaScriptは福祉宝くじの双色球番号を生成します.