使用 Dojo 动画效果-1

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-23 10:03 | 只看该作者

使用 Dojo 动画效果-1

在 Web 页面中加入适当的动画效果能够使页面更加生动，提高用户体验。Dojo 提供了动画效果库，并被加入到核心基础库中，广泛用于各种 dijit 和 dojox 控件中。Dojo 的动画效果库采用标准的 JavaScript 和 CSS 实现。本文简要介绍 Dojo 动画效果库的实现原理，然后详细介绍如何使用该库创建淡入、淡出、擦除等动画效果以及如何组合使用这些动画效果。
Dojo 动画效果库简介Dojo 动画效果库采用标准 JavaScript 语言和 CSS 实现，能够为 HTML 元素增加可视化效果，作为一个 Dojo 基础类库，在很多 dijit 和 dojox 控件中都有使用。使用 Dojo 动画效果库可以很方便地创建淡入、淡出、飞入及擦除等可视化效果，并且可以组合使用这些动画效果实现更为复杂的功能。
下面的例子说明了如何实现一个淡出效果：
清单 1.淡出效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>dojo.fx Demo</title>
   <script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true">
   </script>
   <script type="text/javascript">
      dojo.require("dojo.fx");
      dojo.addOnLoad(function(){
      var fadeout = dojo.fadeOut({
            node: "foo",
            duration: 1000
            });
      fadeout.play();
         });
      </script>
</head>
<body>
      <div id="foo">
         This is dojo.fx demo.
      </div>
</body>
</html>

在浏览器中打开该页面，在页面加载后 id 为“foo”的 div 节点在一秒之内逐渐淡化直至隐藏。dojo.fadeOut 函数接受一个 hash 对象作为参数，其中指定了作用对象的 id 及动画持续的时间，返回一个动画对象，调用这个对象的 play 方法来播放动画。使用 Dojo 动画效果库的模式与使用其他库类似，首先要使用 dojo.require(“dojo.fx”) 加载相应的类库，然后通过 dojo.fadeIn, dojo.fadeOut 等函数创建动画对象、设置动画的属性，最后调用动画对象的 play 方法播放动画。
下面本文将首先介绍 Dojo 动画库的实现原理，然后介绍如何通过 dojo.animateProperty 来对元素的 CSS 属性进行迭代从而创建动画效果，以及基于 dojo.animateProperty 封装的一些标准动画效果，最后介绍如何通过组合单个的动画效果来实现更为复杂的动画效果。

收藏分享评分

回复引用

订阅 TOP

返回列表