Dojo1.11官方教程文档翻译（3.4）Dojo特效

2024-03-11 04:48
文章标签 文档 3.4 教程 特效 翻译 官方 dojo dojo1.11

本文主要是介绍Dojo1.11官方教程文档翻译（3.4）Dojo特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

3.4 Dojo 特效

原文地址：https://dojotoolkit.org/documentation/tutorials/1.10/effects/index.html
本翻译项目放在GitBook上，欢迎参与。
GitBook地址：https://www.gitbook.com/book/limeng1900/dojo1-11-tutorials-translation-in-chinese/details
转载请注明出处：http://blog.csdn.net/taijiedi13/ – 碎梦道

本教程中，我们将探索Dojo提供的特效，它可以让你的页面或应用生动起来。

入门

现在为止，我们已经可以很舒服的从DOM节点来操作DOM和处理事件。但是，在我们执行某些动作时，过渡会非常生硬：移除一个节点让它从页面消失，可能会让用户迷惑。使用Dojo提供的标准特效，我们可以创建更加平滑的用户体验，为应用添加额外的闪光点。如果我们利用Dojo的dojo/_base/fx和dojo/fx可以对这些特效进行连接和组合，进而提供非常炫的动态体验。

Dojo1.10有两个fx模块：dojo/_base/fx 和 dojo/fx。
dojo/_base/fx提供基础特效方法，之前在Dojo base里看到过，包括：animateProperty，anim，fadeIn和fadeOut。
dojo/fx提供更多高阶特效，包括：chain，combine，wipeIn，wipeOut 和slideTo。

淡入淡出

应用中你可能见过或者用过淡入和淡出。这个 特效很常见，它包含在dojo/_base/fx的核心特效部分。可以用它来平滑的显示或隐藏页面中的元素。请看示例：

<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/_base/fx::Animation对象，它有几个方法：paly、pause、stop和gotoPercent。如上，动画在创建时不会立即播放必须用play方法播放。

View Demo

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>

擦拭特效位于dojo/fx模块。本例中，将“wipe”类添加到目标节点。由于wipe函数操作节点内容的高度，“wipe”类将目标节点的高度设为“auto”。

View Demo

滑动

目前已经涉及了隐藏节点，但是如果要移动它们呢?淡入淡出和擦拭都不能改变节点的位置。可以用fx.slideTo。节点的位移可以用来创建页面上的运动，fx.slideTo创建一个节点的平滑动画，通过指定左上角的坐标来移动它。

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

View Demo

动画事件

之前说过所有的动画方法都返回一个dojo/_base/fx::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 soon(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>

beforeBegin作为一个参数对象的属性传递。直接原因是在确定在动画创建的时候就连接beforeBegin。因此，如果你在动画创建之后连接beforeBegin，你的处理器将在动画的beforeBegin处理器之后执行，你可能并不想这样。通过将处理器作为参数对象属性传递，可以确保你的处理器最先执行。

View Demo

链接

如果我们想要连续播放动画呢？可以使用之前说过的end事件来开启下一个特效，但是不太方便。dojo/fx提供了几个方法设置特效顺序播放或并行，每个方法都返回一个dojo/_base/fx::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");// Set up a couple of click handlers to run our chained animationson(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/_base/fx::Animation的play来开启链式动画。我们不对每一个独立特效启动播放，fx.chain会进行处理。

View Demo

组合

dojo/fx提供的第二个方便的方法是combine，可以同时开启多个动画。在持续最长的动画结束后，返回的dojo/_base/fx::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");// Set up a couple of click handlers to run our combined animationson(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>

这个例子中，同时进行滑动和淡入淡出。
你可以使用fx.chain和fx.combine来创建一些精致的动画序列。而且，链接和组合都返回一个动画对象，这些方法还可以进行连接和组合，你就可以用简单的动画来创建更加丰富多彩的序列。

View Demo

小结

使用Dojo可以很容易地为你的页面增色。 dojo/_base/fx and dojo/fx可以让你轻易的实现DOM节点的淡入淡出、擦除等，链接和组合意味着你可以更快更容易地创建高阶动画。
然而，如果你想要多一些更有难度的事，比如调整一个DOM节点的高但并不一定缩减到零，或者通过动画变背景颜色？下一节教程fx.animateProperty会涉及到这些。

这篇关于Dojo1.11官方教程文档翻译（3.4）Dojo特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/796689。

相关文章

python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

《python使用Akshare与Streamlit实现股票估值分析教程（图文代码）》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl
阅读更多...
Python pandas库自学超详细教程

Python pandas库自学超详细教程

《Pythonpandas库自学超详细教程》文章介绍了Pandas库的基本功能、安装方法及核心操作,涵盖数据导入（CSV/Excel等）、数据结构（Series、DataFrame）、数据清洗、转换... 目录一、什么是Pandas库（1）、Pandas 应用（2）、Pandas 功能（3）、数据结构二、安
阅读更多...
Python操作PDF文档的主流库使用指南

Python操作PDF文档的主流库使用指南

《Python操作PDF文档的主流库使用指南》PDF因其跨平台、格式固定的特性成为文档交换的标准,然而,由于其复杂的内部结构,程序化操作PDF一直是个挑战,本文主要为大家整理了Python操作PD... 目录一、 基础操作1.PyPDF2 (及其继任者 pypdf)2.PyMuPDF / fitz3.Fre
阅读更多...
springboot自定义注解RateLimiter限流注解技术文档详解

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (
阅读更多...
2025版mysql8.0.41 winx64 手动安装详细教程

2025版mysql8.0.41 winx64 手动安装详细教程

《2025版mysql8.0.41winx64手动安装详细教程》本文指导Windows系统下MySQL安装配置,包含解压、设置环境变量、my.ini配置、初始化密码获取、服务安装与手动启动等步骤,... 目录一、下载安装包二、配置环境变量三、安装配置四、启动 mysql 服务，修改密码一、下载安装包安装地
阅读更多...
电脑提示d3dx11_43.dll缺失怎么办? DLL文件丢失的多种修复教程

电脑提示d3dx11_43.dll缺失怎么办? DLL文件丢失的多种修复教程

《电脑提示d3dx11_43.dll缺失怎么办?DLL文件丢失的多种修复教程》在使用电脑玩游戏或运行某些图形处理软件时，有时会遇到系统提示“d3dx11_43.dll缺失”的错误，下面我们就来分享超... 在计算机使用过程中，我们可能会遇到一些错误提示，其中之一就是缺失某个dll文件。其中，d3dx11_4
阅读更多...
Linux下在线安装启动VNC教程

Linux下在线安装启动VNC教程

《Linux下在线安装启动VNC教程》本文指导在CentOS7上在线安装VNC,包含安装、配置密码、启动/停止、清理重启步骤及注意事项,强调需安装VNC桌面以避免黑屏,并解决端口冲突和目录权限问题... 目录描述安装VNC安装 VNC 桌面可能遇到的问题总结描js述linux中的VNC就类似于Window
阅读更多...
C#监听txt文档获取新数据方式

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +
阅读更多...
Go语言编译环境设置教程

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发（goroutine）、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置（VS Code）一些基本
阅读更多...
Java docx4j高效处理Word文档的实战指南

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2