368 CHAPTER 10: Android Animation: Making Your UI Designs Move
There is a z concept in 2D animation, but it is not a z-axis, but rather a z-order. z-order in 2D is akin
to layers in digital imaging, as we have already discussed earlier in the book. z-order involves what
layer order each 2D (flat) layer is in, and whether it is front of, or behind, other 2D layers, making the
z-order a number which orders the layers in your 2D composite. This z-order number defines what
is in front of, and what is behind, any given 2D layer. Changing this z-order numeric value in realtime
using your Java programming logic can create flip-book special effects.
Translation in 2D involves movement along an x or y axis, and it is the most basic of the three
transformations you can achieve in 2D animation. Translation is defined by the starting point for the
movement, the amount or distance of that movement, in pixels or percentages, and the direction
of movement, along either an x or y axis (or along some relative combination of both x and y axis
values, which will create a diagonal movement).
Rotation in 2D involves rotation around a given x, y pivot point coordinate. The amount of rotation
is defined using degrees, a direction (positive/clockwise or negative/counter-clockwise) of the
rotation, and the pivot point (center) location of the rotation. Since there are 360 degrees in a full
circle, rotational mathematics involves this 360 number specifically, like FPS calculations involve the
number 1000 (number of milliseconds in a second).
Scale in 2D involves a size for a given shape, and is defined by a decimal number relative to the
current size of the shape. For instance, a 0.5 scale would be half of the current size, and a 2.0 scale
would be twice the current size of that shape. Like translation, scaling has an x and a y component.
If the values are the same, this scaling can be said to be uniform scaling; if they’re not the same,
the scaling could be said to be non-uniform scaling.
To draw a parallel to something that you have learned about previously, uniform scaling maintains
aspect ratio, and non-uniform scaling “skews” or “distorts” (that is, changes) the aspect ratio.
Therefore, non-uniform scaling is most often used for animation special effects, such as making a
ball “squash” when it bounces off the ground.
Interestingly, you can also define a pivot point for your scaling operation, which allows skewed
scaling where the placement of the pivot point can influence your scaling operation. On irregular
shapes, this can give a more precise level of control over the resulting shape-warping special effects
for the scaling operation. Given that sometimes the 2D shapes being scaled contain bitmap images,
you can obtain some very interesting results using a pivot point placement that is not at the exact
center point of that image. The industry term for putting an image in a 2D shape or on a 3D object is
called “texture mapping.”
Procedural Data Values: Ranges and Pivot Point
In order to be able to interpolate, we need to specify more than a single numeric value, because
interpolation, or tweening, involves creating new interim values between a starting and ending
value. So, information learned in the previous sections (interpolation) will be applied to information
found in this section (ranges), and then in the next section, we will cover alpha blending as well as
the more complicated procedural animation parameters that are available to control animation start
time offsets, looping characteristics, and how many times it loops.
To have any procedural animation, we will always need to specify a range, from a starting value,
called a From value, to the ending value, called a To value. This seems logical, as we need to
animate something over time from one value to another value!