首页 教程 API文档

keyframes动画模块

2015-09-15 13:54:39

属性

依赖模型 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关键字来创建新的实例对象


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个值.

名称 描述
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值
duration Number,String 0 动画需要持续的时间,值可以是毫秒数字,也可以是带有指定单位的时间字符串,时间单位可参考 Std.convert.timeUnit
direction String normal

动画执行的方向,可以有以下取值

名称 描述
normal 默认方向
alternate 动画应该轮流反向播放,如果指定了该值,那么需要规定iterationCount参数的值大于1
iterationCount Number,String 1 动画需要播放的次数,该值也可以是infinite,无限次数的执行
iterationDelay Boolean false 当动画重复执行的时候,是否需要参考delay属性进行延迟执行
timingFunction String,Array linear 动画运动的时间曲线,可以为指定的名称,或者一个包含贝塞尔曲线值的数组,可参考Std.animation.timingFunction模块
rules Object null

动画规则,可以指定一个已经存在的规则名称,或者是一个自定义规则,例如


{
    0:{
        marginLeft:0,
        color:"rgb(0,0,0)"
    },
    50:{
        marginLeft:50,
        color:"rgb(255,2,111)"
    },
    100:{
        marginLeft:20,
        color:"rgb(128,128,128)"
    }
}
on Object null 需要绑定的事件
defaultProperty Object null keyframes的默认属性值

事件

名称 回调参数 描述
progress

参数

类型 描述
Object 包含当前进度下属性名称与值对应的Object对象
这是动画执行过程中每一步都要执行的事件,通常情况下该事件用于取得当前属性值,该事件会频繁的被触发.
iteration

参数

类型 描述
Number 当前已经执行的动画次数
当本次动画执行完毕时候,该事件将会被触发,如果动画需要执行10次,那么该事件会被执行10次
complete 无 当动画全部完成时候,该事件将会被触发,无论动画需要执行多少次,该事件只会在最终执行完毕之后才触发.
pause 无 当动画被暂停的时候,该事件将会被触发
stop 无 当动画被停止的时候,该事件将会被触发
start 无 动画开始的时候,该事件会被触发

返回值

Std.animation.keyframes实例对象

相关例子

例子1:


<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"]);
        }
    }
})

例子2:



/*
 * 创建一个动画实例,动画持续时间设置为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();