引言：

現在市面類似功能的App太多，如果你想要在類似的App中脫穎而出的話，那麼你就要在增強使用者體驗方面下功夫，動畫是你最好的選擇。它可以給使用者增加指引、吸引眼球、提醒使用者跟著你一步步操作等等，動畫是一個成熟App必不可少的。

Android動畫分類:

先簡單介紹一下Android中的幾種動畫，大致可分為三種：

1.補間動畫（也叫檢視動畫、Tween動畫）：

首先來了解下補間動畫的分類，在android中補間動畫可以分為四類：alpha(漸變)、scale(縮放)、translate(位移)、rotate(旋轉)。在這四種動畫裡每種動畫擁有它的獨有的屬性的同時又擁有相同的屬性，其中

alpha:漸變透明度動畫效果

scale:漸變縮放動畫效果

translate:漸變位置移動動畫效果

rotate:漸變旋轉動畫效果，這四種動畫能夠分別帶來不同的效果體驗，又能混合在一起完成酷炫的動畫效果。

接下來我們就逐一詳細的來學習這四種Tween動畫。

結語：補間動畫是android最早出現的動畫，只支援以上四種簡單的動畫，並且補間動畫只是視覺上的改變，不會影響控制元件的本身位置及大小，（就好像你在放大鏡裡看一個東西一樣，只是視覺上的改變，原物體並不改變），所以現在很少用這種動畫，它可以做的屬性動畫都可以做到。它的主要操作物件是Animation這個類，大家有興趣的可以下去了解一下，這裡主要介紹最常用的屬性動畫，所以就不多說了。

2.幀動畫

幀動畫，顧名思義就是像播放視訊一樣一幀一幀進行展示一樣，其實視訊也是一幀幀圖片組成的，那麼幀動畫也一樣，將 一組運動的圖分離開一個個小動作，然後組成，就是一個動畫，這種動畫一般是少量圖片（如一個icon之類的）才會用到，因為大家都知道要縮小apk的體積的話，首先就的注意減少使用不必要的資原始檔，所以只有少數情況會用這種動畫，使用方法很簡單，這裡就不多說了。

3.屬性動畫

接下來就是我們的重頭戲了，屬性動畫。首先得明白屬性動畫是真是改變控制元件本身的屬性，跟上面所說的補間動畫完全相反。

學習屬性動畫先從ValueAnimator這個類學起，這個類非常關鍵，是屬性動畫機制中最核心的一個類,所有的操作直接或者間接都是用它來改變值進行動畫效果。這句話是不是念起來有點拗口，大家有沒有注意ValueAnimator中Value這個詞，為什麼叫Value呢，大家都知道Java中見名知意，所以這個Value肯定是這個動畫的重點，Value：值的意思，那麼我們可以叫值動畫，沒錯就叫值動畫。屬性動畫是通過不斷改變值，再不斷改變你要作用的物件，來達到動畫的效果。是不是很好理解啊，下面我們來講一下這個值動畫，哈哈！

屬性動畫分類：屬性動畫大致又可以分為ValueAnimator，ObjectAnimator。

ValueAnimator：

valueAnimator是通過不斷改變值，手動進行賦值給物件，進行動畫效果。大家注意這個“手動”二字。

下面我們上程式碼具體來看，光說這些無聊的文字沒意思，大家跟著我一步步來：

Java程式碼寫法：

1. //這個就是我們說的ValueAnimator這個值動畫類，傳入引數開始值跟結束值，表示你要從哪個值到哪個值進行變化,我們這個意思是我要讓int值從0到100進行變化
2. ValueAnimator valueAnimator = ValueAnimator.ofInt(0,100);
3. //這裡是設定動畫執行時間，毫秒
4. valueAnimator.setDuration(2000);
5. //這裡是設定動畫的執行次數，為你填的n+1,-1表示一直執行
6. valueAnimator.setRepeatCount(0);
7. //動畫的下次執行開始位置，RESTART表示動畫每次從原始的狀態執行，REVERSE表示動畫第二次執行要從第一次改變後的狀態逆向執行
8. valueAnimator.setRepeatMode(ValueAnimator.RESTART);
9. //設定數值變化監聽器，重點在這裡，上面我們動畫的變化數值範圍已經設定好了，那麼動畫變化時的值會在這個監聽器中返回給我們，我們來手動賦值，來進行動畫顯示
10. valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
11. @Override
12. public void onAnimationUpdate(ValueAnimator animation) {
13. //獲取當前變化時的值
14. int value = (int) animation.getAnimatedValue();
15. Log.e("lwd","value:" + value);
16. //這裡我們給textview設定一個文字，就是我們的當前的數值，那麼就會顯示為從0到100一直變化的動畫
17. mTextViewPro.setText(value + "");
18. }
19. });
20. //開始執行動畫
21. valueAnimator.start();

大家通過上面的程式碼跟註釋是不是很好理解了，ValueAnimator這種動畫說到底就是設定好開始值、結束值，然後設定好了之後大家在新增監聽器之後，來捕獲數值，然後手動賦值，進行自己的動畫。

xml寫法：

大家在res下新建android資原始檔夾animator，新建一個xml檔案

1. <?xml version="1.0" encoding="utf-8"?>
2. <animator xmlns:android="http://schemas.android.com/apk/res/android"
3. android:valueFrom="0"
4. android:valueTo="100"
5. android:valueType="intType"
6. android:duration="3000"
7. android:fillBefore = "true"
8. android:repeatCount="0"
9. android:repeatMode="restart">
11. </animator>

大家看到了我們xml檔案已經寫好了，一些屬性都很簡單，見名知意，那麼我們來看一下怎麼載入這個xml檔案。

1. //就倆行程式碼，載入xml檔案，然後開始執行動畫
2. Animator animator = AnimatorInflater.loadAnimator(this, R.animator.value_animator);
3. animator.start();

大家也看到了xml檔案寫好之後數值就不會改變了，所以大多數複雜點的都用java來寫。

下面我們來引入一個新的東西，

重點：TypeEvaluator(估值器)

那麼估值器是什麼東西呢，我們先來看一段源嗎，很簡單

ValueAnimator valueAnimator = ValueAnimator.ofInt(0,100);這行程式碼我到ofint看看它到底怎麼實現的，

1. public static ValueAnimator ofInt(int... values) {
2. ValueAnimator anim = new ValueAnimator();
3. anim.setIntValues(values);
4. return anim;
5. }

上面是ofInt的方法我們看到只是new了一個ValueAnimator物件，然後設定一下值，給我們返回了這個物件，那麼操作這個這個值的過程應該跟這行程式碼有關係anim.setIntValues(values);我們進去再繼續看。

1. public void setIntValues(int... values) {
2. if (values == null || values.length == 0) {
3. return;
4. }
5. if (mValues == null || mValues.length == 0) {
6. setValues(PropertyValuesHolder.ofInt("", values));
7. } else {
8. PropertyValuesHolder valuesHolder = mValues[0];
9. valuesHolder.setIntValues(values);
10. }
11. // New property/values/target should cause re-initialization prior to starting
12. mInitialized = false;
13. }

從上面程式碼我們可以看到，首先判斷傳入的引數開始值跟結束值是否為空，為空則返回；否則的話設定值，那麼具體設定值，我們還得到PropertyValuesHolder這個類中檢視，下面我們來看。

1. void init() {
2. if (mEvaluator == null) {
3. // We already handle int and float automatically, but not their Object
4. // equivalents
5. mEvaluator = (mValueType == Integer.class) ? sIntEvaluator :
6. (mValueType == Float.class) ? sFloatEvaluator :
7. null;
8. }
9. if (mEvaluator != null) {
10. // KeyframeSet knows how to evaluate the common types - only give it a custom
11. // evaluator if one has been set on this class
12. mKeyframes.setEvaluator(mEvaluator);
13. }
14. }

大家看到了嗎，這裡初始化了一個IntEvaluator估值器，那麼我們看一下這個估值器裡面做了什麼操作

1. public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
2. int startInt = startValue;
3. return (int)(startInt + fraction * (endValue - startInt));
4. }

我們看到了一個fraction這個引數，這個引數大家可以理解為百分比的意思，估值器給我們不斷返回了動畫過程中不斷變化的數值，那麼到這裡我們該清楚估值器的作用了吧。

估值器顧名思義就是通過開始值跟結束值，給我們計算中間過渡值的一個東西。系統封裝了一些常用的估值器（如FloatEvaluate、IntEvaluate等），那麼接下來我們講一下怎麼自定義自己的估值器。

自定義估值器

需求：畫一個圓，讓圓的進行線性移動。

分析：首先要畫個圓，那麼我們可以自定義一個view，然後畫個圓。那麼素材有了，我們該怎麼讓它移動呢？用屬性動畫，那麼屬性動畫要確定開始值跟結束值，那麼，我們既然要移動的話，肯定是涉及到x、y座標，那麼我們開始值就可以定為圓當前的x、y座標，結束值我們也可以隨便定義一個，下面移動就是我們的重點了，我們帶著問題來一起往下看。

1. /**
2. * 屬性動畫值變化實體
3. * Created by liweidong on 2019/1/8.
4. */
6. public class Point {
8. private float x;
9. private float y;
11. public Point(float x, float y) {
12. this.x = x;
13. this.y = y;
14. }
17. public float getX() {
18. return x;
19. }
21. public void setX(float x) {
22. this.x = x;
23. }
25. public float getY() {
26. return y;
27. }
29. public void setY(float y) {
30. this.y = y;
31. }
32. }

首先我們建立一個x、y座標的物件。

接下來我們開始畫圓，進行自定義view。

1. /**
2. * 我的圓
3. * Created by liweidong on 2019/1/8.
4. */
6. public class MyCircleView extends View{
8. private static final float RADIUS = 70f;//半徑
9. private Paint mPaint;
10. private Point mPoint;
12. public MyCircleView(Context context, @Nullable AttributeSet attrs) {
13. super(context, attrs);
14. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
15. mPaint.setColor(Color.YELLOW);
16. }
18. @Override
19. protected void onDraw(Canvas canvas) {
20. super.onDraw(canvas);
21. //如果當前點座標為空，即第一次
22. if (mPoint == null){
23. mPoint = new Point(RADIUS, RADIUS);
24. float x = mPoint.getX();
25. float y = mPoint.getY();
26. canvas.drawCircle(x, y, RADIUS, mPaint);
28. //將屬性動畫作用到view上
29. //步驟一，建立初始動畫時的物件點，結束動畫時的物件點
30. Point startPoint = new Point(RADIUS,RADIUS);
31. Point endPoint = new Point(700,700);
32. //步驟二，建立動畫物件，設定初始值跟結束值
33. ValueAnimator valueAnimator = ValueAnimator.ofObject(new MyPointEvaluator(), startPoint, endPoint);
34. valueAnimator.setDuration(5000);
35. valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
36. @Override
37. public void onAnimationUpdate(ValueAnimator animation) {
38. //當前的點
39. mPoint = (Point) animation.getAnimatedValue();
40. //很重要，每次賦值要呼叫重新繪製
41. invalidate();
42. }
43. });
44. valueAnimator.start();
45. }else{
46. //接收到動畫改變的點後，一直進行ondraw
47. float x = mPoint.getX();
48. float y = mPoint.getY();
49. canvas.drawCircle(x, y, RADIUS, mPaint);
50. }
52. }
53. }

上面我們自定義了view，通過動畫監聽來觸發一直進行繪製圓，上面用到了一個MyPointEvaluator這個估值器，那麼大家看一下我們這個估值器做了些什麼。

1. /**
2. * 我的估值器
3. * Created by liweidong on 2019/1/8.
4. */
6. public class MyPointEvaluator implements TypeEvaluator {
8. //複寫估值器，在估值器中寫動畫過渡邏輯
9. @Override
10. public Object evaluate(float fraction, Object startValue, Object endValue) {
11. //將動畫開始值跟結束值轉換為point物件
12. Point startPoint = (Point) startValue;
13. Point endPoint = (Point) endValue;
14. //根據fraction計算當前動畫的x跟y
15. float x = (float) (startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX()));
16. float y = (float) (startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY()));
17. //將當前的動畫的座標賦值到一個新的point物件
18. Point currentPoint = new Point(x, y);
19. return currentPoint;
20. }
21. }

這下我們在xml中引用自己的自定義view，就ok了，那麼我們自定義的估值器就完成了，大家可以根據程式碼註釋慢慢體會。

ObjectAnimator

下面我們來介紹objectAnimator：

objectAnimator：通過不斷改變值，自動進行賦值給物件。注意這裡是自動哦，可以理解為ValueAnimator的升級版，自動化，不用進行手動進行賦值了。

先講一下單個動畫：

1.translate（平移）

1. float currentX = mButtonTranslate.getTranslationX();
2. ObjectAnimator translateAnimator = ObjectAnimator.ofFloat(mButtonTranslate, "translationX", currentX, 50, currentX);
3. translateAnimator.setDuration(2000);
4. translateAnimator.setRepeatCount(0);
5. translateAnimator.setRepeatMode(ValueAnimator.RESTART);
6. translateAnimator.start();

2.rotate（旋轉）

1. ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(mButtonRotate, "rotation", 0f, 360f);
2. rotateAnimator.setDuration(2000);
3. rotateAnimator.setRepeatCount(0);
4. rotateAnimator.setRepeatMode(ValueAnimator.RESTART);
5. rotateAnimator.start();

3.scale(縮放)

1. ObjectAnimator scaleAnimator = ObjectAnimator.ofFloat(mButtonScale, "scaleX", 1f, 3f, 1f);
2. scaleAnimator.setDuration(2000);
3. scaleAnimator.setRepeatCount(0);
4. scaleAnimator.setRepeatMode(ValueAnimator.RESTART);
5. scaleAnimator.start();

4.alpha(透明度)

1. ObjectAnimator aphaAnimator = ObjectAnimator.ofFloat(mButtonApha, "alpha" ,0 , 1);
2. aphaAnimator.setDuration(2000);
3. aphaAnimator.setRepeatCount(0);
4. aphaAnimator.setRepeatMode(ValueAnimator.RESTART);
5. aphaAnimator.start();

上面只是單個的簡單動畫，一般我們用動2020-08-03畫都是組合動畫。

下面提供幾個api供大家進行動畫組合：

AnimatorSet.play(Animator anim)   ：播放當前動畫
AnimatorSet.after(long delay)   ：將現有動畫延遲x毫秒後執行
AnimatorSet.with(Animator anim)   ：將現有動畫和傳入的動畫同時執行
AnimatorSet.after(Animator anim)   ：將現有動畫插入到傳入的動畫之後執行
AnimatorSet.before(Animator anim) ：  將現有動畫插入到傳入的動畫之前執行

1. ObjectAnimator translateAnimator = ObjectAnimator.ofFloat(mButtonTranRotate, "translationX", mButtonTranRotate.getTranslationX()
2. , 500, mButtonTranRotate.getTranslationX());
3. ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(mButtonTranRotate, "rotation", 0 , 360);
4. ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(mButtonTranRotate, "alpha", 1f,0f, 1f);
5. AnimatorSet animatorSet = new AnimatorSet();
6. animatorSet.play(translateAnimator).with(rotateAnimator).before(alphaAnimator);
7. animatorSet.setDuration(3000);
8. animatorSet.start();

給大家貼一段組合動畫的程式碼，是不是很簡單。

animatorSet.reverse(); 這個用來恢復動畫到先前狀態。到此屬性動畫大致講完了，歡迎大家來補充。下節重點說一下自定義估值器，TypeEvaluate！


轉載自 https://blog.csdn.net/no_loafer/article/details/86156590