使用ExtJS做动画效果

这是个动画效果的例子,作出一个小球弹跳然后静止.

先是一个div:

<div id="ball"></div>
它的css:
#ball
{
border-radius: 50px;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
y: 50px;
x: 100px;
}


然后ExtJS代码：

Ext.onReady(function(){
    Ext.create('Ext.fx.Animator', {
        target: 'ball',
        duration: 5000,
        keyframes: {
            0: {
                y: 50
            },
            20: {
                y: 300
            },
            40: {
                y: 175,
                backgroundColor: '#0000FF'
            },
            60: {
                y: 300
            },
            80: {
                y: 275,
                backgroundColor: '#00FF00'
            },
            100: {
                y: 300
            }
        }
    });
});

代码解释：
target:指定动画对象；
duration: 动画时间间隔
keyframe: 关键帧,定义关键点的状态.