ExtJs 4.2 - 取消/清除组件的动画链

Question

我正在构建一个 web 应用程序，如果单击按钮，则会执行此动画链的一部分：

var textReference = Ext.getCmp('splashText');
var checker = Ext.getCmp('arrow');

var img;

//for some reason, the logic is flipped
if(checker){
    img = Ext.getCmp('arrow');
}
else{
    console.log('checker is defined');
    img = Ext.create('Ext.window.Window', {
        header: false,
        style: 'background-color: transparent; border-width: 0; padding: 0',
        bodyStyle: 'background-color: transparent; background-image: url(graphics/arrow_1.png); background-size: 100% 100%;',
        width: 70,
        id: 'arrow',
        height: 70,
        border: false,
        bodyBorder: false,
        frame: false,
        cls: 'noPanelBorder',
        x: textReference.getBox().x - 90,
        y: textReference.getBox().y - 10,
        shadow: false,
    });
}

img.show();

var origW = img.getBox().width,
    origH = img.getBox().height,
    origX = img.getBox().x,
    origY = img.getBox().y;

//go down
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 500,
    delay: 0,
    from: {
        x: textReference.getBox().x - 90,
        y: textReference.getBox().y - 10,
    },
    to: {
        y: origY + 180,
        opacity: 1,
    }
});

//bounce up 1st
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 500,
    delay: 500,
    from: {
    },
    to: {
        y: origY + 50,
    }
});
//fall down 1st
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 500,
    delay: 1000,
    from: {
    },
    to: {
        y: origY + 180,
    }
});

//bounce up 2nd
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 500,
    delay: 1500,
    from: {
    },
    to: {
        y: origY + 100,
    }
});

//fall down 2nd
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 500,
    delay: 2000,
    from: {
    },
    to: {
        y: origY + 180,
    }
});

//fade out
Ext.create('Ext.fx.Anim', {
    target: img,
    duration: 1000,
    delay: 3500,
    from: {
    },
    to: {
        x: textReference.getBox().x - 90,
        y: textReference.getBox().y - 10,
        opacity: 0
    }
});

这只是一个基本动画，其中“球”会下降，然后上下弹跳，使其看起来像是先上弹再下弹两次，然后停留在底部，然后淡出。

它工作得很好，但是，如果用户在前一个动画链仍在动画的情况下一遍又一遍地点击按钮，动画将复合，位置的计算也会复合，使球看起来比它应该。

为了防止这种情况发生，我希望在单击按钮后，首先取消整个动画链，然后从顶部开始动画。这是为了确保任何现有动画都将停止，然后开始新的序列。

有人知道如何执行此操作吗？我试过stopAnimation() 但没有任何反应。

Answer 1

球越来越低的问题是您将原始Y定义为textReference.getBox().y - 10，然后尝试将其移动到不同的原始Y + 180。首先将原始Y设置为textReference.getBox().y - 10，然后使用它用于窗口放置、动画开始和其他动画部分。

其次，你应该使用img.animate() 而不是

Ext.create('Ext.fx.Anim', {
    target: img,

如果这样做，则可以使用您提到的stopAnimation() 方法。

示例代码：

var windowId = 'basketBallAnimation';
var img = Ext.getCmp( windowId );

// Set whatever you want here and use it
var originalX = 30;
var originalY = 30;

if( !img )
{
    console.log('creating new image');
    img = Ext.create('Ext.window.Window', {
        header: false,
        style: 'background-color: transparent; border-width: 0; padding: 0',
        bodyStyle: 'background-color: transparent; background-image: url(//ph-live-02.slatic.net/p/6/molten-official-gr7-fiba-basketball-orange-4397-1336487-66ec7bf47676dee873cbb5e8131c4c1f-gallery.jpg); background-size: 100% 100%;',
        width: 70,
        height: 70,
        id: windowId,
        border: false,
        bodyBorder: false,
        frame: false,
        cls: 'noPanelBorder',
        x: originalX,
        y: originalY,
        shadow: false,
    });
}

img.stopAnimation();
img.show();

// go down
img.animate({
    duration: 500,
    from: {
        x: originalX,
        y: originalY,
    },
    to: {
        y: originalY + 180,
    }
});

// ...

工作小提琴here.

关于您的编码风格的其他题外话：

• 无需将图像窗口保存到“检查器”，如果“检查器”存在再次调用Ext.getCmp()，如果没有保存，只需获取图像并创建它即可节省时间。
• 一般多使用变量来存储你的数据，而不是多次调用同一个方法（textReference.getBox().x - 90 在你的小sn-p中被调用了3次。如果你想改变它，你必须仔细看看哪里否则应用）。
• 尽可能避免在 ExtJS 中定义任何样式。使用 CSS 类添加 cls 配置并将您的样式应用到单独的 CSS 文件中。