5.4.11. Creating the Flag Shake Animation

In this section, you’ll create the animation that shakes the flag when the user guesses incorrectly. We’ll show how this animation is used by the app in Section 5.6.9. To create the animation:

1. Right click the project’s res folder, then select New > Folder, in the Folder name field enter anim and click Finish.

2. Right click the anim folder, then select New > Android XML File to display the New Android XML File dialog.

3. In the File text field, enter the name incorrect_shake.xml.

4. Ensure that the Resource Type is Tween Animation and the Root Element is set.

5. Click Finish to create the file. The file opens immediately in XML view.

6. Unfortunately, the IDE does not provide an editor for animations, so you must modify the XML contents of the file as shown in Fig. 5.17.

Click here to view code image

 1   <?xml version="1.0" encoding= "utf-8"?>
 2
 3   <set xmlns:android="http://schemas.android.com/apk/res/android"
 4      android:interpolator="@android:anim/decelerate_interpolator">
 5
 6      <translate android:fromXDelta="0" android:toXDelta="-5%p"
 7         android:duration="100"/>
 8
 9      <translate android:fromXDelta="-5%p" android:toXDelta= "5%p"
10         android:duration="100" android:startOffset= "100"/>
11
12      <translate android:fromXDelta= "5%p" android:toXDelta= "-5%p"
13         android:duration="100" android:startOffset= "200"/>
14   </set>

Fig. 5.17 | Shake animation (incorrect_shake.xml) that’s applied to the flag when the user guesses incorrectly.

In this example, we use View animations to create a shake effect that consists of three animations in an animation set (lines 3–14)—a collection of animations that make up a larger animation. Animation sets may contain any combination of tweened animations—alpha (transparency), scale (resize), translate (move) and rotate. Our shake animation consists of a series of three translate animations. A translate animation moves a View within its parent. Android also supports property animations in which you can animate any property of any object.

The first translate animation (lines 6–7) moves a View from a starting location to an ending position over a specified period of time. The android:fromXDelta attribute is the View’s offset when the animation starts and the android:toXDelta attribute is the View’s offset when the animation ends. These attributes can have

• absolute values (in pixels)

• a percentage of the animated View’s size

• a percentage of the animated View’s parent’s size.

For the android:fromXDelta attribute, we specified an absolute value of 0. For the android:toXDelta attribute, we specified the value -5%p, which indicates that the View should move to the left (due to the minus sign) by 5% of the parent’s width (indicated by the p). If we wanted to move by 5% of the View’s width, we would leave out the p. The android:duration attribute specifies how long the animation lasts in milliseconds. So the animation in lines 6–7 will move the View to the left by 5% of its parent’s width in 100 milliseconds.

The second animation (lines 9–10) continues from where the first finished, moving the View from the -5%p offset to a %5p offset in 100 milliseconds. By default, animations in an animation set are applied simultaneously (i.e., in parallel), but you can use the android:startOffset attribute to specify the number of milliseconds into the future at which an animation should begin. This can be used to sequence the animations in a set. In this case, the second animation starts 100 milliseconds after the first. The third animation (lines 12–13) is the same as the second, but in the reverse direction, and it starts 200 milliseconds after the first animation.