手把手教你创建HTML5JavaScript动画特效_js特效资源-CSDN文库

166 浏览量 2021-01-31 01:30:45 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

手把手教你创建手把手教你创建HTML5JavaScript动画特效动画特效

在前面的一系列教程中，我们已经学习了如何使用并操作DOM节点，处理DOM事件。但是当我们在对DOM节点进行操作时，

有些转换会显得突兀：例如删除一个节点，在用户看来它就会在页面上突然消失，有时这种页面上的突然变化会误导用户。使

用Dojo提供的特效工具，我们可以构建出更加连贯的用户体验，并且让我们的应用程序显得更加精致和完美。如果我们进一

步使用dojo.fx包里的更多功能，我们能够把一系列特效串联起来，创造出非常酷的动态用户体验。

渐入和渐出效果（Fade）

最常见的一种特效就是DOM节点的渐入与渐出（淡入与淡出）。这个效果在网页上会经常用到，因此dojo把它包含Dojo的基

础包中。（译者：表示你不需要使用dojo.require引用任何包）我们可以使用这个效果让节点在页面的出现和消失显得连续和

平滑。下面是使用dojo创建渐入渐出效果的示例代码：

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

dojo.ready(function(){

var fadeOutButton = dojo.byId("fadeOutButton"),

fadeInButton = dojo.byId("fadeInButton"),

fadeTarget = dojo.byId("fadeTarget");

dojo.connect(fadeOutButton, "onclick", function(evt){

dojo.fadeOut({ node: fadeTarget }).play();

});

dojo.connect(fadeInButton, "onclick", function(evt){

dojo.fadeIn({ node: fadeTarget }).play();

});

});

</script>

真正制造渐入渐出方法的代码只需要一行，就是dojo.fadeOut 和dojo.fadeIn。 Dojo里所有的动画特效函数都只接受一个参数

对象，该参数对象包含了一系列属性来设定所需动画效果。其中最重要的属性之一就是 node。 node属性值是一个DOM节点

或者是一个DOM 节点的ID （字符串）。另一个参数 duration，则指定了这个效果的播放要持续的时间，单位是毫秒。如果不

指定duration，则默认的播放时间是350毫秒。当然不同的动画效果有不同的参数，不过对于淡入淡出特效而言，这两个参数

就足够了。

Dojo的动画特效函数返回值是一个dojo.Animation 对象。这个对象有几个方法: play, pause, stop, status 和gotoPercent 从名

字可以看出这几个方法是用来控制动画效果的播放的。动画对象刚创建时并不会立即播放，需要调用play方法才开始播放。

擦除效果(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>

// Load the dojo.fx module

dojo.require("dojo.fx");

// Don't forget, when using modules, wrap your code in a dojo.ready

dojo.ready(function(){

var wipeOutButton = dojo.byId("wipeOutButton"),

wipeInButton = dojo.byId("wipeInButton"),

wipeTarget = dojo.byId("wipeTarget");

dojo.connect(wipeOutButton, "onclick", function(evt){

dojo.fx.wipeOut({ node: wipeTarget }).play();

});

dojo.connect(wipeInButton, "onclick", function(evt){

dojo.fx.wipeIn({ node: wipeTarget }).play();

});

});

</script>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38694674

粉丝: 6
资源: 969

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip