前端 YUI3:Animation

YUI3:Animation

动画工具提供了API用于创建高级的属性值之间的变化方法。

1. 开始

包含依赖文件

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"

charset="utf-8"></script>

当anim模块被使用时，YUI实例能自动获取动画资源文件和其他缺失依赖文件。让YUI实例决定需要加载的文件有助于避免手动管理页面需要加载的文件列表来支持多组件，而且优化初始化页面。

如果确实需要手动在页面中包含所依赖文件，YUI依赖文件配置可以用来确定使用动画所需的文件列表。

YUI实例

一旦页面拥有了YUI seed（yui-min.js），就可以为应用创建一个新的实例，并用所需模块填充，指定use方法的第一个参数。

YUI().use(‘anim’,function(Y){

//

});

Use方法的后一个参数是一个回调函数。一旦YUI实例准备好下载所有页面所需文件，该回调函数就会被激活。一旦这些文件都加载完成，修饰anim模块的类以及其他所依赖的模块都会用来填充本地YUI实例。YUI实例(Y)填充参数传回到回调函数中。在回调中，可以基于你自己的普通YUI实例开始写应用代码。

关于创建YUI实例与use方法的更多知识，可以参考YUI Global。

实例化一个Animation对象

一个Animation执行将包含一个或多个anim实例。

在页面中创建一个anim实例，为其传递一个配置对象和to属性，该对象即是需要动画的node或selector查询：

var myAnim = new Y.anim({

node:'#demo',

to:{

width:0,

height:0

}

});

开始一个真正的动画，可以在Anim实例上使用run方法：

myAnim.run();

参考API文档可以查看更多关于Anim对象的属性和方法。

2. 使用动画工具

1） 访问anim的属性

使用set和get方法能访问anim对象的属性；

YUI.use('anim',function(){

var myAnim = new Y.Anim({

node:'#demo',

to:{

width:0,

height:0

}

myAnim.set('duration',0.5);

myAnim.set('easing',Y.Easing.easeOut);

});

});

2） 设置to值

一个node属性和to属性包含一个或多个执行动画所需的属性；

To属性的值可以是函数。如果使用的是函数，接收node作为唯一参数，该函数返回值返回给to将作为run方法的参数。

to:{

width:function(node){

return node.get('offsetWidth')/2;

},

height:0

}

3） 设置from值

使用可选的from属性使动画从一个特定的值开始。当from缺省，那么将使用当前值。

和to属性类似，from属性值可以是一个函数。该函数使用node作为参数，函数返回值给from作为run方法的起始值。

from:{

width:0,

height:function(node){

return node.get('winHeight');

}

}

4） 监听事件

动画功能定义了events用于多种动画的多个阶段。On方法用于加入event监听。

anim.on('end',function(){

anim.get('node').addClass('yui-hidden');

});

3.