Flex高清图片动画

Question

我有一套高分辨率的照片。这些图片中的每一幅都显示了不同角度的汽车。它的想法是从一张图片切换到另一张，这样它给用户的印象是汽车正在转弯。

Flex花了很多时间渲染这幅画。因此，开关的发生具有滞后效应，而不是像它假设的那样平滑。

首先，我在一个名为initLeftRightModel onCreateChildren的视图上添加图像：

        protected function initLeftRightModel():void
        {
            if(containerLeftRight && definitionLeftRight)
            {
                for(var i:int = 0; i<36;i++)
                {
                    var img:Image = new Image();
                    img.height = 1068 * scaleFactor;
                    img.width = 2048 * scaleFactor;
                    img.contentLoader = ldr;
                    img.contentLoaderGrouping = 'gr1';
                    if(i < 10 ) img.source = modelPath+'/0'+i.toString()+'.png';
                    else img.source = modelPath+'/'+i.toString()+'.png';
                    containerLeftRight.addElement(img);
                    if(i>0)img.visible=false;
                }
        }

我调用函数turnModelTo将最后一张图片的可见性切换为false，并将旁边的图片切换为true：

        /**Turns the model in the direction of the finger according to the variation of X.**/
        protected function turnModelTo(newX:Number):void
        {           
            var val:int = 0;
            direction = (oldX != newX)?oldX - newX:direction;
            if(oldX > newX) val =  (oldValue+1<36)?oldValue+1:0;
            else if(oldX < newX) val = (oldValue-1>0)?oldValue-1:35;
            else if(oldX == newX) val = oldValue;
            oldX = newX;

            containerLeftRight.getElementAt(oldValue).visible = false;
            oldValue = val;
            containerLeftRight.getElementAt(val).visible =  true;
        }

图像只加载一次，我正在使用缓存。问题在于图像的渲染。

图像分辨率为2048x1068。这是一个移动项目，我目前正在iPad航空上测试。我很感激关于如何最好地编码这个功能的任何帮助或想法。

谢谢

Answer 1

这是一个很明显的例子，在GPU上进行计算会使事情变得更好。您首先应该将renderMode切换到GPU。转到application.xml，并编辑以下内容：

<initialWindow>
<renderMode>gpu</renderMode>
</initialWindow>

您还应该使用Bitmap类而不是Image类。这将上传您的png文件作为纹理到GPU。下面是您如何做到这一点的How do you load a bitmap file into a BitmapData object?

Answer 2

在手机上用这么多这么大的图片，用Flex.这并不奇怪，你有性能问题。

首先，如果可能的话，您应该在服务器端根据设备调整图像大小。加载36高清图像与3G连接将需要相当长的时间。如果要减少设备上的尺寸，那就浪费了时间。

然后确保您使用的是spark.components.Image，而不是旧的图像类。

最后但并非最不重要的是，使用缓存。在您的问题中的代码中是否定义了一个不清楚，因为没有显示变量ldr的初始化方式。应该是这样的：

var ldr = new ContentCache();
ldr.enableCaching = true;
ldr.enableQueueing = true; 

或者，如果图像不应该改变，您可以将它们嵌入应用程序中，而不是加载它们，并使用BitmapImage组件来显示它们。该应用程序将更重，但您将没有任何加载时间。