Question

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

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

它只是一个基本动画，其中一个＆＃34;球＆＃34;会下降，然后上下反弹使它看起来像弹起然后下降两次然后停留在底部，然后逐渐淡出。

它工作得很好，但是，如果用户在上一个动画链仍处于动画状态时一遍又一遍地点击该按钮，动画将会复合并且位置的计算将变得复杂，从而使球化看起来要低得多。

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

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

Answer 1

球落下越来越低的问题是您将原始Y定义为textReference.getBox().y - 10，然后尝试将其移动到不同的原始Y + 180.将原始Y设置为textReference.getBox().y - 10并且然后只需用它来放置窗口，启动aniamtion和其他动画部分。

其次，您应该使用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。

关于您的编码风格的其他非主题评论：

无需将图片窗口保存到“检查器”中。如果＆＃39;检查员＆＃39;存在再次调用Ext.getCmp()，如果没有保存，它可以节省获取图像和创建图像的时间。
通常使用变量来存储您的数据而不是多次调用相同的方法（textReference.getBox().x - 90只在您的小片段中调用三次。如果您想要更改它，您必须仔细查看哪里否则它被应用）。
如果可能，请避免在ExtJS中定义任何样式。使用CSS类添加cls配置，并将样式应用于单独的CSS文件中。

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

1 个答案: