引言
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学习之动画学习相关推荐

Vyond制作2D动画学习教程
Vyond为2D动画提供了极其简单的分解视频创建过程. 你会学到什么课程获取:Vyond制作2D动画学习教程-云桥网您将学习如何为2d动画制作画外音您将学习如何使用Vyond轻松创建精彩的动画视 ...
Maya制作风格化的女性跑步动画学习教程
时长:2h 11m |视频:. MP4 1280×720,30 fps(r) |音频:AAC,48000 Hz,2ch |大小解压后:1.56 GB 含参考素材流派:电子学习|语言:英语+中英文字幕 ...
Blender多米诺骨牌动画学习教程 The Impossible Domino Run in Blender
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小:8.53 GB 含课程文件 |时长:8h 20 ...
Blender中的多平面动画学习教程
技能分享–Blender中的多平面动画 Skillshare – Multiplane Animation in Blender 语言:英语+中英文字幕(根据原英文字幕机译更准确) 大小解压后:1.3 ...
Maya 2020面部绑定动画学习视频教程 Facial Rigging 101 – Maya 2020
Maya 2020面部绑定动画学习视频教程 Facial Rigging 101 – Maya 2020 时长:16h 55m |视频:. MP4 1280x720,30 fps(r) |音频:AAC ...
iOS学习——核心动画之Layer基础
iOS学习--核心动画之Layer基础 1.CALayer是什么? CALayer我们又称它叫做层.在每个UIView内部都有一个layer这样一个属性,UIView之所以能够显示,就是因为它里面有这 ...
Scss、elementUI引入、transition动画 - 学习笔记
文章目录 Scss.elementUI引入.transition动画 - 学习笔记 Sass 是什么? elementUI transition动画 Scss.elementUI引入.transiti ...
Java 3D编程实践_Java 3D编程实践——网络上的三维动画[学习笔记]
评论 # re: Java 3D编程实践--网络上的三维动画[学习笔记] 2006-08-24 23:41 gy # re: Java 3D编程实践--网络上的三维动画[学习笔记] 2007-03-2 ...
动画学习android,Android动画学习
个人觉得学习Android动画最好的方式就是看开发者文档,所以我就当做翻译,将文章翻译一次吧 Animation Resources 动画资源可以用来定义两种类型的动画创建一种将图片上进行一系列变化 ...

（4）Dojo学习之动画学习

1.引言

2 `dojo/_base/fx`实现动画效果

2.1 使用（animateProperty）方法实现动画方法

2.2 解释剩余三种方法实现动画方法

3 `dojo/fx`实现动画效果

3.1实现卷帘效果`wipeIn`和`wipeOut`

3.2实现滑动效果`slideTo`

3.3多个动画组合使用

4.Dojo关于面向切面编程的实现（AOP）

4.1前置通知

4.2后置通知

4.3环绕通知

（4）Dojo学习之动画学习相关推荐

最新文章

热门文章

（4）Dojo学习之动画学习

1.引言

2 dojo/_base/fx实现动画效果

2.1 使用（animateProperty）方法实现动画方法

2.2 解释剩余三种方法实现动画方法

3 dojo/fx实现动画效果

3.1实现卷帘效果wipeIn和wipeOut

3.2实现滑动效果slideTo

3.3多个动画组合使用

4.Dojo关于面向切面编程的实现（AOP）

4.1前置通知

4.2后置通知

4.3环绕通知

（4）Dojo学习之动画学习相关推荐

最新文章

热门文章

2 `dojo/_base/fx`实现动画效果

3 `dojo/fx`实现动画效果

3.1实现卷帘效果`wipeIn`和`wipeOut`

3.2实现滑动效果`slideTo`