| 前置知识 | Std.animation.keyframes |
| 使用频率 | 中 |
| 所属模块 | Std.dom |
| 成员类型 | 公有成员函数 |
animate方法可以按照动画方式修改css属性,attr属性,以及DOM本身方法的值.
animate方法的本身是通过Std.animation.keyframes来实现的,他可以使用所有Std.animation.keyframes的参数和方法.
animate方法可以执行一个或者顺序执行多个动画,取决于第一个参数是否为数组,以及数组包含的元素数量.
如果手动执行新的animate任务时,而当前正在执行的动画未停止,那么当前正在执行的动画将会被终止,转而执行新的动画任务.
如果存在css3 keyframes定义时,或者使用了type为text/std-animation的script标签定义keyframes时,那么可以直接使用keyframes的名称作为动画规则.
规则是一个包含百分比对应属性值合集的object对象,其中0%可以替换为from,100%可以替换为to
先看一个例子:
{
0:{
marginLeft:0,
color:"rgb(0,0,0)"
},
50:{
marginLeft:50,
color:"rgb(255,2,111)"
},
100:{
marginLeft:20,
color:"rgb(128,128,128)"
}
}
以上这个规则表示定义动画0%进度->50%进度->100%进度时候分别的值.其中间运作的方式与css3动画完全相同.
Object animate(String command);
Object animate(Array rules,Number duration);
Object animate(Array rules,Object option);
Object animate(Array rules,Number duration,Function callback);
Object animate(Array rules,Object option,Function callback);
Object animate(Object rule,Number duration);
Object animate(String ruleName,Number duration);
Object animate(Object rule,Object option);
Object animate(String ruleName,Object option);
Object animate(Object rule,Number duration,Function callback);
Object animate(String ruleName,Number duration,Function callback);
Object animate(Object rule,Object option,Function callback);
Object animate(String ruleName,Object option,Function callback);
| 名称 | 类型 | 描述 |
| command | String |
命令类型:
|
| rules | Array | 包含多个动画规则或者动画名称的数组,当一个动画执行完毕之后,会继续执行数组中的下一个规则的动画. |
| rule | Object | 动画规则 |
| ruleName | String | 动画规则名称(css3 keyframes名称) |
| duration | Number | 动画持续的时间 |
| option | Object | 动画的参数选项(参考Std.animation.keyframes模块) |
| callback | Function | 动画执行完毕之后的回调函数 |
<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>
Std.main(function(){
Std.dom("#demo1").animate("anim1",{
duration:1500,
iterationCount:"infinite",
direction:"alternate"
});
})
Std.main(function(){
var anim1 = Std.dom("#demo1").animate({
0:{
color:"red",
backgroundColor:"blue",
left:0
},
50:{
color:"black",
backgroundColor:"yellow",
left:"100px"
},
100:{
color:"blue",
left:"250px",
backgroundColor:"white"
}
},{
duration:1500,
iterationCount:"infinite",
direction:"alternate"
});
//动画执行5秒之后停止
setTimeout(function(){
//停止动画
anim1.stop();
//或者
Std.dom("#demo1").animate("stop");
},5000);
});
Std.main(function(){
Std.dom("#demo1").animate({
to:{
width:200,
height:200
}
},500,function(){
alert("动画执行完毕");
})
});