anim¶
view anim sourceKISSY.use('anim',function(S,Anim){
// use Anim
});
Methods¶
Static Methods¶
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 类型表示指定名称的队列的动画
不设置时, 表示停止所有队列中的所有动画;