前端 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.

前端 YUI3:Animation相关推荐

前端优化 - 收藏集 - 掘金
如何提升页面渲染效率 - 前端 - 掘金 Web页面的性能我们每天都会浏览很多的Web页面,使用很多基于Web的应用.这些站点看起来既不一样,用途也都各有不同,有在线视频,Social Media, ...
javascript实战pdf_web前端入门到实战：10分钟入门 CSS3 Animation
Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果. 兼容性 animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要 ...
前端动画大全：css的transition、css3的animation、Jquery的animate、js的setInterval
前端制作动画的几种方式(css3,js,jquery) 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总 ...
前端特效:Javascript,css animation,GIF,Lottie
特效在9102 前端营销广告或者H5或者纯粹广告图的方式司空见惯,但总有新的替代方式.虽然特效越来越复杂,但特效制作的制作过程却越来越简便.最近做了个项目使用到了最新的实现技术,以下会对比相应的技术实 ...
CSS魔法堂：更丰富的前端动效by CSS Animation
前言在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
前端提高篇（五十四）练习7：animation动画练习
效果:练习6的过渡效果基础上,对hover时描述的出现加一些动画效果,识别鼠标进出的方向,描述文字跟着鼠标的方向出现或消失问题1:判断鼠标进出的方向 e.offsetX和e.offsetY用于获取相 ...
前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...
前端简单动画组件animation
animation 使用简单动画实现.嵌入class即可 git:GitHub - animate-css/animate.css:
web前端学习（十三）animation动画
动画由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性. Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时 ...

前端 YUI3:Animation

前端 YUI3:Animation相关推荐

最新文章

热门文章