ExtJSに4.2 - 私は、Webアプリケーションを構築することだし、ボタンがクリックされた場合、このアニメーションのチェーンが実行される部分がありますコンポーネント

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

それはちょうど基本ですアニメーションが「ボール」がドロップしてから上下にバウンスすると、ボウリングが2回上がってから下に落ちた後、フェードアウトするように見えます。

しかし、以前のアニメーションチェーンがまだアニメーション化されている間にユーザーがボタンを何度もクリックすると、アニメーションが合成され、ポジションの計算が複雑になり、ボールがはるかに低く見えるようになりますそれよりもすべきです。

これを防ぐには、ボタンをクリックするとアニメーションチェーン全体が最初にキャンセルされ、次にアニメーションが上から開始されます。これは、既存のアニメーションが停止してから新しいシーケンスが開始されるようにするためです。

誰でもこれを実行する方法について考えていますか？私はstopAnimation()を試しましたが、何も起こりません。

Answer 1

ボールが下降したり下がったりする問題は、オリジナルのYをtextReference.getBox().y - 10と定義して別の元のY + 180に移動しようとしていることです。元のYを最初にtextReference.getBox().y - 10に設定してから、アニメーションの開始、およびその他のアニメーションパーツ。あなたは、あなたが言及したstopAnimation()メソッドを使用することができ、それを行う場合

第二に、あなたの代わりに

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

のimg.animate()を使用する必要があります。

例コード：フィドルhere作業

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

// ... 

。あなたのコーディングスタイルに

その他、オフトピックのコメント：

• 「チェッカー」へと「チェッカー」は再びExt.getCmp()を呼び出すために存在する場合は、画像ウィンドウを保存する必要はありません、それだけで取得する時間を節約できますイメージが保存されていない場合は、イメージを作成して作成します。
• 多くの場合、同じメソッドを何度も呼び出すのではなく、データを格納するために変数を多く使用します（textReference.getBox().x - 90は小さなスニペットで3回呼び出されます）。変更したい場合は、 ）。
• 可能な限り、ExtJSでスタイルを定義しないでください。 CSSクラスを使用してcls設定を追加し、別のCSSファイルにスタイルを適用します。