Anim

功能创建动画
模块名anim
模块实质类

构造函数

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

elem

类型：String | HTMLElement | KISSY.Node | window | 普通的Object

描述：作用动画的元素节点或窗口（窗口时仅支持 scrollTop/Left）

props

类型：Object

描述：动画结束时的 dom 样式值

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]之间）

completeFn（可选）

类型：Function

描述：动画到最后一帧后的回调函数

Anim(elem, props, config)

elem

类型：String | HTMLElement | KISSY.Node | window | 普通的Object

描述：作用动画的元素节点或窗口（窗口时仅支持 scrollTop/Left）

props

类型：Object

描述：动画结束时的 dom 样式值

config（可选）

类型：Object

描述：动画配置项

名称类型描述
completeFunction动画到最后一帧后的回调函数
durationNumber默认为1，动画持续时间，以秒为单位
easingString | Function默认为 easeNone ，动画平滑函数
queueString | false | undefined所属队列名称. 默认undefined。属于系统内置队列，设置 false 则表示该动画不排队立即执行
useTransitionBoolean是否使用css3 transition提升性能, 默认 false

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

静态方法

.isPaused(elem)：用于判断 elem 上是否有动画对象在暂停

elem

类型：HTMLElement | window

描述：作用动画的元素节点

返回值

类型：Boolean

.isRunning(elem)：用于判断 elem 上是否有动画对象在执行

elem

类型：HTMLElement | window

描述：作用动画的元素节点

返回值

类型：Boolean

.pause(elem, queueName)：暂停某元素上的动画（集合）

elem

类型：HTMLElement | window

描述：作用动画的元素节点

queueName

类型：String

描述：队列名字，设置 queueName 后, 表示停止元素上指定队列中的所有动画：

值停止对象
null默认队列的动画
false不排队的动画
String指定名称的队列的动画
不设置所有队列中的所有动画

.resume(elem, queueName)：继续某元素上的动画（集合）

elem

类型：HTMLElement | window

描述：作用动画的元素节点

queueName

类型：String

描述：队列名字，设置 queueName 后, 表示继续元素上指定队列中的所有动画：

值停止对象
null默认队列的动画
false不排队的动画
String指定名称的队列的动画
不设置所有队列中的所有动画

.stop(elem, end, clearQueue, queueName)：停止某元素上的动画（集合）

elem

类型：HTMLElement | window

描述：作用动画的元素节点

end

类型：Boolean

描述：false 时, 动画会在当前帧直接停止（不触发 complete 回调）；为 true 时, 动画停止时会立刻跳到最后一帧（触发 complete 回调）

clearQueue

类型：Boolean

描述：默认为false，是否清除动画队列中余下的动画

queueName

类型：String

描述：队列名字，设置 queueName 后, 表示停止元素上指定队列中的所有动画：

值停止对象
null默认队列的动画
false不排队的动画
String指定名称的队列的动画
不设置所有队列中的所有动画

方法

.isPaused()：判断当前动画对象是否被暂停

返回值

类型：Boolean

.isRunning()：判断当前动画对象是否在执行动画过程

返回值

类型：Boolean

.pause()：在动画实例上调用，暂停当前动画实例的动画

.resume()：在动画实例上调用, 继续当前动画实例的动画

.run()：在动画实例上调用, 开始当前动画实例的动画

.stop(finish)：在动画实例上调用, 结束当前动画实例的动画

finish（可选）

类型：Boolean

默认：false

描述：false 时, 动画会在当前帧直接停止（不触发 complete 回调）；为 true 时, 动画停止时会立刻跳到最后一帧（触发 complete 回调）

文档

示例