首页 教程 API文档

动画函数

2015-09-08 16:39:30

属性


前置知识 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

命令类型:

  • start 开始所有已经暂停或者停止的动画
  • pause 暂停所有正在执行中的动画
  • stop 停止所有正在执行中的动画
rules Array 包含多个动画规则或者动画名称的数组,当一个动画执行完毕之后,会继续执行数组中的下一个规则的动画.
rule Object 动画规则
ruleName String 动画规则名称(css3 keyframes名称)
duration Number 动画持续的时间
option Object 动画的参数选项(参考Std.animation.keyframes模块)
callback Function 动画执行完毕之后的回调函数

返回值


Std.animation.keyframes.united 实例对象

相关例子


html标签方式定义keyframes


<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("动画执行完毕");
    })
});