With over 2 million apps in Google Play Store, good functionality only is no longer enough to retain your app users. Animations is a good way to make your app stand out. Meaningful animation provides delightful details and gives your app a feel of being polished and premium. It also gives your users visual clues on what is happening in your app, making the app logic easy to follow.
Google has many good documentations on different types animations and ways of using them. In this article, I sum up the implementation of frequently used animation.
This article does not cover Transitions. I am planning to write another article specifically on Transition.
View Animation
View Animation is the simplest animation you can get. It has two types. Tween Animation and Frame Animation. Tween Animation is based on Animation class. It can do animation of alpha, scale, translate and rotate on a view. Frame animation allows you to define animations of drawables frame by frame.
The limitation of View Animation is
- it only works on a View.
- you can only animate limited aspects of a view.
- it only change where the view is drawn on the screen but it does not move the view itself.
The official documentation for View Animations can be found here.
Tween Animation in Java
You can implement tween animation in Java. The following code implemented rotate animation and scale animation.
Tween Animation with XML
Using XML for animations is recommended by Google as it is more readable and reusable. The following example shows an translate animation defined in a XML and the Java code to load and start the animation.
The XML goes into res/anim foler in your project and the root element can be a single <alpha>, <scale>, <translate>, <rotate>, interpolator element, or <set> element that holds groups of these elements. The following example shows an animation set.
Frame Animation
To let a view run animation across a set of drawables frame by frame, create a drawable xml.
Then, set the drawable as the background of a view in the activity (or fragment) layout.
Finally, start the animation in the activity Java code. Here we call stop before calling start. This allows the animation to be run more than once.
Property Animation
Property Animation is the most powerful animation and yet a bit more complex than View Animation. It has 3 key components.
- Animator
- Time Interpolator
- Type Evaluator
Animator is the high level component which comprises Time Interpolator and Type Evaluator. After animation starts, it calculate the elapsed fraction (elapsed time/total duration) every 10ms and call time interpolator to calculate the interpolated fraction. E.g. A Button view is animated to move 100px along x axis in 1000 ms. 200 ms into the animation, the elapsed fraction is 0.2
Time Interpolator can convert the elapsed fraction into a relative time fraction equivalent to when the object moves with a constant speed (or with a linear time interpolator). E.g. elapsed fraction 0.2 in the previous example will be converted to 0.1 in the AccelerateDecelerateInterpolator.
Type Evaluator takes the interpolated fraction and calculate the position the button should be. In the previous example, the value should be 10 px.
The official documentation for Property Animation is here.
Using ObjectAnimator
ObjectAnimator will call set<PropertyName>() method on the view to update the view on screen. As long as the setter exists, you don’t need to explicitly listen to the update event and update the property on the object.
Using ValueAnimator
ValueAnimator does not update the view automatically, developers have to implement and set a ValueAnimator.AnimatorUpdateListener to act on the calculated value, which can be retrieved by calling getAnimatedValue().
Using AnimatorSet
Property Animation allows you to define animation set as well. The XML of animation set goes to res/animator instead of res/anim in View Animation.
View Property Animatior
View Property Animator provide a simple interface for animating view properties. Unlike View Animation which only change how the view is drawn but not the view itself, View Property Animator changes the animated property itself. It also simplified the way of running more than one animations in parallel.
Layout Animation
Layout animation animates adding and removing child view within a view group between View.VISIBLE and View.GONE. You can enable this animation by specifying android:animateLayoutChanges=”true” in the layout XML.
Vector Drawable Animation
Vector Drawable animation works for Android v21 (Lollipop) and above. When you use vector animation, make sure you provide a working fallback for devices with lower Android versions.
Morph Vector Path
In the example above, the switch between tick and cross on the FAB button is animated. First, create vector drawables for tick and cross.
Then create three animators. One animator gives the rotation animation, the second one morphs tick to cross, and the third one morphs cross to tick.
The paths for tick and cross are extracted to string resources as they are used more than once. This allows the vector paths to be easily updated.
After animators are created, create two AnimatedVectorDrawables. One for animating tick to cross by rotation and morphing using the group name we defined in vector drawable and the three animators defined above. The other one animates cross to tick in the same way.
Lastly, we kick off the animation in the onClick listener on the FAB button while keeping a working fallback for lower versions of Android.
Animate Clip Path
The second animation in the above example animates the heart drawable between an empty heart and a filled heart. Here is how we can do it.
First we define a heart drawable with a clip-path to make the drawable an empty heart. We will animate the clip path to achieve the desired effect.
Secondly, we create two animators. One for animating an empty heart to a filled heart, the other one for animating a filled heart to an empty heart.
Then, we create two AnimatedVectorDrawables to use the two animators we just created.
Finally, we start the animation in the ImageView’s onClick listener. We also provide a working fallback for Android versions lower than v21.
Source Code
The source code for the examples used in this article can be found on my Github repository.
