Android Frame Animation and Tween Animation

Android provides three types of animations: Frame Animation, Tween Animation, and Property Animation. This article introduces the use of Frame Animation and Tween Animation, while the use of Property Animation will be shared in a later article. Let's review the usage of these two types of animations.

FrameAnimation
TweenAnimation
Summary

FrameAnimation#

FrameAnimation is a frame-by-frame animation, which simply means playing images in sequence to create an animation. FrameAnimation can be defined using XML or created directly with code.

Creating Frame Animation with XML#

Create a drawable file in the res/drawable folder using the animation-list tag, as shown below:

<?xml version="1.0" encoding="utf-8"?>
<!--FrameAnimator-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/zzlx1"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx2"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx3"
        android:duration="100" />
    <!--...-->
</animation-list>

The attribute oneshot set to true means the animation can only play once, while false means the animation loops. drawable corresponds to the image for the current action, and duration is its duration. The length of duration affects the speed of the animation. Then, in the Activity, obtain the AnimationDrawable corresponding to the drawable file and use the AnimationDrawable object to control the animation state, as shown below:

// Get the AnimationDrawable corresponding to the Frame animation file
mAnimationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_animator);
// Set AnimationDrawable as the background of the image
imageView.setBackground(mAnimationDrawable);

// Start the animation
mAnimationDrawable.start();
// Stop the animation
mAnimationDrawable.stop();

Creating Frame Animation with Code#

Creating Frame Animation with code involves creating an AnimationDrawable object and adding the corresponding frames to it, as shown below:

// Create Frame animation with code
mAnimationDrawable = new AnimationDrawable();
// Set the animation to loop, true means the animation plays only once
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx1),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx2),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx3),100);
//...
imageView.setBackground(mAnimationDrawable);

// Start the animation
mAnimationDrawable.start();
// Stop the animation
mAnimationDrawable.stop();

The effect of FrameAnimation is as follows:

TweenAnimation#

TweenAnimation, commonly referred to as tween animation, mainly includes the following types:

Translation Animation
Scale Animation
Rotate Animation
Alpha Animation
Combination Animation

Each of the above animations has its unique properties. Let's take a look at some common properties for these animations, as shown below:

<!-- Set the duration of the animation -->
android:duration="1200"
<!-- Delay before the animation starts -->
android:startOffset ="1000"
<!-- Whether the animation returns to the starting position after playback, default true. If fillBefore is set to false, the animation will not stay at the end position, which may be a bug -->
android:fillBefore = "true"
<!-- Whether the animation returns to the end position after playback, default false. If fillAfter is set to true, the animation will stay at the end position -->
android:fillAfter = "false"
<!-- Enable fill... properties, ineffective for fillAfter -->
android:fillEnabled= "true"
<!-- Set the animation repeat mode, restart means replay, reverse means play in reverse, used with repeatCount -->
android:repeatMode = "restart"
<!-- Set the number of times the animation repeats -->
android:repeatCount = "0"
<!-- Set the animation interpolator, here the interpolator starts slowly and accelerates later -->
android:interpolator = "@android:anim/accelerate_interpolator"

If implementing the corresponding animation in code, these properties also have corresponding settings that can be set directly.

Translation Animation#

Translation Animation translates the position of a View horizontally or vertically, allowing you to specify the starting and ending positions. You can define translation animation using XML or create it with code. The subclass of Animation corresponding to translation animation is TranslateAnimation.

Defining Translation Animation in XML: Create an xml file named translation_anim.xml in res/anim, and define the translation animation as follows:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100">

The above XML file defines a translation animation file, where the properties of the translation animation are as follows:

<!-- Starting position of the animation in the horizontal direction -->
android:fromXDelta="0"
<!-- Starting position of the animation in the vertical direction -->
android:fromYDelta="0"
<!-- Ending position of the animation in the horizontal direction -->
android:toXDelta="100"
<!-- Ending position of the animation in the vertical direction -->
android:toYDelta="100"

Then, in the Activity, obtain the TranslateAnimation corresponding to the XML file and set it to the View you want to animate, as shown below:

private void translation(){
    // Get the animation file defined in anim
    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translation_anim);
    // Set and start the animation
    ivImage.startAnimation(translateAnimation);    
}

Creating Translation Animation in Code: To create translation animation in code, use the subclass of Animation, TranslateAnimation, and create a TranslateAnimation object directly, as shown below:

// Create translation animation in code
private void translation(){
    // Represents pixel offset relative to the View's own origin (top-left corner)
    TranslateAnimation translateAnimation = new TranslateAnimation(0,100,0,100);
    // Set the duration of the animation
    translateAnimation.setDuration(1200);
    // Set the repeat mode of the animation
    translateAnimation.setRepeatMode(Animation.REVERSE);
    // Set the number of times the animation repeats
    translateAnimation.setRepeatCount(3);
    translateAnimation.setFillAfter(true);
    // Set the animation interpolator
    translateAnimation.setInterpolator(this,android.R.anim.accelerate_interpolator);
    //...
    ivImage.startAnimation(translateAnimation);    
}

The parameters used here are pixel offsets. The API also provides a way to set percentages relative to the View itself or its parent View. The following method of creating a TranslateAnimation object achieves the same effect as the above implementation:

/**
 * ABSOLUTE: Represents pixel offset relative to the View's own origin (top-left corner)
 *          This is the same as TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
 * RELATIVE_TO_SELF: Represents a percentage relative to the View itself, e.g., 0.5f means 50% of the View's size, 1.0f means the full size of the View
 * RELATIVE_TO_PARENT: Represents a percentage relative to the parent View, e.g., 0.5f means 50% of the parent View's size, 1.0f means the full size of the parent View
 */
TranslateAnimation translateAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f,
        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f);

You can choose the appropriate constructor to create TranslateAnimation as needed. The test effect is as follows:

Scale Animation#

Scale Animation is used to enlarge or shrink a View to a certain extent. You can define scale animation using XML or create it with code. The subclass of Animation corresponding to scale animation is ScaleAnimation.

Defining Scale Animation in XML: Create an xml file named scale_anim.xml in res/anim, and define the scale animation as follows:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "3"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXScale="1"
    android:fromYScale="1"
    android:toXScale="3"
    android:toYScale="3"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>

The above XML file defines a scale animation file, where the properties of the scale animation are as follows:

<!-- Set the starting scale factor in the horizontal direction -->
android:fromXScale="1"
<!-- Set the starting scale factor in the vertical direction -->
android:fromYScale="1"
<!-- Set the ending scale factor in the horizontal direction -->
android:toXScale="3"
<!-- Set the ending scale factor in the vertical direction -->
android:toYScale="3"
<!-- Set the horizontal coordinate of the scaling center -->
android:pivotX="50%"
<!-- Set the vertical coordinate of the scaling center -->
android:pivotY="50%">

The pivotX and pivotY can be set in three ways:

Number: e.g., 50 means the scaling center is offset by 50px from the View's origin.
Percentage: e.g., 50% means the scaling center is offset by 50% of the View's size from the View's origin.
Percentage p: e.g., 50%p means the scaling center is offset by 50% of the parent View's size from the View's origin.

Then, in the Activity, obtain the ScaleAnimation corresponding to the XML file and set it to the View you want to animate, as shown below:

private void scale(){
    ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale_anim);
    ivImage.startAnimation(scaleAnimation);
}

Creating Scale Animation in Code: To create scale animation in code, use the subclass of Animation, ScaleAnimation, and create a ScaleAnimation object directly, as shown below:

// Create scale animation in code
private void scale(){
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setDuration(500);
    scaleAnimation.setRepeatCount(5);
    scaleAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
    //...
    ivImage.startAnimation(scaleAnimation);
}

The parameters pivotXType and pivotYType have been mentioned previously, so they will not be elaborated on here. The test effect is as follows:

Rotate Animation#

Rotate Animation rotates the angle of a View. You can define rotate animation using XML or create it with code. The subclass of Animation corresponding to rotate animation is RotateAnimation.

Defining Rotate Animation in XML: Create an xml file named rotate_anim.xml in res/anim, and define the rotate animation as follows:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromDegrees="0"
    android:toDegrees="100"
    android:pivotY="50%"
    android:pivotX="50%">
</rotate>

The above XML file defines a rotate animation file, where the properties of the rotate animation are as follows:

<!-- Set the starting angle of the animation, positive means clockwise, negative means counterclockwise -->
android:fromDegrees="0"
<!-- Set the ending angle of the animation, positive means clockwise, negative means counterclockwise -->
android:toDegrees="100"
<!-- Set the horizontal coordinate of the rotation center -->
android:pivotY="50%"
<!-- Set the vertical coordinate of the rotation center -->
android:pivotX="50%"

The pivotX and pivotY can be set in three ways as explained previously. Then, in the Activity, obtain the RotateAnimation corresponding to the XML file and set it to the View you want to animate, as shown below:

private void rotate(){
    RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate_anim);
    ivImage.startAnimation(rotateAnimation);   
}

Creating Rotate Animation in Code: To create rotate animation in code, use the subclass of Animation, RotateAnimation, and create a RotateAnimation object directly, as shown below:

// Create rotate animation in code
private void rotate(){
    RotateAnimation rotateAnimation = new RotateAnimation(0,100,
            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setDuration(1200);
    rotateAnimation.setRepeatCount(3);
    rotateAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
    //...
    ivImage.startAnimation(rotateAnimation);
}

The test effect is as follows:

Alpha Animation#

Alpha Animation modifies the transparency of a View. You can define alpha animation using XML or create it with code. The subclass of Animation corresponding to alpha animation is AlphaAnimation.

Defining Alpha Animation in XML: Create an xml file named alpha_anim.xml in res/anim, and define the alpha animation as follows:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "true"
    android:fillEnabled= "false"
    android:repeatMode = "restart"
    android:repeatCount = "0"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromAlpha="1"
    android:toAlpha="0">
</alpha>

The above XML file defines an alpha animation file, where the properties of the alpha animation are as follows:

<!-- Set the starting transparency of the animation, 0 means transparent, 1 means opaque -->
android:fromAlpha="1"
<!-- Set the ending transparency of the animation, 0 means transparent, 1 means opaque -->
android:toAlpha="0"

Then, in the Activity, obtain the AlphaAnimation corresponding to the XML file and set it to the View you want to animate, as shown below:

private void alpha(){
    AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
    ivImage.startAnimation(alphaAnimation); 
}

Creating Alpha Animation in Code: To create alpha animation in code, use the subclass of Animation, AlphaAnimation, and create an AlphaAnimation object directly, as shown below:

// Create alpha animation in code
private void alpha(){
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
    alphaAnimation.setRepeatMode(Animation.RESTART);
    alphaAnimation.setDuration(1500);
    alphaAnimation.setRepeatCount(3);
    //...
    ivImage.startAnimation(alphaAnimation);
}

The test effect of the alpha animation is as follows:

So far, we have covered the content of translation, scaling, rotation, and alpha animations. In addition to using these animations individually, you can also combine them to achieve more complex animations.

Combination Animation#

Combination animations are implemented using AnimationSet. You can define combination animations using XML or create them with code. The subclass of Animation corresponding to combination animations is AnimationSet.

Defining Combination Animation in XML: Create an xml file named combine_anim.xml in res/anim, and define the combination animation as follows:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200">

    <!-- Alpha Animation -->
    <alpha
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromAlpha="1"
        android:toAlpha="0.5" />

    <!-- Rotate Animation -->
    <rotate
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <!-- Scale Animation -->
    <scale
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" />
</set>

Then, in the Activity, obtain the AnimationSet corresponding to the XML file and set it to the View you want to animate, as shown below:

private void combine(){
    AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
    ivImage.startAnimation(animationSet);
}

Creating Combination Animation in Code: To create combination animations in code, use the subclass of Animation, AnimationSet, and directly create an AnimationSet object, adding the animations to be combined in order, as shown below:

// Create combination animation in code
private void combine(){
    AnimationSet animationSet = new AnimationSet(true);
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.3f);
    alphaAnimation.setRepeatMode(Animation.REVERSE);
    alphaAnimation.setRepeatCount(3);
    RotateAnimation rotateAnimation = new RotateAnimation(0,360,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setRepeatCount(3);
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setRepeatCount(3);

    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(rotateAnimation);
    animationSet.addAnimation(scaleAnimation);

    animationSet.setDuration(1200);
    // AnimationSet does not support repeating animations. If you want the combination animation to repeat, set each animation to repeat instead.
    ivImage.startAnimation(animationSet);
}

The test effect of the combination animation is as follows:

Summary#

This article summarizes the use of Frame Animation and Tween Animation in Android development. The next article will introduce Property Animation (ObjectAnimator).