new Animation()
CSS3动画生成器 <br/> 一、提供javascript方法控制动画;二、提供事件接口监听动画;三、自动完成各平台兼容;四、提供大量内置动画,未使用时不插入。
- 版本:
-
- 1.0
- 继承:
- 依赖:
-
- module:lib/zepto.js
- 源码:
-
- animation.js, line 1
Example
new mo.Animation({
target: $(elem),
effect: 'shake'
});
-
参数
-
属性
-
方法
-
事件
名称 | 类型 | 参数 | 默认值 | 描述 |
---|---|---|---|---|
config.target |
object | 目标元素 | ||
config.keyframes |
string | 动画关键帧设置,如果参数effect为空,该参数为必选 | ||
config.effect |
string | <optional> |
'' | 选择内置效果,也可以继续设置keyframes与内置效果叠加 内置效果:flash, shake, swing, wobble, bounceIn, bounceInLeft, bounceInRight, bounceOut, bounceOutLeft, bounceOutRight, fadeIn, fadeOut, flip, flipInX, flipInY, flipOutX, flipOutY, rollIn, rollOut, zoomIn, zoomOut |
config.duration |
number | <optional> |
2000 | 动画时间,单位ms |
config.easing |
string | <optional> |
'swing' | 动画缓冲类型 |
config.autoPlay |
boolean | <optional> |
true | 是否自动播放 |
config.fillMode |
boolean | <optional> |
'none' | none:默认值。不设置对象动画之外的状态 forwards:设置对象状态为动画结束时的状态 backwards:设置对象状态为动画开始时的状态 both:设置对象状态为动画结束或开始的状态 |
config.delay |
number | <optional> |
0 | 设置对象动画延迟的时间,单位ms |
config.iteration |
number | string | <optional> |
1 | 设置对象动画的循环次数。infinite为无限循环。 |
config.direction |
string | <optional> |
'normal' | 设置对象动画在循环中是否反向运动。 normal:正常方向 alternate正常与反向交替 |
-
keyframes :Object
-
关键帧
- 源码:
-
- animation.js, line 220
-
playing :boolean
-
动画是否正在播放
- 源码:
-
- animation.js, line 403
-
target :Object
-
目标动画元素
- 源码:
-
- animation.js, line 213
-
<static> apply()
-
应用动画
- 源码:
-
- animation.js, line 451
-
<static> parse()
-
通过class自动触发动画
- 源码:
-
- animation.js, line 424
-
<static> revoke()
-
撤消动画
- 源码:
-
- animation.js, line 467
-
apply()
-
应用动画
- 源码:
-
- animation.js, line 410
-
constructor()
-
构造函数
- 继承自:
-
- mo.Base#constructor
- 源码:
-
- base.js, line 42
-
off()
-
绑定事件
- 继承自:
-
- mo.Base#off
- 源码:
-
- base.js, line 61
-
on()
-
绑定事件
- 继承自:
-
- mo.Base#on
- 源码:
-
- base.js, line 52
-
play()
-
播放动画
- 源码:
-
- animation.js, line 376
-
rePlay()
-
重新播放动画
- 源码:
-
- animation.js, line 391
-
revoke()
-
撤消动画
- 源码:
-
- animation.js, line 417
-
stop()
-
暂停动画播放
- 源码:
-
- animation.js, line 398
-
trigger()
-
触发事件
- 继承自:
-
- mo.Base#trigger
- 源码:
-
- base.js, line 69
-
running: 动画播放时
-
- 源码:
-
- animation.js, line 337
名称 类型 描述 event
object 事件对象 -
start: 动画开始时
-
- 源码:
-
- animation.js, line 346
名称 类型 描述 event
object 事件对象 -
start: 动画结束时
-
- 源码:
-
- animation.js, line 363
名称 类型 描述 event
object 事件对象 -
start: 动画重复时
-
- 源码:
-
- animation.js, line 353
名称 类型 描述 event
object 事件对象
内置效果运行Demo二维码
Loading...
加载效果运行Demo二维码
Loading...
方法与事件运行Demo二维码
Loading...