KISSY基础篇乄KISSY之Anim（2）

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();

    });

});

点击“开始动画”即可观察动画。