官方教程：Dojo Effects
这里讲学习一下dojo如何实现淡入、淡出、滑动等效果。
实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx。
dojo/_base/fx 中提供了一些基础的animation方法，如： animateProperty, anim, fadeIn, and fadeOut.
dojo/fx 中提供了一些高级的animation方法，如：chain, combine, wipeIn, wipeOut and slideTo。

淡入淡出
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();//淡入
        });
    });

在所有的方法中包含后面介绍的，都只有一个对象参数，这个对象中可包含多个属性，必不可少的一个属性就是node，为要实现效果的节点对象或id字符串。
在fadeOut/fadeIn方法中还有一个属性duration，持续的时间，默认为350ms。
这些animation方法将返回一animation对象，该对象包含一些方法：play, pause, stop, status, and gotoPercent，用来执行，暂停，停止，查看状态及执行到某种程度。

擦除
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();
        });
    });
同淡入淡出一样

滑动
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();
        });
    });
在slideTo方法的参数中，除了节点对象属性外，还有left和top两个属性，用来设置滑动到目的位置的坐标。

事件
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();
            });
    });

在实现动态效果的过程中会产生两个事件，一个是beforeBegin，在执行之前调用；一个是onEnd，在执行完后调用。
在上面的例子中可以看到，beforeBegin是作为参数对象中的一个方法来定义的；onEnd是作为animation对象的一个事件在on中定义的。

连锁反应
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();
        });
         
    });
chain用来将多个animation动作连接起来按顺序执行，它的参数即是由不同animation方法返回的animation对象组成的数组，执行的顺序就是数组的先后顺序。

联合
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();
        });
         
    });
combine方法是将多个animation动作联合起来同时执行实现一个完成的动态效果。其参数也是由不同animation方法返回的animation对象组成的数组。

转载于:https://www.cnblogs.com/tiandi/p/3415909.html

dojo 九 effects dojo/_base/fx 和 dojo/fx相关推荐

  1. Dojo 1.6 最新官方教程: Hello Dojo!

    Hello Dojo 作者:Sam Foster 译者:ZhuXiaoWen 原文: http://dojotoolkit.org/documentation/tutorials/1.6/hello_ ...

  2. Dojo学习笔记（六）：dojo/_base/declare

    1.JavaScript 继承方式 (1)对象冒充 在 JavaScript 中,构造函数也和普通的函数一样,可以被赋值和调用,对象冒充通过此原理来模拟继承. 1 2 3 4 5 6 7 8 9 10 ...

  3. 翻译 - 【Dojo Tutorials】Part 2 - Developing a Dojo Mobile Application: FlickrView

    原文:Developing a Dojo Mobile Application: FlickrView 在本系列的第一篇文章Getting Started with Dojo Mobile中,详细的讲 ...

  4. Dojo QuickStart 快速入门教程 (1) Why Dojo

    Dojo 是一个用来构建 Web 应用的 JavaScript 工具包,当然是开源的.它的目标是通过提供一组特别构造的 API 和一系列辅助工具,使你能在较短的时间里把想法变为实现,同时改善你的日常 ...

  5. 为什么使用dojo？dojo与jquery有什么不同？dojo适合什么开发场景？

    首先介绍一下dojo的特性: 1.Dojo是一个符合AMD规范的企业级框架(dojo是一个重量级框架) 2.Dojo全面支持异步加载JS机制(即:支持通过require异步加载JS模块,通过defin ...

  6. java fx 插件,JAVA FX 應用程序基礎

    javaFX使用戲劇上的術語.為了創建一個應用程序,需要首先實例化一個舞台(stage)對象.假設你是一個導演,需要布置一個或多個場景(views).每個場景的主干網是一個場景圖(GUI節點樹狀圖,相 ...

  7. 计算机网络中tx和fx,100Base-TX/T4/FX以太网含义及用法

    100Base-TX/T4/FX以太网含义及用法 快速以太网目前制定的三种有关传输介质的标准之一,一种是100BASE-TX,另外两种是100BASE-T4.100BASE-FX.我们将"1 ...

  8. 串口调试助手读写三菱fx3u数据_C#读写三菱Fx PLC 使用Fx 串口协议 读写Fx3U设备

    本文将使用一个Github开源的组件库技术来读写三菱 FX PLC,使用的是基于串口的实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能读写操作 github地 ...

  9. 计算机网络中tx和fx,100Base-TX/T4/FX以太网意义及用法

    100Base-TX/T4/FX以太网意义及用法 活络以太网如今拟定的三种有关传输介质的规范之一,一种是100BASE-TX,别的两种是100BASE-T4.100BASE-FX.咱们将"1 ...

最新文章

  1. 回溯法模板(矩阵中操作)
  2. linux 线程pthread_detach,linux线程之pthread_join和pthread_detach
  3. 【转】成为Java顶尖程序员 ，看这10本书就够了
  4. 985研究生连论文都不会写，还面试什么大厂
  5. insert into select 优化_数据库优化总结
  6. CANopen | 拓展知识 - CANopen,CAN总线与OSI模型的关系
  7. 用scikit-learn进行LDA降维
  8. day43,使用朋友pyMySQL连接数据库
  9. （转）Struts2快速入门
  10. Java的jvm原理和常识
  11. SAP License：SD应用要点
  12. building xxx gradle project info的解决办法
  13. 属性子集选择的基本启发方法_2017.06.29数据挖掘基础概念第二.三章
  14. 台式计算机颜色如何矫正,台式机怎么颜色校正操作教程
  15. php添加gd扩展,php安装gd扩展的方法
  16. 这款神器，不仅仅解决你的证件照需求
  17. wgs84坐标系经纬度投影_南方cass坐标转经纬度_坐标转经纬度软件
  18. vue项目中实现输入框防抖功能
  19. python中max函数的用法解析
  20. 计算机桌面壁纸怎么来回换,我的电脑为什么在总是自动换桌面壁纸???

热门文章

  1. 【Python CheckiO 题解】Army Battles
  2. 【PAT - 甲级1006】Sign In and Sign Out (25分)（STLmap）
  3. 【计蒜客 - 蓝桥训练】炮台实验（数学期望，期望dp）
  4. 【HDU - 2102】A计划 （麻烦一点的bfs）
  5. Apollo自动驾驶入门课程第④讲 — 感知（上）
  6. linux 判断网卡是否异常_如何判断linux网卡故障？
  7. c 语言车牌识别系统课题设计,车牌识别系统的设计--课程设计报告.doc
  8. 计算机考试前的心情作文,考试时的心情作文(七篇)
  9. 向量数量积公式_多法 | 向量数量积相关最值问题的常见处理方法
  10. c语言运算符ppt,C语言知识学习运算符.ppt