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 in 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 is the image corresponding to the current action, and duration is its duration. The length of duration affects the speed of the animation. Then, in the Activity, retrieve the AnimationDrawable corresponding to this drawable file and use the AnimationDrawable object to control the animation state, as follows:

// 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 a Frame Animation with code involves creating an AnimationDrawable object and adding the corresponding frames to it. The code is as follows:

// 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 own specific attributes. Let's take a look at some common attributes for these animations, as follows:

<!-- 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 playing, default is 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 playing, default is false. If fillAfter is set to true, the animation will stay at the end position -->
android:fillAfter = "false"
<!-- Set whether fill... attributes are enabled, 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 makes the animation start slowly and then accelerate -->
android:interpolator = "@android:anim/accelerate_interpolator"

If implementing the corresponding animation in code, these attributes also have corresponding property 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 animations using XML or create them in 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 specific meanings of the translation animation attributes 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, retrieve the TranslateAnimation corresponding to this XML file and set it to the View where you want to apply the translation animation, as follows:

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 a translation animation in code, use the subclass of Animation, TranslateAnimation, and create a TranslateAnimation object directly, as follows:

// Create translation animation in code
private void translation(){
    // Represents the 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 offsets as percentages relative to the View itself or its parent View. The following method of creating a TranslateAnimation object achieves the same effect as the previous implementation:

/**
 * ABSOLUTE: Represents the 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
 * RELATIVE_TO_PARENT: Represents a percentage relative to the parent View, e.g., 0.5f means 50% of the View's size, 1.0f means the full size
 */
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 enlarges or shrinks the View to a certain extent. You can define scale animations using XML or create them in 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 specific meanings of the scale animation attributes 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 scale center -->
android:pivotX="50%"
<!-- Set the vertical coordinate of the scale center -->
android:pivotY="50%">

The pivotX and pivotY can be set in three ways:

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

Then, in the Activity, retrieve the ScaleAnimation corresponding to this XML file and set it to the View where you want to apply the scale animation, as follows:

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

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

// 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);
}

As for the pivotXType and pivotYType parameters mentioned earlier, they have already been explained, so they will not be repeated here. The test effect is as follows:

Rotate Animation#

Rotate animation rotates the View by a certain angle. You can define rotate animations using XML or create them in 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 specific meanings of the rotate animation attributes 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 earlier. Then, in the Activity, retrieve the RotateAnimation corresponding to this XML file and set it to the View where you want to apply the rotate animation, as follows:

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

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

// 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 the View. You can define alpha animations using XML or create them in 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 specific meanings of the alpha animation attributes 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, retrieve the AlphaAnimation corresponding to this XML file and set it to the View where you want to apply the alpha animation, as follows:

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

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

// 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 in 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, retrieve the AnimationSet corresponding to this XML file and set it to the View where you want to apply the combination animation, as follows:

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

Creating Combination Animation in Code: To create a combination animation in code, use the subclass of Animation, AnimationSet, and create an AnimationSet object directly, adding the animations to the AnimationSet in order, as follows:

// 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.