Timed Actions

While image strip is a method provided within iOS to allow for burst of animated content, the conversion within iOS from image to sequenced video can be a little cumbersome and does not carry the best performance effort within iOS.

One trick I like to use within Wire when I need to animatie a sequence of images is a combination of load, conditional statements and an action that loops over itself to give me optimal control of my sequence.

First the finish action blocks of code we'll be using:



<main>
<image name="AnimatedSeq" alias="ANIMATED-SEQ" />
</main>

<action oninit="yes">
<assign property="var:frameCount" value="0" />
</action>

<action name="loop">
<if lhs="[var:frameCount]" operator="lte" rhs="26">
<sync delay="0">
<load source="graphics/mySeq[var:frameCount].jpg" target="ANIMATED-SEQ"/>
<assign property="var:frameCount" value="[eval: [var:frameCount] + 1]" />
<if lhs="[var:frameCount]" operator="lt" rhs="26">
<play action="loop"/>
</if>
<if lhs="[var:frameCount]" operator="=" rhs="26">
<alert message="I'm Done" />
</if>
</sync>
</if>
</action>


First let's look at the image we will be replacing in the sequence.


<image name="AnimatedSeq" alias="ANIMATED-SEQ" />


Nothing fancy here, we simply just place the first image in the sequence that we want the user to see.

Next we want to create a var that we can use to track the sequence and to use in showing the appropriate image. So we have a simple oninit action that sets the var:frameCount to 0 upon loading the app.

<assign property="var:frameCount" value="0" />

This var shows that we want to make sure that our images are sequenced and named appropriately. So instead of the image strip requirement of a prefix and 4 digit number, we can simplify this. We CAN optionally add a prefix, but it's not required, here I used 'mySeq' then just start you numbering at 0.

mySeq0.jpg, mySeq1.jpg mySeq2.jpg, mySeq3.jpg, etc...

In my example above you will see the number '26' in a few places, this is the total images my sequence requires.

Let's take a look at the action 'loop'.

I have a conditional statement that leads off the action and checks the var:frameCount value.

<if lhs="[var:frameCount]" operator="lte" rhs="26">

This will make sure that once we kick off this action to animate our sequence that we are within the bounds of our sequence numbering and then using that var: perform a load action on the source of the image.

<load source="graphics/mySeq[var:frameCount].jpg" target="ANIMATED-SEQ"/>

Here, since we are starting the animation we will see mySeq0.jpg first be placed in the load. Then immediately following the load (remember we are in a sync) we increment the var:frameCount with an eval: statement:

<assign property="var:frameCount" value="[eval: [var:frameCount] + 1]" />

Now we will create two sibling conditional statement to fork the action and decide if we are done with the animation or need to loop the action over itself and continue incrementing the sequence until we hit 26.

<if lhs="[var:frameCount]" operator="lt" rhs="26">

The first conditional checks to see if our var:frameCount is less than our last slide, 26. If so, we ask the action to start again. And in doing so the action will now go and load slide mySeq1.jpg and increment the var:frameCount to 2 and continue this pattern until it hits our other conditional statement:

<if lhs="[var:frameCount]" operator="=" rhs="26">

Once the var:frameCount hits our ceiling in the sequence, I have placed an alert to just verify the sequence has completed.

While this may initial seem like a complex solution to a control iOS provides, the control and sequencing makes the implementation very repeatable and reliable without losing performance on the device. This also gives a very nice introduction into the power of looped actions and conditional statements.

Please let me know if you have any questions.