dojo:animation

为元素的自定义动画创建和组合动画效果。

利用dojo提供的动画工具创建、调整自定义动画，以满足UI需要。

效果概述

就像下面的代码所展示的，可以向函数传递节点参数，指明需要哪个对象使用动画。

require(["dojo/fx", "dojo/dom", "dojo/domReady!"], function(fx, dom) {fx.wipeIn({node: dom.byId("wipeTarget")}).play();
});

但是，元素有许多拥有单元值的属性，我们可能要实现这些值的动画效果。假如需要让背景具有闪烁的动画效果或者让节点在屏幕四周移动，我们就要用到dojo的常规动画功能-dojo/_base/fx的animateProperty.

动画属性

如何对节点的边框执行动画效果？

下面是要执行动画的HTML标记：

<button id="startButton">Grow Borders</button>
<button id="reverseButton">Shrink Borders</button><div id="anim8target" class="box" style="border-style:outset"><div class="innerBox">A box</div>
</div>

animateProperty方法指定我们要执行动画的border-width属性，调用animateProperty的形式如下：

require(["dojo/_base/fx", "dojo/dom", "dojo/domReady!"], function(baseFx, dom) {baseFx.animateProperty({node: dom.byId("anim8target"),properties: { borderWidth: 100 }}).play();
});

注意：我们使用的是javascript 遵循骆驼拼写法的borderWidth属性，而不是带有连接符的css border-width属性。这里仍然传递一个节点属性，但是这次使用了一个新的“properties”键表示要执行的动画。

同样的规则适用于具有数值类型值的所有属性。下面的例子对top、left和opacity同时使用动画效果，使元素拖拽出来，并且向左边逐渐消失。分别为top、left和opacity指定start、end属性，我们可以生成特定的、可重复的动画效果。

baseFx.animateProperty({node: anim8target,properties: {top: { start: 25, end: 150 },left: 0,opacity: { start: 1, end: 0 }},duration: 800
}).play();

上面使用了duration属性，以毫秒为单位。

Easing（缓和效果）

关于easing curve可以查阅给用户界面添加缓和效果（Easing Curves）

如果要将动画产生的值以图表的形式绘制出来，需要一个曲线来表示从开始到结束的值。这个曲线的形状参考”easing(贝塞尔曲线)"。最简单的曲线是直线。例如，以恒定的速度从x:0移动到y:100。在移动过程中，如果开始时缓慢移动、然后加速，最后减速移动到末尾，那么整个过程看起来就比较自然了。dojo提供了一个用途较多的的easing函数实现理想的移动效果和

require(["dojo/_base/fx", "dojo/dom", "dojo/fx/easing", "dojo/window", "dojo/on", "dojo/domReady!"], function(baseFx, dom, easing, win, on) {var dropButton = dom.byId("dropButton"),ariseSirButton = dom.byId("ariseSirButton"),anim8target = dom.byId("anim8target");// Set up a couple of click handlers to run our animationson(dropButton, "click", function(evt){// get the dimensions of our viewportvar viewport = win.getBox(win.doc);baseFx.animateProperty({// use the bounceOut easing routine to have the box accelerate// and then bounce back a little before stoppingeasing: easing.bounceOut,duration: 500,node: anim8target,properties: {// calculate the 'floor'// and subtract the height of the node to get the distance from top we needtop: { start: 0, end:viewport.h - anim8target.offsetHeight }}}).play();});on(ariseSirButton, "click", function(evt){baseFx.animateProperty({node: anim8target,properties: { top: 0 }}).play();});
});

完整代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/dojo/dojo/dojo.js" data-dojo-config="async:true"></script><style type="text/css">.box {background-color: #ddd;border: 1px none #eee;height: 200px;padding: 5px;position: absolute;width: 200px;}.innerBox {background-color: white;margin: 5%;padding: 5px;}#container {height: 300px;padding: 10px;position: relative;width: 450px;}.contentBox {background-color: white;border: 1px solid #99c;box-shadow: 10px 10px 5px #888;margin: 5px;position: absolute;width: 200px;}</style>
</head>
<body><h1>Demo: Animation Easing</h1><button id="dropButton">Drop block</button><button id="ariseSirButton">Return block</button><div id="anim8target" class="box" style="top: 0; left: 50%; background-color: #fc9"><div class="innerBox">A box</div></div><script>require(["dojo/_base/fx", "dojo/dom", "dojo/fx/easing", "dojo/window", "dojo/on", "dojo/domReady!"], function (baseFx, dom, easing, window, on) {var dropButton = dom.byId("dropButton"),ariseSirButton = dom.byId("ariseSirButton"),anim8target = dom.byId("anim8target");// Set up a couple of click handlers to run our animationson(dropButton, "click", function (evt) {//get the dimensions of our viewportvar viewport = window.getBox(window.doc);baseFx.animateProperty({// use the bounceOut easing routine to have the box accelerate// and then bounce back a little before stoppingnode: anim8target,easing: easing.bounceOut,druation: 500,properties: {top: { start: 0, end: viewport.h - anim8target.offsetHeight }}}).play();});on(ariseSirButton, "click", function (evt) {baseFx.animateProperty({node: anim8target,properties: { top: 0 }}).play();});});</script>
</body>
</html>

在这个例子中，我们计算了整个视窗的高度让盒子可以到达底部。使用bounceOut函数让盒子到达底部值，在到达最终值前向上反弹一点。需要注意的是：top属性是一个具有start和end属性的对象，用于限定动画范围。
几乎所有easing都以In或Out结尾或以InOut结尾，名称隐含了动画效果。关于easing的详细使用说明参考 dojo/fx/easing。

Putting it Together

传统的动画软件经常为模型添加一个时间轴让物体可以一个接一个地连接移动。dojo提供了fx.combine和fx.chain把单独的动画片段组合起来或连接起来。

在下面的例子中，开始时有两个包含交换内容的盒子。为了突出变化，褪去背景色。下面是HTML标记：

<button id="swapButton">Swap</button><div class="container" id="container"><div id="content1" class="contentBox" style="top: 0; left: 0"><div class="innerBox">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</div></div><div id="content2" class="contentBox" style="top: 0; left: 250px"><div class="innerBox">2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div>
</div>

下面是脚本代码：

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"data-dojo-config="isDebug: true, async: true">
<script>require(["dojo/_base/fx", "dojo/fx", "dojo/fx/easing", "dojo/dom-style", "dojo/dom", "dojo/on", "dojo/aspect", "dojo/domReady!"], function(baseFx, fx, easing, domStyle, dom, on, aspect) {function swapAnim(node1, node2) {// create & return animation which swaps the positions of 2 nodes}var originalOrder = true; // track which order our content nodes are invar swapButton = dom.byId("swapButton"),c1 = originalOrder ? dom.byId("content1") : dom.byId("content2"),c2 = originalOrder ? dom.byId("content2") : dom.byId("content1"),container = dom.byId("container");// Set up a click handler to run our animationson(swapButton, "click", function(evt){// pass the content nodes into swapAnim to create the node-swapping effect// and chain it with a background-color fade on the container// ensure the originalOrder bool gets togged properly for next time});
});
</script>

在这里，把动画分成多个步骤，这样就可以将位置变换的代码变得可以通用、重用。swapAnim函数代码如下：

function swapAnim(node1, node2) {var posn1 = parseInt(domStyle.get(node1, "left")),posn2 = parseInt(domStyle.get(node2, "left"));return moveNodes = fx.combine([fx.slideTo({duration: 1200,node: node2,left: posn1}),fx.slideTo({duration: 1200,node: node1,left: posn2})]);
}

slideTo方法使用left样式属性移动各个节点，也可以使用animateProperty实现相同的效果。两个相互独立的动画应该同时播放，这样两个节点可以一起移动。

fx.combine方法将两个动画合并为一个，返回的动画对象和animateProperty及其它dojo方法类似。当需要播放时，执行play()方法。

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

在执行fx.combine之前，传递给fx.chain的数组包含两个单独的动画。然后按顺序播放动画，先是node-swap，然后是background-color动画。容器的初始背景色与beforeBegin事件关联。
完整代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../Scripts/dojo/dojo/dojo.js" data-dojo-config="async:true"></script><style type="text/css">.box {background-color: #ddd;border: 1px none #eee;height: 200px;padding: 5px;position: absolute;width: 200px;}.innerBox {background-color: white;margin: 5%;padding: 5px;}#container {height: 300px;padding: 10px;position: relative;width: 450px;}.contentBox {background-color: white;border: 1px solid #99c;box-shadow: 10px 10px 5px #888;margin: 5px;position: absolute;width: 200px;}</style>
</head>
<body><button id="swapButton">Swap</button><div class="container" id="container"><div id="content1" class="contentBox" style="top: 0; left: 0"><div class="innerBox">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</div></div><div id="content2" class="contentBox" style="top: 0; left: 250px"><div class="innerBox">2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div></div><script>require(["dojo/_base/fx", "dojo/fx", "dojo/fx/easing", "dojo/dom-style", "dojo/dom", "dojo/on", "dojo/aspect", "dojo/domReady!"], function (baseFx, fx, easing, domStyle, dom, on, aspect) {function swapAnim(node1, node2) {var posn1 = parseInt(domStyle.get(node1, "left")),posn2 = parseInt(domStyle.get(node2, "left"));return moveNodes = fx.combine([fx.slideTo({duration: 1200,node: node2,left: posn1}),fx.slideTo({duration: 1200,node: node1,left: posn2})]);}var originalOrder = true; // track which order our content nodes are invar swapButton = dom.byId("swapButton"),c1 = originalOrder ? dom.byId("content1") : dom.byId("content2"),c2 = originalOrder ? dom.byId("content2") : dom.byId("content1"),container = dom.byId("container");// Set up a click handler to run our animationson(swapButton, "click", function (evt) {// pass the content nodes into swapAnim to create the node-swapping effect// and chain it with a background-color fade on the container// ensure the originalOrder bool gets togged properly for next time// chain the swap nodes animation// with another to fade out a background color in our containervar anim = fx.chain([swapAnim(c1, c2),baseFx.animateProperty({node: container,properties: {backgroundColor: "#fff"}})]);// before the animation begins, set initial container backgroundaspect.before(anim, "beforeBegin", function () {domStyle.set(container, "backgroundColor", "#eee");});// when the animation ends, toggle the originalOrderon(anim, "End", function (n1, n2) {originalOrder = !originalOrder;});anim.play();});});</script>
</body>
</html>

原文地址：Animation

dojo:animation相关推荐

dojo使用query dojo/query
要使用query,就要引入dojo/query包. query可以根据Dom里节点的标签名.id名.class名来检索一个或多个节点. -------------------------------- ...
dojo 九 effects dojo/_base/fx 和 dojo/fx
官方教程:Dojo Effects 这里讲学习一下dojo如何实现淡入.淡出.滑动等效果. 实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx. dojo/_base/fx 中 ...
Hello Dojo!(翻译)
http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html 欢迎学习DOJO!在本教程中,你将学些到如何加载DO ...
fadeTo in dojo
Jquery has a method called fadeTo can do animation for opacity change. equivalent version of dojo is ...
Android Animation (安卓动画）概念简介
Android Animation Android 四种动画分别为逐帧动画和补间动画.属性动画.过渡动画: Frame Animation (逐帧动画) 实现方式:xml 和 Java代码图片跳转的 ...
特斯拉超级计算机Dojo
特斯拉超级计算机Dojo! 2021年8月15日,特斯拉官方发布海报,预热"特斯拉 AI 日"活动.官方表示,本次活动预计在北京时间8月20日上午9点举行,届时将"邀你见 ...
Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 属性动画(Property Animation) ValueAnimator 的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...

dojo:animation

效果概述

动画属性

Easing（缓和效果）

Putting it Together

dojo:animation相关推荐

最新文章

热门文章