KISSY之Anim(2)
今日任务:学习Anim动画实例
这一节来完成几个动画实例。为了能体现效果,可以先设置一个div,id为anim,该div的样式:背景色,初始的长度和宽度,本节中设、设置长度和宽度各为100px。话不多说,直接上实例代码。
一、Anim动画实例一
点击id为animbtn的按钮时,id为anim的div长度和宽度都100px—>200px,用时2秒:
KISSY.use('anim,node',function(S,Anim,Node){ Node.one("#animbtn").on('click',function(){ var anim1=new Anim("#anim",{'width':'200px','height':'200px'},2); anim1.run(); }); }); |
效果图展示:
初态 终态
只有前两个参数是必须的,第三个参数为动画时长,默认为1。另外,实例化S.Anim后,run方法是必不可少的。
二、Anim 动画实例二
点击id为animbtn-1的按钮时,id为anim-1的div宽度100px—>200px—>50px:
KISSY.use('anim,node',function(S,Anim,Node){ Node.one("#animbtn-1").on('click',function(){ var anim1=new Anim("#anim-1",{'width':'200px'},1,Anim.Easing.easeNone,function(){ var anim2 = new Anim('#anim-1',{'width':'50px'},1); anim2.run(); }); anim1.run(); }); }); |
效果图展示:
初始状态 中间态
终态
这个实例中要注意的是动画效果,Anim.Easing.easeNone(缓动)。可以尝试下去掉后是什么效果。这个算是其不够人性化的地方吧。
三、Anim 动画实例三
这里使用了Anim的run()、pause()、resume()、stop(flase)、stop(true)方法,点击不同的按钮,体会下div动画效果:
KISSY.use('anim,node',function(S,Anim,Node){ var anim1=new Anim("#anim-2",{'width':'400px'},4,Anim.Easing.easeNone); Node.one("#animbtn-2").on('click',function(){ anim1.run(); }); Node.one("#animbtn-3").on('click',function(){ anim1.pause(); }); Node.one("#animbtn-4").on('click',function(){ anim1.resume(); }); Node.one("#animbtn-5").on('click',function(){ anim1.stop(false); }); Node.one("#animbtn-6").on('click',function(){ anim1.stop(true); }); }); |
说明:点击“start”,div的宽度由100px->400px,过程中可以点击“pause”、“stop-pause”进行中止,使用“stop-over”进行终止。但在“pause”状态下只能通过“resume”才能使动画继续。
三、Anim 动画实例四
下面来看一个好玩的实例,相应的js文件代码:
KISSY.use("anim,node,button",function(S,Anim,Node,Button){ var anim = Anim( '#test', { 'background-color':'#fcc', 'border-width':'5px', 'border-color':"#999999", 'border-style':"dashed", 'width': '100px', 'height': '50px', 'left': '900px', 'top': '285px', 'opacity': '.5', 'font-size': '48px', 'padding': '30px 0', 'color': '#FF3333' },5, 'bounceOut',function(){ alert('demo 结束'); });
var b = new Button({ content: "开始动画" }); b.render(); b.on("click", function() { anim.run(); }); }); |
点击“开始动画”即可观察动画。