Navigation

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) – 作用动画的元素节点或窗口（窗口时仅支持 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”. 效果预览, 可以参考 easing 可视化 .
  • completeFn (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.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 ()
动画结束后, 触发该事件.

Note

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

Navigation