(4)Dojo学习之动画学习
来源:互联网 发布:白敬亭 演技 知乎 编辑:程序博客网 时间:2024/05/29 10:19
- 引言
- dojo_basefx实现动画效果
- 1 使用animateProperty方法实现动画方法
- 2 解释剩余三种方法实现动画方法
- dojofx实现动画效果
- 1实现卷帘效果wipeIn和wipeOut
- 2实现滑动效果slideTo
- 3多个动画组合使用
- Dojo关于面向切面编程的实现AOP
- 1前置通知
- 2后置通知
- 3环绕通知
1.引言
在本篇博客中主要介绍两个模块的使用,一个是dojo/_base/fx
,另外一个模块是dojo/fx
,这两个模块的作用是实现DOM元素的动画效果,通过名字我们可以看出:
dojo/_base/fx
提供一些基础的动画效果dojo/fx
提供一些高级的动画效果
接下来我们就来用一些这两个模块实现的动画效果
2 dojo/_base/fx
实现动画效果
在dojo/_base/fx
模块中提供了五个方法来实现动画效果:animateProperty
, anim
, fadeIn
, fadeOut
,接下来我们主要介绍一个方法animateProperty
,因为当这个方法会使用的时候,其他的方法也就会了。
2.1 使用(animateProperty)方法实现动画方法
我们首先介绍一下args的参数:
- node:对于那一个dom实现动画效果
- properties:动画的具体属性设置,是一个style的键值对(最重要的一个属性)
- duration:动画执行多久
- easing:可选参数,是一个函数,用来描述动画应该如何变化,dojo给了一些自定义的函数,参考“
- onEnd:可选参数,当动画完成之后触发的函数
- delay:当方法触发之后,延迟几秒触发动画,默认是0秒
//用于动画的div<div id="nodeId" style="background-color: red"></div>//代码 require(["dojo/_base/fx","dojo/domReady!"],function(basefx){ basefx.animateProperty({ node:"nodeId", properties:{ width: { start: '200', end: '400', units:"px" }, height: { start:'200', end: '400', units:"px" } }, duration:4000, delay:2000, easing: function (n) { return (n==0) ? 0 : Math.pow(2, 10 * (n - 1)); }, onEnd:function(node){ alert("动画结束了") } }).play();
解释参数:
- 此函数的意义是将动画从长宽为200px变为400px
- node属性代表对哪一个Dom实现动画效果
- duration属性代表动画的时间,也就是变化时间为5秒
- delay属性代表我们延迟两秒
- easing方法有一个返回值,代表动画变化的速率,此时代表动画越变越快,如果不写这个属性代表均匀变化
- onEnd方法代表当动画运行结束时,回调的方法,方法传入一个node参数,代表动画的对象
注意一点:properties的样式对应的值也可以是一个函数,例如:
basefx.animateProperty({ node:"nodeId", properties:{ width:{ start:function(node){ return 100; }, end:function(node){ return 200; } } }}).play();
在强调一下:properties的值可以是一个函数,在这个函数中可以拿到我们的DOM元素(注意函数有一个参数为node)
2.2 解释剩余三种方法实现动画方法
我们直接看剩余三个方法
anim(node,properties,duration,easing,onEnd,delay)
其实anim的方法和animateProperty方法是一样的,区别是animateProperty传入一个对象,anim方法是传入6个参数fadeIn
可以让dom元素从无到有的一个过程,他的args参数主要填:node
,duration
,easing
,这三个参数的意义和animateProperty参数的意义相同fadeOut
方法可以让DOM元素从有到无的一个过程,他的args参数主要填:node
,duration
,easing
,这三个参数的意义和animateProperty参数的意义相同
3 dojo/fx
实现动画效果
在dojo/fx
模块中我们可以实现一些高级的动画效果,这个模块给我们提供了一些方法:
wipeIn
和wipeOut
实现了卷帘效果slideTo
实现了DOM元素的移动combine
和chain
可以同时让多个DOM元素进行动画效果
3.1实现卷帘效果wipeIn
和wipeOut
这两个方法都需要传入一个args对象,基本和animateProperty类似,代码如下
wipeOut
方法,需要注意的是,args没有properties
属性(千万不要写)
//动画的dom元素 <div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div> //动画代码require(["dojo/fx","dojo/domReady!"],function(fx){ fx.wipeOut({ node:"nodeId", duration:4000, delay:2000, easing: function (n) { return (n==0) ? 0 : Math.pow(2, 10 * (n - 1)); }, onEnd:function(node){ alert("动画结束了") } }).play(); })
wipeIn
方法,需要注意的是,args没有properties
属性(千万不要写)
//注意两点:// 1.div一开始display:none,同时不需要设置height属性(框架总是指定为auto)// 2.div里面必须有内容(必须有内容,不然不行) <div id="nodeId" style="width: 500px;background-color: red;display: none;"> <b>This is a container of random content to wipe in!</b> </div>
//js代码require(["dojo/fx","dojo/domReady!"],function(fx){ fx.wipeIn({ node:"nodeId" }).play(); })
3.2实现滑动效果slideTo
滑动效果很简单,就是从某一个位置移动到另外一个位置,代码如下
<div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>
require(["dojo/fx","dojo/domReady!"],function(fx){ fx.slideTo({ node: "nodeId", top: "40", left: "50", units: "px" }).play(); })
3.3多个动画组合使用
dojo/fx
模块给我们提供了两个方法,一个是chain
,一个叫做combine
,其中他们的区别是(假设有两个动画效果):
chain
函数是多个动画顺序执行(先执行1动画,在执行2动画)combine
是多个动画同时执行(1和2动画同时执行)
实例代码:
<div id="nodeId" style="width: 200px;height:200px; background-color: red"></div> <div id="nodeId2" style="width: 500px;background-color: red;display: none;"> <b>This is a container of random content to wipe in!</b> </div>
require(["dojo/fx","dojo/domReady!"],function(fx){ fx.combine([ fx.wipeOut({ duration: 1200, node: "nodeId" }), fx.wipeIn({ duration: 1200, node: "nodeId2" }) ]).play(); })
4.Dojo关于面向切面编程的实现(AOP)
如果大家学过后台语言(比如Java),大家一定会知道一个非常有名的概念:AOP,AOP的目的也是为了模块化编程,同样Dojo也给我们实现了简单的AOP,这个模块叫做dojo/aspect
,接下来我们看一下这个模块如何和我们的动画效果结合。
在aspect
模块中主要实现了三个方法:after
,around
,before
,我们将这三个方法分别叫做:后置通知,环绕通知,前置通知(具体什么意思,大家可以去看 AOP专业的书),在这里我们主要简单说一下这三个方法的作用。
4.1前置通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){ var anim=fx.wipeOut({ node:"nodeId", duration:4000 }); aspect.before(anim,"play",function(){ alert("执行动画之前") }) anim.play(); })
- 解释:我们利用切面,绑定了在anim对象在只想play函数之前,首先执行我们的切面函数。
4.2后置通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){ var anim=fx.wipeOut({ node:"nodeId", duration:4000, onEnd:function(node){ alert("动画结束了") } }); aspect.after(anim,"onEnd",function(){ alert("执行动画之后") }) anim.play(); })
解释:我们在执行onEnd函数之后执行切面函数
4.3环绕通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){ var anim=fx.wipeOut({ node:"nodeId", duration:4000 }); aspect.around(anim,"play",function(originalFoo){ return function(){ alert("执行动画之前") var results = originalFoo.apply(this, arguments); alert("执行动画之后") } }) anim.play();
- 环绕通知是在执行目标方法之前和之后执行一定逻辑运算
- originalFoo.apply是执行源方法,如果不执行这个方法,那么anim.play()方法不会被执行(也就是说我可以控制目标方法发执行)
- (4)Dojo学习之动画学习
- 【Dojo学习之五】强大的动画效果
- dojo学习之button
- dojo学习之1
- 【Dojo学习之四】Dojo语法
- Dojo 学习笔记 之 Dojo hitch&partial
- 学习Ajax框架之dojo:dojo widget
- (1)Dojo学习之简单配置
- (2)Dojo学习之模块化
- (3)Dojo学习之Class
- Dojo学习之Class(类)
- (5)Dojo学习之事件机制
- (6)Dojo学习之DOM操作
- Dojo学习之环境搭建
- dojo学习笔记之调用
- Hello Dojo ! 开始学习Dojo <4>
- dojo学习
- Dojo学习
- JNI教程(一)
- [leetcode]230. Kth Smallest Element in a BST
- posix timer 应用
- velocity--plugins
- 契约——XML + XSL
- (4)Dojo学习之动画学习
- #pragma命令详解
- Java8 中使用forEach + lambda expression/method reference 循环List和Map
- Week1 线性表的学习
- 【ulua入门】(2) 动态实例化GameObject,然后更改UGUI元素的值,使用案件移动物体
- docker1.12 swarm 自定义镜像的启动
- Android-25种开源炫酷动画框架
- 利用UpdatePanel+Timer 控件自动更新Gridview的数据
- 如何写一个内存溢出的程序