anim

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

Class

Events

Class Detail

class anim.Anim
Anim (elem, props[, duration, easing, completeFn])
得到绑定于某个 dom 节点的动画实例
Parameters:
  • elem (String|HTMLElement|KISSY.Node|window|普通的Object) – 作用动画的元素节点或窗口(窗口时仅支持 scrollTop/Left).
  • props (Object) –

    动画结束的 dom 样式值, 例如

    {
        width:"100px",
        height:"100px"
    }
    

    表示节点将从当前宽高经过动画平滑变化到宽 100px 与高 100px.

    也可以设置 scrollLeft 或者 scrollTop, 这时会直接对元素的滚动属性产生动画.
  • duration (Number) – 默认为 1 , 动画持续时间, 以秒为单元.
  • easing (String) – 默认为 ‘easeNone’ , 动画平滑函数, 可取值 “swing”, “easeNone”, “linear”, “easeIn”, “easeOut”, “easeBoth”,”easeInStrong”, “easeOutStrong”,”easeBothStrong”,”elasticIn”,”elasticOut”, “elasticBoth”,”backIn”,”backOut”,”backBoth”, “bounceIn”,”bounceOut”,”bounceBoth”, “cubic-bezier(p1x, p1y, p2x, p2y)(所有取值必须在[0,1]之间)”. 效果预览, 可以参考 easing 可视化cubic-bezier 可视化.
  • completeFn (function) – 动画到最后一帧后的回调函数.
Anim (elem, props[, config])
得到绑定于某个 dom 节点的动画实例
Parameters:
  • elem (String|HTMLElement|KISSY.Node|window|普通的Object) – 作用动画的元素节点.
  • props (Object) – 动画结束的 dom 样式值
  • config (Number) –

    动画配置项,包含:

    config.duration

    单位秒。默认 1 秒.动画持续时间

    config.easing

    string|function。默认 ‘easeNone’. 动画平滑函数

    config.queue

    String|false|undefined。所属队列名称. 默认undefined. 属于系统内置队列, 设置 false 则表示该动画不排队立即执行.

    config.complete

    function。 动画到最后一帧后的回调函数.

    config.useTransition

    boolean。 是否使用css3 transition提升性能, 默认 false

    Note

    在 useTransition 为 true 的时候,easing 的值必须是 w3c 规定的时间函数名称。
    具体为: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)

Note

支持对除dom元素以外的普通对象使用动画,将变化的每一帧插值作为作为参考,进行操作。

详见 自定义属性动画实例

Note

支持跨浏览器的css transform

详见 跨浏览器 transform 实例

new Anim(t,{'transform':'rotate(39deg) skew(40deg)'}).run();

Note

增加动画自定义功能。

详见 自定义动画机制实例

Note

队列的使用, 可以参考 动画实例

Methods Detail

Anim.prototype.isRunning()
isRunning ()
判断当前动画对象是否在执行动画过程.
Return type:Boolean
Anim.prototype.isPaused()
isPaused ()
判断当前动画对象是否被暂停.
Return type:Boolean
Anim.prototype.run()
run ()
在动画实例上调用, 开始当前动画实例的动画.
Anim.prototype.stop()
stop ([finish=false])
在动画实例上调用, 结束当前动画实例的动画.
Parameters:finish (Boolean) – false 时, 动画会在当前帧直接停止(不触发 complete 回调). 为 true 时, 动画停止时会立刻跳到最后一帧(触发 complete 回调)
Anim.prototype.pause()
pause ()
在动画实例上调用, 暂停当前动画实例的动画.
Anim.prototype.resume()
resume ()
在动画实例上调用, 继续当前动画实例的动画.
Anim.isRunning()
static Anim.isRunning (elem)
Anim 的静态方法, 用于判断 elem 上是否有动画对象在执行.
Parameters:elem (HTMLElement|window) – 作用动画的元素节点.
Return type:Boolean
Anim.isPaused()
static Anim.isPaused (elem)
Anim 的静态方法, 用于判断 elem 上是否有动画对象在暂停.
Parameters:elem (HTMLElement|window) – 作用动画的元素节点.
Return type:Boolean
Anim.stop()
static Anim.stop (elem, end, clearQueue, queueName)
Anim 的静态方法, 停止某元素上的动画(集合).
Parameters:
  • elem (HTMLElement|window) – 作用动画的元素节点.
  • end (Boolean) – 此参数同实例方法 stop() 中的 finish 参数.
  • clearQueue (Boolean) – 默认为 false, 是否清除动画队列中余下的动画.
  • queueName (String) –

    队列名字.

    设置 queueName 后, 表示停止元素上指定队列中的所有动画:

    • null 表示默认队列的动画
    • false 表示不排队的动画
    • string 类型表示指定名称的队列的动画

    不设置时, 表示停止所有队列中的所有动画;

Anim.pause()
static Anim.pause (elem, queueName)
Anim 的静态方法, 暂停某元素上的动画(集合).
Parameters:
  • elem (HTMLElement|window) – 作用动画的元素节点.
  • queueName (String) –

    队列名字.

    设置 queueName 后, 表示停止元素上指定队列中的所有动画:

    • null 表示默认队列的动画
    • false 表示不排队的动画
    • string 类型表示指定名称的队列的动画

    不设置时, 表示暂停所有队列中的所有动画;

Anim.resume()
static Anim.resume (elem, queueName)
Anim 的静态方法, 继续某元素上的动画(集合).
Parameters:
  • elem (HTMLElement|window) – 作用动画的元素节点.
  • queueName (String) –

    队列名字.

    设置 queueName 后, 表示停止元素上指定队列中的所有动画:

    • null 表示默认队列的动画
    • false 表示不排队的动画
    • string 类型表示指定名称的队列的动画

    不设置时, 表示继续所有队列中的所有动画;

Events Detail

Anim.Events.complete()
complete ()
动画结束后, 触发该事件.