Animation-动画

Ext.fx.Animator

基于关键帧的动画效果。主要配置项：

• duration: 动画持续时间（毫秒），缺省250；
• easing: 特效：
  • backIn
  • backOut
  • bounceIn
  • bounceOut
  • ease
  • easeIn
  • easeOut
  • easeInOut
  • elasticIn
  • elasticOut
  • cubic-bezier(x1,y1,x2,y2)
• iterations: 动画重复次数；
• keyframes: 关键帧定义，是对象的 CSS3 样式配置，必须遵循从0（0%）- 100（100%）的定义；

Ext.create('Ext.fx.Animator', {
    target: Ext.getBody().createChild({
        style: {
            width: '100px',
            height: '100px',
            'background-color': 'red'
        }
    }),
    duration: 10000, // 10 seconds
    keyframes: {
        0: {
            opacity: 1,
            backgroundColor: 'FF0000'
        },
        20: {
            x: 30,
            opacity: 0.5
        },
        40: {
            x: 130,
            backgroundColor: '0000FF'
        },
        60: {
            y: 80,
            opacity: 0.3
        },
        80: {
            width: 200,
            y: 200
        },
        100: {
            opacity: 1,
            backgroundColor: '00FF00'
        }
    }
});