Sencha Touch 2: переключение между двумя панелями с анимацией «Fade»?

Question

Мне интересно, как лучше всего поменять местами две панели на экране с эффектом затухания?

У меня есть две панели, которые я позиционировал поверх друг друга с помощью CSS. panelOne видна, панель скрыта.

На нажатие другой кнопки (не на каждой панели), я хочу panelOne исчезать и panelTwo к выгорают в.

В настоящее время я эту работу, используя следующий код, но я считаю, что это довольно лага на некоторых Устройства Android, которые мы имеем здесь для тестирования. Есть ли лучший способ сделать это, чем то, что я сейчас использую? Как я могу улучшить эту анимацию?

Этот код выполняется на кнопку крана:

Ext.Anim.run(panelOne, 'fade', { 
    duration: 100, 
    after: function() { 
     panelOne.hide(); 
    } 
}); 
Ext.Anim.run(panelTwo, 'fade', { 
    out: false, 
    duration: 100, 
    before: function() { 
     panelTwo.show(); 
    } 
}); 

Любая помощь очень ценится.

Спасибо.

Answer 1

Нет необходимости использовать Ext.Anim такой длинный.

Например, ваше приложение имеет Ext.Container, который содержит panelOne и panelTwo в качестве первого и второго элементов соответственно.

Затем, если вы хотите, чтобы перейти от panelOne к panelTwo с fade анимации, просто использовать:

Ext.getCmp('your_container_id').animateActiveItem(1,'fade')

или вы можете сделать это:

• Добавить showAnimation: 'fadeIn' в свой panelTwo config
• Добавить hideAnimation: 'fadeOut' в конфигурацию вашей панелиOne

Надеюсь, что это поможет.

Answer 2

контролировать другие конфигурации, такие как продолжительность, использование:

hideAnimation: {тип: 'FadeOut', продолжительность: 1000}