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 Air。我很感激有关如何最好地编写此功能的任何帮助或想法。

由于

Answer 1

在移动设备上使用如此多的大图片，使用Flex ......您遇到性能问题就不足为奇了。

首先，如果可能，您应该在服务器端调整图像大小到设备。使用3G连接加载36张高清图像需要相当长的时间。如果要缩小设备尺寸，就会浪费时间。

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

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

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

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

Answer 2

这是一个明显的例子，在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?

Flex高清图片动画

2 个答案: