使用ExtJS做动画效果

最新推荐文章于 2017-10-06 22:35:00 发布

iteye_15479

最新推荐文章于 2017-10-06 22:35:00 发布

阅读量193

点赞数

分类专栏： javascript 文章标签： javascript ExtJS animation ViewUI

本文链接：https://blog.csdn.net/iteye_15479/article/details/82442627

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

先是一个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
            }
        }
    });
});