anim

KISSY 动画,这样来载入anim模块:

KISSY.use('anim',function(S,Anim){
    // use Anim
});

由于node模块依赖anim,通常我们使用node时,使用node.animate()方法即可对某个已知节点作动画。即

KISSY.all(".foo").each(function(n){
    new KISSY.Anim(n,...).run();
});

等价于

var node=KISSY.all(".foo");
node.animate({
    width:100,
    height:300
}, {
    duration: 2000,
    easing:'easeBoth' ,
    complete: function () {}
});

此外,node节点还挂载一些常用的做动画的函数,比如fadeIn、fadeOut、slideUp、slideDown等(具体请参照Node)。来看这个例子,每张图片获取之后, 先不显示出来, 等图片加载完成之后, 调用 fadeIn() 渐进显示:

实例化动画的传参

刨除直接通过node.animate()创建的动画之外,通过Anim可以生成一个动画实例。动画实例是用来描述动画的一些基本属性,比如,从什么状态动画到什么状态,动画时间,缓动效果,暂停和继续动画等。 通过Anim这样实例化一个动画实例(参照Demo):

KISSY.use("anim",function(S,Anim){
    // 初始化动画实例
    var anim = Anim('#anim-el',
        // 动画目标样式
        {
            'background-color':'#fcc',
            'border-width':'5px'
        },
        // 动画时长,秒
        5,
        // 动画特效
        'bounceOut',
        // 动画结束的回调
        function(){
            alert('动画结束');
        });

    // 开始执行动画
    anim.run();
});

第一种传参格式,这也是完整的传参格式

Anim (elem, props[, duration, easing, completeFn])

各参数含义:

Anim 的第二种用法

Anim (elem, props[, config])

动画队列的Demo

Anim 动画实例的方法

Anim动画实例上可调用这些方法

isRunning()

判断当前动画对象是否在执行动画过程中

isPaused()

判断当前动画是否被停止

run()

开始当前动画

stop()

结束当前动画

// 终止当前动画,动画会在当前帧直接停止(不触发 complete 回调). 
anim.stop(false);//默认为false
// 为 true 时, 动画停止时会立刻跳到最后一帧(触发 complete 回调)
anim.stop(true);

pause()

在动画实例上调用, 暂停当前动画实例的动画.

resume()

继续当前动画实例的动画.

静态方法 isRunning(elem)

判断elem上是否有动画对象在执行

Anim.isRunning(elem);

静态方法 isPaused()

用于判断 elem 上是否有动画对象在暂停,用法同上

静态方法 stop()

停止某元素上的动画(集合).调用方法。

Anim.stop (elem, end, clearQueue, queueName)

静态方法 pause()

暂停某元素上的动画(集合).调用方法,其中queueName参数含义同上

Anim.pause (elem, queueName)

静态方法 resume()

继续某元素上的动画,调用方法,其中queueName含义同上

Anim.resume (elem, queueName)

动画实例的事件

complete 事件

动画结束后会触发complete事件

Demos