ZOFTINO.COM

How to Create Animations in Android

Animations in android can be implemented using property animation framework, view animation framework and drawable animation. The preferred method of animation in android is property animation because it provides a lot of features and is easy to use and extensible.

View animation can be used to animate views. Property animation animates properties of any object. Drawable animation is used to animate drawable resources by showing one after another.

Whatever you can do with view animation, can be done with property animation. In this post, I am going to explain property animation.

Property animation system

Android property animation system allows you to animate property of an object over a period of time from start value to end value. Animation comes from the change in value of a property. Android property animation system uses elapsed time to come up with new property value.

Elapsed time is not directly used to calculate new property value. Instead, elapsed time is passed to time interpolator which returns fraction of elapsed time depending on type of time interpolator used. Time interpolators allow you to get different animation effects. Android property animation system provides various interpolators. You can write your own interpolators to get desired animation behavior.

Android property animation system uses evaluators to calculate property values. Evaluators use starts value, end value and elapsed time returned by interpolators to calculate new value for property.

The basic class in property animation system is Animator class which takes animation time duration, object to be animated, property name and animation property start and end values. Animation works with the given interpolator and value evaluators to provide animations. Android system provides various animators, interpolators and evaluators.

Animators

Android animation framework provides ValueAnimator, ObjectAnimator and AnimatorSet animator classes. As mentioned before, Animator classes are main classes which perform animation work using interpolators and evaluators and contain time, property name and values and listeners information.

ObjectAnimator is subclass of ValueAnimator. The difference between ObjectAnimator and ValueAnimator is that ObjectAnimator updates the target object property with the calculated value. ValueAnimator does not set the calculated value on the target object. You have to use listeners to update the property value of target object with ValueAnimator. AnimatorSet is used to group animations.

Interpolators

Interpolators return fractions of elapsed time so that you can achieve different animation effects. Android frame work provides several interpolator classes. You can create custom interpolator by implementing TimeInterpolator interface to suit your requirements.

If you want animation to start slowly and then accelerate, you can use AccelerateInterpolator. To get opposite effect meaning start quickly and then decelerate, you can use DecelerateInterpolator. If you want same animation effect throughout the change, you can use LinearInterpolator. Use CycleInterpolator to repeat animation for certain number of times.

Evaluators

Evaluators calculate property value using start value, end value and time data. Android system provides IntEvaluator to calculate values for int type properties, FloatEvaluator for float properties and ArgbEvaluator for color properties. You can create evaluators for different types of properties by implementing TypeEvaluator interface.

Animation Listeners

If you want to perform some action when animation starts, ends, repeats or cancels, you need to implement Animator.AnimatorListener interface. There are call back methods for animation events such as start, end, repeat and cancel.

ValueAnimator class does not update animation property with calculated value. To update property with calculated value, you need to implement ValueAnimator.AnimatorUpdateListener which gets called each time a new value is calculated.

Animation with ValueAnimator

Animations can be defined in code or xml resource file. Xml resource file needs be placed in res/animator/ folder. To define ValueAnimator in xml, use animator element and its properties as shown below. Since ValueAnimator does not update the property of target object with calculated value, we need to set update listener as shown in below code. In the listener callback method, calculated value can be retrieved and set to the property of target object.

ValueAnimator xml configuration

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:valueFrom="20"
    android:valueTo="80"
    android:startOffset="100"
    android:repeatCount="4"
    android:repeatMode= "restart"
    android:valueType="intType"></animator>

Using ValueAnimator code

public class PropertyAnimationActivity extends AppCompatActivity {

    private TextView tview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tview = (TextView) findViewById(R.id.tview);

        ValueAnimator vanimator = ValueAnimator.ofInt(10, 80);
        vanimator.setDuration(2000);
        vanimator.setInterpolator(new CycleInterpolator(5));
        vanimator.setRepeatMode(ValueAnimator.REVERSE);
        vanimator.setStartDelay(200);
        vanimator.start();
        vanimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
           public void onAnimationUpdate(ValueAnimator animation){
               tview.setTextSize((int)animation.getAnimatedValue());
            }
        });
    }
}

Animation with ObjectAnimator

ObjectAnimator is subclass of ValueAnimator. As ObjectAnimator sets calculated value of animation propery on target object, animator update listener is not required. But in some cases where redraw of object is required, you need to implement update listener to force redraw of object each time animation property is updated by calling invalidate method on view.

And also when you use ObjectAnimator for animation, you need to make sure that the property that is being animated should have getter and setter methods and property type should match to the type of start and end values passed to ObjectAnimator.

ObjectAnimator xml configuration

 <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="string"
android:duration="2000"
android:valueFrom="40"
android:valueTo="100"
android:repeatCount="2"
android:repeatMode="reverse"
android:valueType="intType"></objectAnimator>
 

Using ObjectAnimator

 TextView tview2 = (TextView) findViewById(R.id.tview);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(tview2, "translationX", 10, 90);
objectAnimator.setDuration(1500);
objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
objectAnimator.setInterpolator(new AnticipateInterpolator());
objectAnimator.setEvaluator(new FloatEvaluator());
objectAnimator.start();
 

Multiple properties parallel animation

AnimatorSet

AnimatorSet can be used to group animations allowing multiple animations either play together or sequentially.

 AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(vanimator).with(objectAnimator);
animatorSet.start();
 

ViewPropertyAnimator

ViewPropertyAnimator simplifies parallel animation of several properties of a view. To use ViewPropertyAnimator, you need to simply call animation method on view whose properties you want to animate parallel and call property methods passing target value. Instead of using ObjectAnimator, using ViewPropertyAnimator is the efficient way to animate multiple properties of a view.

ViewPropertyAnimator viewPropertyAnimator = tview.animate();
viewPropertyAnimator.translationX(90).translationY(90);