Android animation summary

a  type of animation

1.1 Animation is also widely used in Android, such as clicking buttons, loading boxes, and transitions of Activities, etc.

1.2 Commonly used animations are as follows

Frame-by-frame animation [Frame Animation], that is, sequentially play the pictures prepared in advance

Tween animation [Tween Animation], the animation effect of View can realize simple translation, scaling, and rotation.

Property Animation [Property Animation], an enhanced version of tween animation, supports animation on objects.

Transition animation [Transition Animation], to achieve Activity or View transition animation effect. Including MD transition animation after 5.0, etc.

Two  frame by frame animation 

2.1 Define an animation xml and set the image collection

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="100" android:drawable="@drawable/new_shuaxin_00000" />
    <item android:duration="100" android:drawable="@drawable/new_shuaxin_00001" />
    <item android:duration="100" android:drawable="@drawable/new_shuaxin_00002" />
    <item android:duration="100" android:drawable="@drawable/new_shuaxin_00003" />
    <item android:duration="100" android:drawable="@drawable/new_shuaxin_00004" />
</animation-list>

2.2 java setting animation

//定义组件
ImageVIew ivImage = findViewById(R.id.iv_refresh_header);
//开始动画
ivImage.setImageResource(R.drawable.anim_loading);
mAnimationDrawable = (AnimationDrawable) ivImage.getDrawable();
mAnimationDrawable.start();

//停止动画
ivImage.clearAnimation();
if (mAnimationDrawable != null){
	mAnimationDrawable.stop();
}

three-tween animation

2.1 Types of tween animation

Transparency change, size scaling change, displacement change, rotation change

2.2 Transparency animation, two definition methods

xml definition

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

java definition

AlphaAnimation alpha = new AlphaAnimation(0, 1); 
alpha.setDuration(500);          //设置持续时间 
alpha.setFillAfter(true);                   //动画结束后保留结束状态 
alpha.setInterpolator(new AccelerateInterpolator());        //添加差值器 
ivImage.setAnimation(alpha);

2.3 Size and zoom animation, two definition methods

xml definition

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" > 
    <scale 
        android:duration="1000" 
        android:fillAfter="false" 
        android:fromXScale="0.0" 
        android:fromYScale="0.0" 
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
        android:pivotX="50%" 
        android:pivotY="50%" 
        android:toXScale="1.4" 
        android:toYScale="1.4" /> 
</set>

java definition

ScaleAnimation scale = new ScaleAnimation(1.0f, scaleXY, 1.0f, scaleXY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); 
scale.setDuration(durationMillis); 
scale.setFillAfter(true); 
ivImage.setAnimation(scale);

2.4 Displacement animation, two definition methods

xml definition

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" > 
    <translate 
        android:duration="2000" 
        android:fromXDelta="30" 
        android:fromYDelta="30" 
        android:toXDelta="-80" 
        android:toYDelta="300" /> 
</set>

java definition

TranslateAnimation translate = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta); 
translate.setDuration(durationMillis); 
translate.setFillAfter(true); 
ivImage.setAnimation(translate);

2.5 Rotation animation, two definition methods

xml definition

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" > 
    <rotate 
        android:duration="3000" 
        android:fromDegrees="0" 
        android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
        android:pivotX="50%" 
        android:pivotY="50%" 
        android:toDegrees="+350" /> 
</set>

java definition

RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); 
rotate.setDuration(durationMillis); 
rotate.setFillAfter(true); 
ivImage.setAnimation(rotate);

2.6 Combined Animation AnimationSet

RelativeLayout rlRoot = (RelativeLayout) findViewById(R.id.rl_root);

//旋转动画
RotateAnimation animRotate = new RotateAnimation(0, 360,
			Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
			0.5f);
animRotate.setDuration(1000);// 动画时间
animRotate.setFillAfter(true);// 保持动画结束状态

//缩放动画
ScaleAnimation animScale = new ScaleAnimation(0, 1, 0, 1,
			Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
animScale.setDuration(1000);
animScale.setFillAfter(true);// 保持动画结束状态

//渐变动画
AlphaAnimation animAlpha = new AlphaAnimation(0, 1);
animAlpha.setDuration(2000);// 动画时间
animAlpha.setFillAfter(true);// 保持动画结束状态

//动画集合
AnimationSet set = new AnimationSet(true);
set.addAnimation(animRotate);
set.addAnimation(animScale);
set.addAnimation(animAlpha);

//启动动画
rlRoot.startAnimation(set);

Three attribute animation

3.1 xml+java calling method

define-animator.xml

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

    java call

Button button = (Button) findViewById(R.id.button); 
Animator mAnim = AnimatorInflater.loadAnimator(this, R.animator.animator); 
mAnim.setTarget(button); 
mAnim.start();

3.2 Pure java method

ObjectAnimator mAnimator = ObjectAnimator.ofFloat(view, type, start, end); 

// 设置动画重复播放次数 = 重放次数+1 
// 动画播放次数 = infinite时,动画无限重复 
mAnimator.setRepeatCount(ValueAnimator.INFINITE); 
// 设置动画运行的时长 
mAnimator.setDuration(time); 
// 设置动画延迟播放时间 
mAnimator.setStartDelay(0); 
// 设置重复播放动画模式 
mAnimator.setRepeatMode(ValueAnimator.RESTART); 
// ValueAnimator.RESTART(默认):正序重放 
// ValueAnimator.REVERSE:倒序回放 
//设置差值器 
mAnimator.setInterpolator(new LinearInterpolator()); 
return mAnimator; 

3.3 ValueAnimator value animation, mainly responsible for value calculation and transition, as well as animation playback times, playback mode and animation monitoring, etc.

ValueAnimator animator = ValueAnimator.ofFloat(1, 0.5f, 1);
animator.setDuration(3000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = (Float) animation.getAnimatedValue();
        imageView.setScaleX(value);
    }
});
animator.start();

3.4 ObjectAnimator object animation, inheriting ValueAnimator, can directly modify the properties of the object

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "scaleX", 1, 0.5f, 1);
animator.setDuration(3000);
animator.start();

3.5 PropertyValuesHolder, used to save the value of the property

PropertyValuesHolder xHolder = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.5f, 1.0f);
PropertyValuesHolder yHolder = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0.5f, 1.0f);

ObjectAnimator.ofPropertyValuesHolder(imageView, xHolder, yHolder)
        .setDuration(3000)
        .start();

3.6 AnimatorSet, to achieve multiple animation effects

ObjectAnimator xAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 0.5f, 1.0f);
ObjectAnimator yAnimator = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 0.5f, 1.0f);

AnimatorSet animator = new AnimatorSet();
animator.playTogether(xAnimator, yAnimator);
animator.setDuration(3000);
animator.start();

AnimatorSet can also specify the order of animations, calling the playSequentially() method to play animations in sequence 

ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.5f, 1.0f);
animator1.setDuration(2000);

ObjectAnimator xAnimator2 = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 0.5f, 1.0f);
ObjectAnimator yAnimator2 = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 0.5f, 1.0f);
AnimatorSet scaleAnimator = new AnimatorSet();
scaleAnimator.playTogether(xAnimator2, yAnimator2);
scaleAnimator.setDuration(2000);

ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);
animator3.setDuration(2000);

AnimatorSet animator = new AnimatorSet();
animator.playSequentially(animator1, scaleAnimator, animator3);

animator.start();

3.7 Evaluator, telling the animation system how to transition from the initial value to the end value

• IntEvaluator : A calculator used to calculate the value of an int type attribute
• FloatEvaluator : A calculator for calculating float type property values
• ArgbEvaluator : An calculator for calculating color values ​​represented in hexadecimal form
• TypeEvaluator: The interface of the calculator, we can implement this interface to complete the custom calculator

Four transition animation, that is, Activity transition animation 

4.1 Define animation xml

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

    <translate
        android:duration="270"
        android:fromXDelta="100%p"
        android:toXDelta="0%p" />

</set>

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

    <translate
        android:duration="270"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p" />

</set>

4.2 Set style

<!--左右进出场的activity动画-->
<style name="My_AnimationActivity" mce_bogus="1" parent="@android:style/Animation.Activity">
	<item name="android:activityOpenEnterAnimation">@anim/open_enter</item>
	<item name="android:activityCloseExitAnimation">@anim/close_exit</item>
</style>

<!--上下进出场的activity动画-->
<style name="up_down_activity_anim" mce_bogus="1" parent="@android:style/Animation.Activity">
	<item name="android:activityOpenEnterAnimation">@anim/open_up</item>
	<item name="android:activityCloseExitAnimation">@anim/close_down</item>
</style>

4.3 java call

startActivity(intent);
overridePendingTransition(R.anim.bottom_top_anim, R.anim.alpha_hide);

finish();
overridePendingTransition(R.anim.alpha_show, R.anim.top_bottom_anim);

4.4 After Android5.0, Android comes with several animation effects. 3 transition animations, 1 shared element

   Three transition animations

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void explode(View view) {
	intent = new Intent(this, TransitionActivity.class);

	intent.putExtra("flag", 0);

	startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void slide(View view) {
	intent = new Intent(this, TransitionActivity.class);

	intent.putExtra("flag", 1);

	startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void fade(View view) {
	intent = new Intent(this, TransitionActivity.class);

	intent.putExtra("flag", 2);

	startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

}

share animation

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void share(View view) {
	View fab = findViewById(R.id.fab_button);
	intent = new Intent(this, TransitionActivity.class);

	intent.putExtra("flag", 3);

	//创建单个共享
    //startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, view, "share")
    //            .toBundle());

	//创建多个共享
	startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create
			(view, "share"),
			Pair.create(fab,"fab"))
			.toBundle());

}