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:
- Alpha: Transparency gradient effect
- Rotate: Rotate effect
- Translate: Displacement effect
- 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, 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, so that the View that has just disappeared is redisplayed. 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:
- RELATIVE_TO_SELF: Relative to the control itself;
- RELATIVE_TO_PARENT: relative to the parent control;
- 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 multiple animation effects to be placed and executed 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~