使用大量组件在Flex中平滑滑动动画

时间:2010-11-19 21:50:01

标签: flex actionscript canvas viewstack

我创建的组件与Viewstack类似,但下一个索引组件从四个方面之一滑入。我已经让它运行得很好,可以使用它,但我想让它更有效率。

现在我正在使用Canvas作为基本组件,我使用ImageSnapshot(new Bitmap( ImageSnapshot.captureBitmapData( this ) ))创建当前视图的快照,并在索引更改时在该图像的顶部滑动新索引。

我基本上是在寻找有关如何更好地做到这一点的建议。通过在组件加载后获取图像,并且在幻灯片发生之后,我已经将初始的jaded移动降到最小,但我们通常使用它来转换网格,因此在第一个或第一个幻灯片上几乎总是很慢。 / p>

到目前为止,这是它的一些看法:

private function creationComplete(e:Event):void
{
  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

public function set selectedIndex(value:int):void
{
  if(_selectedIndex == value + 1)
    return;
  _selectedIndex = value+1;

  var obj:UIComponent;

  tmpImage.height = height;
  tmpImage.width = width;
  tmpImage.visible = true;
  tmpImage.x = 0;
  //tmpImage.includeInLayout = true;

  for (var i:int = 1; i < numChildren; i++)
  {
    obj = UIComponent(getChildAt(i));
    //obj.x = width;
    if(i == _selectedIndex){
      obj.visible = true;
      objDisplay = obj;
    }
    else
      obj.visible = false;
  }

  mv1.target = tmpImage;
  mv2.target = objDisplay;

  switch ( direction )
  {
    // X/Y sliding logic
  }
  parEfect.play();

  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

如果您想知道,我正在使用画布的索引0作为图像,并将我的自定义selectedIndex偏移1。

如果需要,我会发布更多内容,但我想将问题保持在最低限度,这几乎可以总结。

非常感谢任何帮助!我真的想让这个组件表现得更好。此外,这必须使用Flex 3

完成

4 个答案:

答案 0 :(得分:2)

什么是mv1和mv2?它们是Flex效果吗?如果是这样,他们的速度非常慢,我建议使用TweenLite。如果您绝对需要使用它们,请在它们上设置suspendBackgroundProcessing = true。最后但同样重要的是,请确保您没有设置布局。如果你这样做,你会导致每一帧重新布局,这很容易让动画陷入困境。

答案 1 :(得分:1)

您可能正在从正在创建的所有组件中获取一些内存命中,然后立即转换为图像。我肯定会尝试在创建时添加一些智能。在创建映像之前,请尝试检查内存使用情况并测试最大内存负载:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/system/System.html

但是,我需要查看对象中正在创建的内容。我怀疑你在每个视图中加载一些非常重的物体。如果从服务器为每个对象加载数据,可能会有延迟。

设置优先级队列,以便在正在创建的类中创建对象。 。 。例如,如果您有一个默认隐藏的菜单系统,请加载前端,然后仅在用户单击时加载菜单下拉列表,或者在创建所有其他立即可见对象后加载菜单下拉菜单。您还可以在所有立即可见的对象就位时以及创建隐藏对象之前拍摄快照。

最后,如果可以,在对象创建后添加事件侦听器,并记住尽快删除侦听器。

答案 2 :(得分:0)

您使用的是Flex 3还是Flex 4?

因为如果您使用Flex 4,我建议使用带有着色器滤镜的Animate滤镜。 着色器滤镜使用Pixel Bender,因此您可以在Pixel Bender中构建着色器,以便在两幅图像之间进行过渡。

有关详细信息,请参阅以下2个视频:

http://tv.adobe.com/watch/codedependent/pixel-bender-shaders-and-flex-4/

http://tv.adobe.com/watch/codedependent/shader-transitions-in-flex-4

答案 3 :(得分:0)

了解如何创建Move效果,mv1mv2会很有帮助。可以设置*From*To和/或*By属性的组合 - 或控制补间速度/持续时间的属性的各种操作 - 这些可能导致结果动画中的“抖动”或“急动”。

当然,你也有可能遇到某种性能障碍,但我怀疑这是一种更为阴险的东西。只要剪辑没有旋转,倾斜或缩放,任何剪辑的简单平移(“x / y滑动”)应该表现得相对较好;并且只要处理器没有完全超出同时正在进行的其他操作。

在大多数情况下,在定义Move效果时,您希望尽可能少地设置信息,并让Flex为其他事物计算最佳值。通常,这意味着只设置xToyTo

此外,在开始设置新值之前,请务必在补间上调用end()(以防任何先前的序列仍在运行)。

最后 - 确保在补间期间没有与组件的布局管理器竞争。在补间运行时,您应该完全禁用布局(通过setting autoLayout=false on your container component) - ,您可以将布局(临时)更改为绝对布局。无论哪种方式,补间必须允许在它运行时移动东西,移动的东西不得导致布局管理器重新计算内容,直到之后< / em>一切都结束了。完成后,您可以重新启用最初的布局管理器。