dojo1.7翻译 动画效果(Animations)

原文地址：http://dojotoolkit.org/documentation/tutorials/1.7/animation/

难度：初级

版本：1.7

?

最终的完成效果

?

?

像所有的图形用户界面一样，Web用户界面，也是利用像素来描绘真实世界的影像，我们可以操纵像素让其快速变化而让人认为其正在运动中。通过变化的时间控制，可以使动画显示的更直观的，运动表现的更平滑。

?

在本教程中，我们将学习Dojo提供的动画工具，允许你调整和建立自定义动画，以满足您的特定的用户界面要求

?

?

?

在以前的教程中，我们已经讨论过一些常用的内置效果功能。 我们可以使用的方法有dojo/_base/fx模块中的baseFx.fadeIn和baseFx.fadeOut方法，dojo/fx模块中的fx.slideTo和fx.wipeIn方法。我们已经了解了如何可以传递一个参数对象来控制我们想要的动画：

?

// Set up a click handlers to run our animationson(swapButton, "click", function(evt){     // chain the swap nodes animation    // with another to fade out a background color in our container    var anim = fx.chain([        swapAnim(c1, c2),        baseFx.animateProperty({            node: container,            properties: {                backgroundColor: "#fff"            }        }),             ]);    // before the animation begins, set initial container background    aspect.before(anim, "beforeBegin", function(){        domStyle.set(container, "backgroundColor", "#eee");    });     // when the animation ends, toggle the originalOrder    on(anim, "End", function(n1, n2){        originalOrder = !originalOrder;    });     anim.play();});

?

上面是调用代码。 数组传递给fx.combine之前，fx.chain有两个单独的动画。我们要运行这些系列：交换节点，然后背景色动画。 容器的初始背景颜色设置连接的beforeBegin事件，并在onEnd我们有一个处理，以确保当我们点击下一步，节点被扭转。

?

运行示例

?

生成的代码是灵活的，其逻辑很容易地扩展。

?

Dojo的动画方便简??单，但所有的控制，你需要具体的定制过渡和其它效果。动画可以从简单的一小片开始建立，并提供有用的生命周期事件，以帮助更改同步功能。 在现实世界中，没有直接从一个状态马上变成另一个状态，控制运动和视觉的变化，可以创造非常好的用户体验。

?