Moving large images around the screen isn’t one of LiveCode’s strengths, especially on mobile, but that doesn’t mean the task is impossible. Using Malte Brill’s AnimationEngine library, the movement of a large image can be accomplished fairly well, and can be done with easing (momentum) effects. Instead of applying movement directly to the image object, this technique involves placing the image inside a group and programmatically changing the group’s scroll. This arrangement allows the use of LiveCode’s acceleratedRendering property to optimize the group’s scrolling behavior. And by using AnimationEngine, you have the option to apply different types of easing. Download this demo stack to see how it’s done.
First we need to make sure the stack has some properties enabled and that the AnimationEngine library is loaded for use. For those that haven’t used AnimationEngine, Malte intends the AE stack to be added as a substack of your mainStack, which can be done using the Property Inspector or using the Message Box, by simply executing the following statement:
With the mainStack saved, the following is placed in the card script:
set acceleratedRendering of this stack to true
set layerMode of grp 1 to “scrolling”
start using stack “animationengine”
These openStack settings turn on acceleratedRendering, confirm that the layerMode of the scrolling group is “scrolling”, put the AnimationEngine library in use, and set AE’s frame to a high value (50) for smoother animation.
Here’s the script from the Scroll It button:
put width of img 1 – width of grp 1 into hScrollValue
put 0 into vScrollValue
aeScrollTo long id of grp 1,hScrollValue,vScrollValue,4000,“out”
This code tells the AnimationEngine library to scroll group 1 using the values assigned in hScrollValue (the width of the image minus the width of the group) and vScrollValue (0), over an interval of 4000 milliseconds, using an “out” easing effect. And that’s really all there is to it. When the Scroll It button is pressed, you should see the rock formation scroll across the card, slow, and come to a stop after 4 seconds.
Besides the “out,” easing effect, Animation Engine has several easing options to choose from: “in”, “inout”, “bounce”, and “overshoot.” Use them wisely.