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在您的小片段中被調用三次，如果您想要更改它，您必須仔細看看它在哪裏應用）。
• 如果可能，請避免在ExtJS中定義任何樣式。使用CSS類添加cls配置並將您的樣式應用於單獨的CSS文件。