依赖模型 | events |
使用频率 | 高 |
所属模块 | Std.animation |
成员类型 | 静态成员模块 |
Std.animation.keyframes模块是keyframes动画的执行模块.
该模块负责执行与控制keyframes动画.
Std.animation.keyframes模块在使用的时候需要加上new关键字来创建实例对象,当然,如果省去new关键字,其内部会自动创建实例对象并且返回.
使用new关键字来创建实例对象与直接执行的唯一区别是,当不使用new关键字而直接执行的时候,其内部会自动调用start方法.
方法名称 | 成员类型 | 描述 |
elapsedTime | public | 动画执行消耗的时间 |
fps | public | 动画每秒执行的帧数 |
iterationCount | public | 动画需要执行的次数 |
iterationDelay | public | 动画每次重复时候是否需要延迟 |
fillMode | public | 动画填充模式 |
duration | public | 动画持续的时间 |
direction | public | 动画执行的方向 |
delay | public | 动画执行延迟的时间 |
timingFunction | public | 动画运动曲线 |
state | public | 动画状态 |
rules | public | 动画规则 |
pause | public | 暂停动画 |
stop | public | 停止动画 |
start | public | 开始动画 |
reset | public | 重置动画 |
clear | public | 清空动画配置 |
remove | public | 删除动画 |
defaultProperty | public | 动画默认属性 |
new Std.dom.keyframes(Object option);
Object Std.dom.keyframes(Object option);
类型 | 描述 |
Object | 参数选项 |
名称 | 类型 | 默认值 | 描述 | ||||||
fps | Number,String | auto | fps值,动画每秒的贞数 | ||||||
delay | Number | 0 | 动画在执行之前需要延迟的毫秒时间 | ||||||
fillMode | String | forwards |
属性规定动画在播放之前或之后,其动画效果是否可见,目前支持2个值.
|
||||||
duration | Number,String | 0 | 动画需要持续的时间,值可以是毫秒数字,也可以是带有指定单位的时间字符串,时间单位可参考 Std.convert.timeUnit | ||||||
direction | String | normal |
动画执行的方向,可以有以下取值
|
||||||
iterationCount | Number,String | 1 | 动画需要播放的次数,该值也可以是infinite,无限次数的执行 | ||||||
iterationDelay | Boolean | false | 当动画重复执行的时候,是否需要参考delay属性进行延迟执行 | ||||||
timingFunction | String,Array | linear | 动画运动的时间曲线,可以为指定的名称,或者一个包含贝塞尔曲线值的数组,可参考Std.animation.timingFunction模块 | ||||||
rules | Object | null |
动画规则,可以指定一个已经存在的规则名称,或者是一个自定义规则,例如
|
||||||
on | Object | null | 需要绑定的事件 | ||||||
defaultProperty | Object | null | keyframes的默认属性值 |
名称 | 回调参数 | 描述 | ||||
progress |
参数
|
这是动画执行过程中每一步都要执行的事件,通常情况下该事件用于取得当前属性值,该事件会频繁的被触发. | ||||
iteration |
参数
|
当本次动画执行完毕时候,该事件将会被触发,如果动画需要执行10次,那么该事件会被执行10次 | ||||
complete | 无 | 当动画全部完成时候,该事件将会被触发,无论动画需要执行多少次,该事件只会在最终执行完毕之后才触发. | ||||
pause | 无 | 当动画被暂停的时候,该事件将会被触发 | ||||
stop | 无 | 当动画被停止的时候,该事件将会被触发 | ||||
start | 无 | 动画开始的时候,该事件会被触发 |
<script type="text/std-animation">
@keyframes anim1{
0%{
color:red;
background-color:blue;
left:0;
}
50%{
color:black;
background-color:yellow;
left:100px;
}
100%{
color:blue;
left:250px;
background-color:white;
}
}
</script>
/*
* 以1000毫秒的时间执行规则名称为anim1的动画
*/
var keyframes = Std.animation.keyframes({
rules:"anim1",
on:{
progress:function(data){
console.log("color",data.color);
console.log("left",data.left);
console.log("background-color",data["background-color"]);
}
}
})
/*
* 创建一个动画实例,动画持续时间设置为2000毫秒(2秒)
* timingFunction设置为ease,以缓动方式运行
* 动画在执行过程中按照 x1:%d y1:%d 格式输出
* 动画执行完毕之后输出 done
*/
var keyframes = new Std.animation.keyframes({
duration:2000,
timingFunction:"ease",
rules:{
0:{
x1:0,
y1:0
},
50:{
x1:30,
y1:40
},
100:{
x1:100,
y1:120
}
}
});
keyframes.on({
progress:function(data){
console.log(
sprintf("x1:%d ,y1:%d",data.x1,data.y1)
)
},
complete:function(){
console.log("done");
}
})
keyframes.start();