CHAPTER 10: Android Animation: Making Your UI Designs Move 367Now that you have learned about frame animation, let’s learn about the other major type of
animation, called vector or procedural animation, which is supported in Android. The term in Android
for this type of animation is “tween animation.”
Tween Animation Concepts and Techniques
The patron saint of animation, Mr. Walt Disney, is also responsible for the animation term tween, as
cels were “tweened” or “in betweened” by his junior animators. The senior animators would create
the primary movement “key frames” and the junior animators would then create the “tweens.” Be
careful not to confuse this term with the popular term used to describe the pre-teen (twelve+teen)
years, unless of course you know someone in this age range who is a very talented animator, like
some of the artisans who are probably reading this book right now, so that they can take their work
to the next level (interactive).
Tweening is now done algorithmically for you by the Android OS using something that’s called
interpolation. Interpolation algorithms are provided by the Android Animation class, which we will
be learning all about after we get up-to-speed on all of our tween animation (or vector or procedural
animation) concepts and terminology. One of the cool things that was added in Android 5 was
additional interpolation algorithms, so be sure not to skip the final chapter in this book covering
Android 5!
These procedural attributes are the types of attributes which can be interpolated, or more accurately,
which can be “transformed” by using interpolation. They include alpha (transparency) which you’ve
already learned about to some extent, as well as translation, which is the 2D industry term for
movement; scale, which is the industry term for size; and rotation, which is the industry term
describing which direction something is facing.
Each of these concepts (rotate, scale, and translate) has an XML tag and class in Android, so let’s
cover these new vector animation concepts next. In case you might be wondering, a “vector” is a
“ray” that is traced out in two or three dimensions, starting at one point and shooting out through
(or to, it if stops) another point. So, a line, basically.
Procedural Concepts: Rotate, Scale, Translate
Let’s start out by learning about some of the concepts involved in vector imaging (illustration) and
animation. First of all, there are two primary types of vector platforms, 2D or two-dimensional (flat)
vector graphics such as we find in Illustrator or InkScape, and 3D, or three-dimensional (volumetric)
vector graphics, such as what we find in 3D modeling software such as Blender 3D or Autodesk 3D
Studio MAX.
Concepts that we cover in this section of the chapter will apply to both 2D and 3D imaging and
animation, but we are sticking to 2D Animation in this Absolute Beginners book!
Both 2D animation and 3D animation utilize vectors. 2D vectors, which use x and y coordinates,
are used in 2D, and 3D vectors, which use x, y, and z coordinates, are used in 3D. Both 2D and 3D
animation involve these core concepts of translation (movement), rotation (direction), and
scaling (size).