android - Sencha 触摸 2 : switch between two panels with a "fade" animation?

Question

我想知道用淡入淡出效果交换屏幕上两个面板的最佳方法是什么？

我有两个面板，我使用 CSS 将它们放置在彼此之上。 panelOne 可见，panelTwo 隐藏。

单击另一个按钮(不在任何一个面板上)时，我希望 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，分别作为第一个和第二个项目。

然后，如果您想使用 fade 动画从 panelOne 导航到 panelTwo，只需简单地使用:

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

或者您可以这样做:

• 将 showAnimation: 'fadeIn' 添加到您的 panelTwo 的配置中
• 将 hideAnimation: 'fadeOut' 添加到您的 panelOne 的配置中

希望对您有所帮助。