Hi after24,
I believe I had replied you on this topic, in case you missed it, here is the
link (at the 13th floor):
http://apache-flex-development.2333347.n4.nabble.com/Scroller-optimization-td41774.html#a42858
What I'am saying is, by simply using the cacheAsBitmap mechanism, you can
achieve the same goal, so there is no need to modify the Scroller.as source
code.
Here is the sample code for how to use cacheAsBitmap to improve the scrolling
performance:
<s:Scroller width="100%" height="100%">
<s:Group>
<s:DataGroup id="realContent"
touchInteractionStart="realContent.mouseChildren=false;
realContent.cacheAsBitmap=true;"
touchInteractionEnd="realContent.mouseChildren=true;
realContent.cacheAsBitmap=false;"
itemRenderer="com.test.renderers.MyItemRenderer" dataProvider="{someData}"
width="100%">
<s:layout>
<s:VerticalLayout useVirtualLayout="false"/>
</s:layout>
</s:DataGroup>
</s:Group>
</s:Scroller>
The essential elements are:
1. You have to put a Group inside the Scroller, then put the real content
(<s:DataGroup id="realContent">) inside that Group.
2. The layout of the realContent, you have to set its useVirtualLayout property
to false (the default value is false).
3. Listen for the realContent's touchInteractionStart and touchInteractionEnd
event:
When touchInteractionStart, disable any mouse and touch interactions of the
realContent's mouseChildren by setting realContent.mouseChildren = false, then
turn on the cache for realContent by setting realContent.cacheAsBitmap = true.
When touchInteractionEnd, reverse the changes you made for the realContent.
That's it! It's very easy to improve the scrolling performance by doing so.
It's the same scrolling performance result when compared to the
BitmapData.copyPixels() approach, yet cacheAsBitmap is much easier to
understand and handle.
If you do not believe me, please test it yourself : )
DarkStone
2015-04-18
At 2015-04-17 17:26:23, "after24" <vinc...@after24.net> wrote:
>Hello,
>
>I have been working on the scroller component to improve the framerate of
>the scrolling operations with an optimization based on the blitting
>technique.
>In this experiment, the Scroller component has a new boolean property named
>cacheViewport.
>
>When cacheViewPort is set to true, all scrolling operations are performed
>according to the following cycle :
>
>1 - A bitmap copy of the viewport is made just before the next scrolling
>operation (large viewports are cached in multiple tiles if necessary)
>
>2 - When the user starts a scrolling operation, the actual viewport is
>replaced by its bitmap version and the scrolling is executed by drawing the
>viewport according to its verticalScrollPosition and
>horizontalScrollPosition properties.
>
>3 - At the end of the scroll operation, the bitmap viewport is replaced by
>its actual version.
>
>4 - Between each scrolling operations, when the user interacts with the
>viewport content, a process mark as 'dirty' every regions of the viewport
>that are likely to have changed during those interactions. Every dirty
>region is redrawn before the next scrolling operation.
>
>
>Pros :
>
>- 60 FPS scrolling, even on old devices.
>- Performance is no longer dependant on the viewport complexity.
>- Can be used with the list component if it contains a moderate number of
>rows (useVirtualLayout must be set to false though)
>
>Cons :
>
>- There is a slight lag (dependant on the device processor) during the
>viewport rasterization and the process of redrawing every dirty regions.
>- Doesn't support virtualized layouts.
>- Animated elements of the viewport freezes during scrolling operations.
>- Render mode must be set to <renderMode>gpu</renderMode> on the current
>version.
>- Depending on its dimensions, the viewport rasterization process can
>consume large amounts of memory.
>
>
>It works well, even on old phones. I tested it on a nexus S, a nexus 4 and a
>nexus 7 (however, I didn’t made tests on ios devices).
>
>A demo application can be downloaded on the android play market here :
>https://play.google.com/store/apps/details?id=air.fr.after24.ViewportCacheDemo
><https://play.google.com/store/apps/details?id=air.fr.after24.ViewportCacheDemo>
>
>
>I opened a Jira ticket with the source code FLEX-34821
><https://issues.apache.org/jira/browse/FLEX-34821>
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/Flex-Scroller-optimization-tp46074.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
