ExtJs 4,2 - Отмена/сбросив цепи анимации для компонента

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

Это только основные анимация, где «мяч» будет падать, а затем подпрыгивать вверх и вниз, что делает его похожим на его подпрыгивание вверх, а затем вниз дважды, прежде чем оставаться на дне, а затем исчезает.

Это хорошо работает, однако, если пользователь нажимает на кнопку снова и снова, пока предыдущая анимационная цепочка все еще оживляет, анимация будет сложной, а вычисления для позиций будут усугублены, что сделает мяч намного ниже чем нужно.

Чтобы предотвратить это, я хочу, чтобы что-то случилось, когда кнопка нажата, вся цепочка анимации сначала отменяется, затем анимация начинается сверху. Это делается для того, чтобы любая существующая анимация остановилась, а затем начнется новая последовательность.

Есть ли у кого-нибудь идеи о том, как это выполнить? Я пробовал 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. Добавьте конфигурацию cls с классом CSS и примените стили в отдельный файл CSS.