Tween Animation for Android animation learning

In this article, let's learn about the use of Tween Animation. Although tween animation is an older animation system in Android, it is enough for general needs, so it is necessary to master it. There are four main types of Tween Animation:

1. Alpha: Transparency gradient effect
2. Rotate: Rotate effect
3. Translate: Displacement effect
4. Scale: zoom effect

Tween Animation can be implemented in the form of xml or code. Next, we will illustrate these effects one by one.

AlphaAnimation

xml

In this example, we will use xml animation to change the transparency of ImageView from 0 to 1, and then use java code to change it from 1 to 0. First, the xml is written, and the location of the Tween animation is located in the res directory. In anim, create anim_alpha:

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="1000"
    android:repeatCount="0"
    android:repeatMode="reverse"
    android:fillAfter="true"/>

First explain a few properties that appear:

Interpolator: Interpolator, which modifies the speed of animation change, including accelerated (accelerated), decelerated (decelerated), repeated (repeated), bounced (bounced), etc.

duration: animation duration

repeatCount: The number of times the animation is repeated after one execution, 0 means no repetition

repeatMode: two kinds, the reverse execution mode is from -> to -> from repeated execution, restart is from -> to to change to from -> repeat this process

fillAfter: Whether to stay in the current state after the animation execution ends, true is to stay in the current state after the end of the animation

fromAlpha: A unique attribute of alpha animation, indicating the initial transparency of the animation, accepts float type

toAlpha: A unique attribute of alpha animation, indicating the transparency at the end of the animation, accepts float type

It is also very simple to use the written xml, calling in the code:

animation = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);
ivTest.startAnimation(animation);

In this way, we use xml to complete a transparency animation. The animation is not repeated, and the transparency of the control changes from 1 to 0 within 1S, that is, disappears, and maintains this state after the animation ends.

Java

Next, we use Java code to complete the transparency animation and redisplay the View that just disappeared. The code is very simple:

animation = new AlphaAnimation(0.0f,1.0f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(1000);
animation.setRepeatCount(0);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

You can see that all the attributes we configure in xml can be set in the code, so I won't go into details here.

Here is the animation effect:

RotateAnimation

xml

Without further ado, let’s go directly to the code:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="2"
    android:repeatMode="restart"
    />

The general attributes have been mentioned above, there is nothing to say, here we need to pay attention:

fromDegress: rotation start angle

toDegress: rotation end angle

pivotX: The X-axis coordinate of the rotation center point. If the % sign is added, it represents the position relative to its own width. For example, 50% refers to the center point of its own X-axis.

pivotY: The Y-axis coordinate of the rotation center point. If the % sign is added, it represents the position relative to its own width. For example, 50% refers to the center point of its own Y-axis.

These four attributes are unique attributes of RotateAnimation, which are called in the same code after the xml is written:

animation = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);
ivTest.startAnimation(animation);

The effect of this animation is to rotate 360 ​​degrees counterclockwise within 3S in the center of the view, repeating 3 times

Java

RotateAnimation has a lot of construction methods, which are written like this:

animation = new RotateAnimation(0,360,
    Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(3000);
animation.setRepeatCount(2);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

It should be noted that this construction method, we can see the source code

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue){}

Where fromProgress and toProgress are the start angle and end angle respectively, pivotXType is the X-axis position reference, which are:

1. RELATIVE_TO_SELF: Relative to the control itself;
2. RELATIVE_TO_PARENT: relative to the parent control;
3. ABSOLUTE: absolute coordinates;

pivotXValue and pivotYValue are the coordinates of the x and y axes respectively. When the type is RELATIVE_TO_SELF, the value is 0~1f. When the type is RELATIVE_TO_PARENT and ABSOLUTE, the value uses the pixel value px

The effect of this animation is to rotate one circle counterclockwise, then one circle clockwise and one circle counterclockwise (note that the repeatMode is REVERSE)

Here is the animation effect:

TranslateAnimation

xml

Or go directly to the code:

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0%"
    android:toYDelta="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

The unique properties here are:

fromXDelta: The X-axis position at the beginning of the animation, with the % sign is relative itself, without the % sign is the pixel value

toXDelta: The X-axis position at the end of the animation, with the % sign is relative itself, without the % sign is the pixel value

fromYDelta: The Y-axis position at the beginning of the animation, with the % sign is relative itself, without the % sign is the pixel value

toYDelta: Y-axis position at the end of the animation, with the % sign is relative itself, without the % sign is the pixel value

The code calls the animation:

animation = AnimationUtils.loadAnimation(this,R.anim.anim_translate);
ivTest.startAnimation(animation);

This animation effect is to translate the width of a View horizontally to the right, and at the same time translate the height of 0.5View down.

Java

The use of TranslateAnimation in the code is:

animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,
Animation.RELATIVE_TO_SELF,-1.0f,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-0.5f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(3000);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

The construction method used here is

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {}

The four int types are the reference objects, the same as the RotateAnimation above, and the other four are the four attributes used in xml.

This animation effect is just the opposite of the above xml

Conventionally, the animation effect is as follows:

ScaleAnimation

xml

How to write xml:

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="100%"
    android:toXScale="20%"
    android:fromYScale="100%"
    android:toYScale="20%"
    android:pivotX="100%"
    android:pivotY="100%"
    android:duration="500"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

The unique properties of ScaleAnimation are:

fromXScale: The starting scale of the X axis, 0~1

toXScale: X-axis end scaling, 0~1

fromYScale: The starting scale of the Y axis, 0~1

toYScale: Y-axis end scaling, 0~1

pivotX: The starting position of the animation X axis, with a % sign relative to itself, the rest are pixel values

pivotY: The starting position of the Y-axis of the animation, with a % sign relative to itself, and the rest are pixel values

Code call:

animation = AnimationUtils.loadAnimation(this,R.anim.anim_scale);
ivTest.startAnimation(animation);

This animation effect is to scale horizontally and down to 20% of the original View

Java

The way ScaleAnimation is used in the code is:

animation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,
Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,1);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(500);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

This time the construction method does not need to be elaborated, it is similar to the above two

The animation effect is like this:

AnimationSet

Let's talk about the use of an animation collection here

xml

The xml file of AnimationSet is also stored under res/anim. It allows to place multiple animation effects and execute them in sequence. The xml code is as follows:

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

Using xml is still

animation = AnimationUtils.loadAnimation(this,R.anim.anim_set);
ivTest2.startAnimation(animation);

It should be noted that in xml \ can be nested \

Java

Code:

//显示动画
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
...

//旋转动画
RotateAnimation rotateAnimation = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
...

//平移动画
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-1.0f,
                                                               Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-0.5f);
...

//拉伸动画
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,
Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,1);
...

//AnimationSet
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(alphaAnimation);
ivTest2.startAnimation(animationSet);

The effect is as follows

Epilogue

At this point, we have finished writing the four animation effects of Tween animation, and we are familiar with the use of AnimationSet. The demo has been uploaded to github, and the address is: github , welcome to advise~
ps: Make an advertisement, my personal blog , currently still Under construction, welcome to visit~