dojo 1.7翻訳ダイナミック効果(Dojo Effects)

住所:http://dojotoolkit.org/documentation/tutorials/1.7/effects/
難易度:低い
バージョン:1.7
 
このチュートリアルでは、私たちはいくつかのdojoが提供しているダイナミックな効果を理解し、私たちのページをより生き生きとさせます.
 
開始
これまでDOMノードの管理と操作を学んできたが、これらの操作をすると、ページの表現がぎこちなくなります.ノードを削除すると、このノードは確実になくなってしまいます.dojoが提供する動的効果を使用すると、いくつかの操作の効果が滑らかになり、ユーザーの相互作用性を非常に向上させることができます.
 
ドジョウには二つのモジュールがあります.base/fxとdojo/fx
 

dojo/_ベースの効果を提供します.animeProperty、anim、fadeIn、fadeOut

などです.

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

を含むより高い効果を提供しています.
グラデーション
以前使った効果があります.グラデーション効果のある表示と消失です.この効果はよく使われています.すべての効果はドジョジョの基礎モジュールに置かれています.以下は例です
 

<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>

 
 方法にはオブジェクトパラメータがあります.最も重要な属性はnodeであり、これはDOMノードまたはID値とすることができ、他の属性はdurationであり、アニメーション実行時間はミリ秒で決定される.デフォルトは350です.他の属性もありますが、必須ではありません.
アニメの方法はdojo.Animationオブジェクトを返します.このオブジェクトはプレイ、pause、stop、status、gotoPercentという方法があります.アニメーションが作成されたのはすぐに実行されるのではなく、表示されるプレイ方法で実行されます.
実行例
 
 
消去効果
もう一つのよくある効果は消去効果です.このような効果は窓からの消去効果に似ています.通常、この効果は下に引っ張り、閉じたアニメーションを表しています.
 

<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>

 
 アニメーションを消去する方法はdojo/fxモジュールに配置されています.この例では、Wipeのclassパターンを追加しました.この効果は操作要素の高さによって実現されます.wipeを追加したのは元素の高さを自動的に定義するためです.
実行例
 
スライド
これから滑りの効果を実現します.fx.slade Toを使って実現し、直接例を見ます.
 

<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>

 
 実行例
 
アニメーション効果
上記の紹介を通じて、動画の方法はdojo.Animationオブジェクトに戻ります.このオブジェクトはスタートだけではなく、一時停止の機能も提供しています.イベントなどの機能も提供しています.二つの重要なイベントは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){
                // Note that we're specifying the beforeBegin as a property of the animation
                // rather than using connect. This ensures that our beforeBegin handler
                // executes before any others.
                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"
                        });
                    }
                });
 
                // We could have also specified onEnd above alongside beforeBegin,
                // but it's just as easy to connect like so
                on(anim, "End", function(){
                    style.set(slideTarget, {
                        backgroundColor: "blue"
                    });
                }, true);
 
                // Don't forget to actually start the animation!
                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は属性で構成されていることに気づいたかもしれません.その理由は、イベントを直接アニメーションの作成に書くことができます.もしあなたがアニメを作成してからbefore Beginに参加すると意味がありません.
実行例
 
チェーンリレー
もしいくつかのアニメが連続して実行されるとしたら、どうやって操作しますか?上記のEndを使ってイベントを監督することができます.アニメーションの実行が完了したら、他のアニメーションを呼び出します.もちろんいいですが、これはあまり便利ではありません.この問題を解決するためにdojo／fxから提供されたリンク伝達を使用することができる.直接例を見る
 

<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");
             
        // Set up a couple of click handlers to run our chained animations
        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で複数のアニメーションを作成しました.これらのアニメーションはchainのプレイトリガ時に一つずつ実行されます.
実行例
 
ミックス動画
もう一つのdojo/fxが提供する方法は、compbineの方法です.この方法は同じ時間に複数のアニメーションを同時に実行します.実行時間が一番長いアニメが完成すると、エンドレスイベントが発生します.直接例を見てください.
 

<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");
 
        // Set up a couple of click handlers to run our combined animations
        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>

 
 この例では、いくつかのアニメーションは同時に実行され、同時にグラデーションと移動し、最初のグラデーションではない.ミックス動画を通じて、非常に複雑で完成した効果が得られます.
実行例
 
結論
ドジョウのドジョウを使うbase/fxとdojo/fxのアニメーション効果は、あなたのページを非常に絢爛させることができます.簡単なアニメーションを作成することができます.複数のアニメーションを組み合わせて、非常に複雑なアニメーション効果を作り出します.
でも、細かい効果と複雑な効果が欲しいなら、dojo.animetePropertyを理解してください.