Anim

动画

Class

Events

Class Detail

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

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

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

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

    也可以设置 scrollLeft 或者 scrollTop, 这时会直接对元素的滚动属性产生动画.
  • duration (Number) – 默认为 1 , 动画持续时间, 以秒为单元.
  • easing (String) – 默认为 ‘easeNone’ , 动画平滑函数, 可取值 “easeNone”,”easeIn”,”easeOut”,”easeBoth”,”easeInStrong”, “easeOutStrong”,”easeBothStrong”,”elasticIn”,”elasticOut”, “elasticBoth”,”backIn”,”backOut”,”backBoth”, “bounceIn”,”bounceOut”,”bounceBoth”. 效果预览, 可以参考 Robert Penner 博士的: easing_demo.html .
  • callback (function) – 动画结束回调函数.
Anim (elem, props[, config])
得到绑定于某个 dom 节点的动画实例
Parameters:
  • elem (String|HTMLElement|KISSY.Node|window) – 作用动画的元素节点.
  • props (Object) – 动画结束的 dom 样式值
  • config (Number) –

    动画配置项,包含:

    config.duration

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

    config.easing

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

    config.queue

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

    config.complete

    function。 动画结束回调函数.

Methods Detail

Anim.prototype.isRunning()
isRunning ()
判断当前动画对象是否在执行动画过程.
Return type:Boolean
Anim.prototype.run()
run ()
在动画实例上调用, 开始当前动画实例的动画.
Anim.prototype.stop()
stop ([finish=false])
在动画实例上调用, 结束当前动画实例的动画.
Parameters:finish (Boolean) – false 时, 动画会在当前帧直接停止, 为 true 时, 动画停止时会立刻跳到最后一帧
Anim.isRunning()
static Anim.isRunning (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 类型表示指定名称的队列的动画

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

Events Detail

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

Note

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