Android animation understanding-view animation

视图动画

View animation included 补间动画(Tween Animation)with逐帧动画(Frame Animation)

1. Tween Animation

XML implementation	Code
alpha transparency animation	AlphaAnimation
scale zoom animation	ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
translate moving animation	TranslateAnimation
rotate rotate animation	RotateAnimation
set animation collection	AnimationSet

// 代码实现
TranslateAnimation translateAnim = new TranslateAnimation(0, 300, 0, -50);
translateAnim.setFillAfter(true);
translateAnim.setDuration(1000);
view.startAnimation(translateAnim);

透明的效果

看看XML的DEMO

// XML实现 => res/anim/translate_anim.xml
// 动画集合 set,包含了 alpha(透明) + rotate(旋转)
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
	// 透明度 0.0 ~ 1.0 的过渡
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
	// 旋转(以中心旋转(0~720)
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />
</set>
// 在代码中进行设置 xml 动画文件
Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
view.startAnimation(animation);

// 代码翻译XML
AnimationSet set = new AnimationSet(true);
set.addAnimation(new AlphaAnimation(...));
set.addAnimation(new RotateAnimation(...));
set.setDuration(3000);
view.startAnimation(set);

The meaning of several attributes

XML tag attributes	Code attributes	meaning
android:duration	setDuration(long)	Time, milliseconds, the time of animation execution
android:fillAfter	setFillAfter(boolean)	If true, the animation ends and keeps the state at the end
android:fillBefore	setFillBefore(boolean)	If true, the animation ends and restores to the initial state
android: fillEnabled	setFillEnable(boolean)	Similar to setFillBefore, the animation ends and the original state is restored
android:repeatCount	setRepeatCount(int)	The number of animation repetitions (greater than or equal to 0), when the value is less than 0 or Animation.INFINITE, infinite loop
android:repeatMode	setRepeatMode(int)	The type of animation repeat: reverse (reverse playback), restart (start from new), must be used together with repeatCount to have effect
android:interpolator	setInterpolator(Interpolator)	Interpolator (explained together in the chapter on attribute animation)

// 以 中间的位置 进行 缩放(1.0 ~ 1.2 ~ 1.0 ~ 1.2) 动画
ScaleAnimation scaleAnim = new ScaleAnimation(
	1.0f, 1.2f, 1.0f, 1.2f,
	Animation.RELATIVE_TO_SELF, 0.5f, 
	Animation.RELATIVE_TO_SELF, 0.5f);

Other related attributes

ScaleAnimation, AlphaAnimation, etc. inherit from Animation. In addition to the related functions above, Animation
also provides cancel()取消动画,reset()将控件恢复到动画开始前的状态

You can also set up animation-related monitoring Animation.setAnimationListener(new Animation.AnimationListener() { ... Start ... End ... }

The callbacks of AnimationListener include the following:

• onAnimationStart(Animation animation) When the animation starts
• onAnimationEnd(Animation animation) At the end of the animation
• onAnimationRepeat(Animation animation) When the animation repeats, the repeat count of repeatCount is generally set to trigger

// 示例代码
translateAnim.setAnimationListener(new Animation.AnimationListener() {
    
    
	@Override
	public void onAnimationStart(Animation animation) {
    
    
	}

	@Override
	public void onAnimationEnd(Animation animation) {
    
    
	}

	@Override
	public void onAnimationRepeat(Animation animation) {
    
    
	}
});

Scene small theater
There is a small scene, it is an HDMI signal interface of our company, it is this kind of water ripple, and some signal coverage also has similar animation effects...

There are also some progress bars seen on the interface. circle, such as
there we see some applications of transition effects.

Of course, there are many scenes used, here are just a few...

2. Frame Animation

The popular understanding is that playing pictures frame by frame, just like playing a movie/animation, can be implemented through XML or code;

XML implementation

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" | "true">
    <item android:drawable="@drawable/img000001" android:duration="60(integer)"/>
    ... ...
</animation-list>

• android:oneshot If defined as true, the animation will only be executed once, otherwise, it will always loop
• android:drawable Specify the image resource for this frame of animation
• android:duration Duration of frame animation, integer, unit of millisecond ms

Give a chestnut (XML) :

# playing_test_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/img000001" android:duration="60"/>
    <item android:drawable="@drawable/img000002" android:duration="60"/>
 	... ...
</animation-list>

# 布局 xml 文件
<ImageView android:src="@drawable/playing_test_anim"/>
        
# 代码执行
AnimationDrawable animDrawable = (AnimationDrawable) imageView.getDrawable();     
animDrawable.start();

Several commonly used functions of AnimationDrawable

Function name	meaning
start	Start playing
stop	Stop play
int getDuration(int index)	Get the time of the specified index frame
Drawable getFrame(int index)	Get the Drawable object corresponding to the specified index frame
int getNumberOfFrames()	Get the number of all frames
boolean isRunning()	Is it playing
setOneShot(boolean oneShot)	true is executed once, false is looped
boolean isOneShot()	Return true to execute once, return false to play in loop
addFrame(Drrawable frame, int duration)	Add a frame and set the duration

Code

Key functions:addFrame(Drrawable frame, int duration)

Give a little chestnut (code) :

final AnimationDrawable animationDrawable = new AnimationDrawable();
for (int i = 1; i < 28; i++) {
    
    
	int id = getResources().getIdentifier("img00000" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    animationDrawable.addFrame(drawable, 60);
}
animationDrawable.setOneShot(false);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();

Scene small theater
Frame animation will appear in the production of more complex personalized animation effects, such as boot animation, and similar boot animations, etc.

Summary
Frame Animation (frame by frame animation) is
优点：relatively simple (simple and convenient to use), and the frequency used in actual development is relatively high.
缺点：On the one hand, it will cause OOM, on the other hand it will be very stuck, on the other hand there will be a lot of resource pictures;If the animation is complex and the number of frames is relatively large, it is not recommended to use frame-by-frame animation

Nowadays, technologies are emerging in endlessly, and many alternative solutions have emerged, such as SVG动画, Lottie库etc.

Reference

Android animation-View animation usage scenarios

---

Understanding Android Animation—Why Need Animation <=Previous Chapter Next Chapter=> Understanding Android Animation—Property Animation