屬性動畫

2019-11-09 16:17:09

字體：大中小

來源：轉載

供稿：網友

//屬性動畫public final class ObjectAnimator extends ValueAnimator {...}public class ValueAnimator extends Animator {...}public final class AnimatorSet extends Animator {...}//補間動畫public class AnimationSet extends Animation {...}public class TranslateAnimation extends Animation {...}public class AlphaAnimation extends Animation {...}public class RotateAnimation extends Animation {...}public class ScaleAnimation extends Animation {...}

3.0以前，android支持兩種動畫模式，tween animation,frame animation，在android3.0中又引入了一個新的動畫系統：PRoperty animation，這三種動畫模式在SDK中被稱為property animation,view animation,drawable animation。可通過NineOldAndroids項目在3.0之前的系統中使用Property Animation。

View Animation（Tween Animation）：補間動畫，給出兩個關鍵幀，通過一些算法將給定屬性值在給定的時間內在兩個關鍵幀間漸變。它只是改變了View對象繪制的位置，而沒有改變View對象本身的屬性。 1、xml中定義,放置在res/anim/目錄下

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:shareInterpolator="true" android:startOffset="500" >  <scale android:duration="2000" android:fromXScale="0.2" android:fromYScale="0.2" android:pivotX="50%" android:pivotY="50%" android:toXScale="1.5" android:toYScale="1.5" />  <rotate android:duration="1000" android:fromDegrees="0" android:repeatCount="1" android:repeatMode="reverse" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />  <translate android:duration="2000" android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="320" android:toYDelta="0" />  <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>

xml文件的引用：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_demo); animation.setRepeatCount(Animation.INFINITE);//循環顯示 imageView.startAnimation(animation); //啟動動畫

2、java代碼中使用，例如透明度：

// 設置開始和結束的透明度（0f-1f之間） AlphaAnimation aa = new AlphaAnimation(0.1f, 0.5f); // 設置動畫的持續時間 aa.setDuration(3000); // 設置重復播放次數 aa.setRepeatCount(2); // 設置重復播放模式：reverse：折返，restart：重新開始 aa.setRepeatMode(Animation.REVERSE); // 保持動畫結束時的狀態 aa.setFillAfter(true);//動畫結束后不動 // 啟動動畫 imgview.startAnimation(aa); // 動畫監聽事件 aa.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation animation) { // TODO Auto-generated method stub } });

Drawable Animation（Frame Animation）：幀動畫，就像GIF圖片，通過一系列Drawable依次顯示來模擬動畫的效果。 XML文件要放在/res/drawable/目錄下定義:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /></animation-list>

Java代碼中引用：

ImageView rocketImage = (ImageView)findViewById(R.id.rocket_image);rocketImage.setBackgroundResource(R.drawable.rocket_thrust);rocketAnimation = (AnimationDrawable) rocketImage.getBackground();rocketAnimation.start();

特別注意，AnimationDrawable的start()方法不能在Activity的onCreate方法中調運，因為AnimationDrawable還未完全附著到window上，所以最好的調運時機是onWindowFocusChanged()方法中。

Property Animation：屬性動畫，這個是在Android 3.0中才引進的，以前學WPF時里面的動畫機制好像就是這個，它更改的是對象的實際屬性，在View Animation（Tween Animation）中，其改變的是View的繪制效果，真正的View的屬性保持不變，比如無論你在對話中如何縮放Button的大小，Button的有效點擊區域還是沒有應用動畫時的區域，其位置與大小都不變。而在Property Animation中，改變的是對象的實際屬性，如Button的縮放，Button的位置與大小屬性值都改變了。而且Property Animation不止可以應用于View，還可以應用于任何對象。Property Animation只是表示一個值在一段時間內的改變，當值改變時要做什么事情完全是你自己決定的。

ObjectAnimator 中ofFloat與ofObject方法差別：對象多了一個TypeEvaluator 參數

public static ObjectAnimator ofFloat(Object target, String propertyName, float... values) {...}//對象、屬性名、變化值public static ObjectAnimator ofObject(Object target, String propertyName,TypeEvaluator evaluator, Object... values) {...}//對象、屬性名、取值方法、變化值

ValueAnimator 中ofFloat與ofObject方法差別：對象多了一個TypeEvaluator 參數

//setTarget設置對象 setEvaluator設置取值方法 setInterpolator設置插值器public static ValueAnimator ofFloat(float... values) {...}//變化值public static ValueAnimator ofObject(TypeEvaluator evaluator, Object... values) {...}//取值方法、變化值

ValueAnimator

ValueAnimator只不過是對值進行了一個平滑的動畫過渡。而ObjectAnimator（ObjectAnimator extends ValueAnimator ）則就不同了，它是可以直接對任意對象的任意屬性進行動畫操作的，比如說View的alpha屬性。與ObjectAnimator不同的就是我們自己設置元素屬性的更新，通過addUpdateListener()方法來添加一個動畫的監聽器，在動畫執行的過程中會不斷地進行回調，提高靈活性。例如：計數

public void tvTimer(final View view) { ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);//int類型的數值[0-100] valueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { ((TextView) view).setText("$ " + (Integer) animation.getAnimatedValue());//int類型的數值[0-100] } }); valueAnimator.setDuration(3000); valueAnimator.start(); }

狹義而言，動畫一般就是指某個View組件的某個或者某些屬性值在一段時間內不斷變化的過程，這個變化過程往往有個起始值、結束值和一系列的中間值，ValueAnimator就是用來反映這個屬性值變化過程的重要類。每一個ValueAnimator其實就是一個的TimeInterpolator和一個TypeEvaluator的結合體。TimeInterpolator用來控制在哪里取，而TypeEvaluator用來控制取多少。setInterpolator方法可以不調用，默認是加速減速插值器AccelerateDecelerateInterpolator ，但是如果調用且傳入的參數為null的話，那么就會被設置成線性插值器LinearInterpolator (暫時不清楚為什么要這樣做)。setEvaluator方法也可以不調用，默認會根據屬性值的類型設置一個IntEvaluator或者FloatEvaluator。 ValueAnimator是整個屬性動畫機制當中最核心的一個類，屬性動畫的運行機制是通過不斷地對值進行操作來實現的，而初始值和結束值之間的動畫過渡就是由ValueAnimator這個類來負責計算的。它的內部使用一種時間循環的機制來計算值與值之間的動畫過渡，我們只需要將初始值和結束值提供給ValueAnimator，并且告訴它動畫所需運行的時長，那么ValueAnimator就會自動幫我們完成從初始值平滑地過渡到結束值這樣的效果。除此之外，ValueAnimator還負責管理動畫的播放次數、播放模式、以及對動畫設置監聽器等，確實是一個非常重要的類。

插值器Interpolator

@HasNativeInterpolatorpublic class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {//先加速后減速插值器 public AccelerateDecelerateInterpolator() { } @SuppressWarnings({"UnusedDeclaration"}) public AccelerateDecelerateInterpolator(Context context, AttributeSet attrs) { } public float getInterpolation(float input) { return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;//input即為時間因子，已持續時間/總持續時間的比值 //input 值【0-1】余弦函數【π-2π】值【-1,0】總結果【0,1】//返回值為求值器Evaluator的插值因子fraction } /** @hide */ @Override public long createNativeInterpolator() { return NativeInterpolatorFactoryHelper.createAccelerateDecelerateInterpolator(); }}public interface Interpolator extends TimeInterpolator {//空接口}public interface TimeInterpolator {//時間插值器：屬性變化率，加速度 float getInterpolation(float input);}

求值器Evaluator

public class FloatEvaluator implements TypeEvaluator<Number> {//參數分別為插值器的getInterpolation返回值：插值因子，開始值與結束值。 public Float evaluate(float fraction, Number startValue, Number endValue) { float startFloat = startValue.floatValue();//將number轉化成float類型 return startFloat + fraction * (endValue.floatValue() - startFloat); }}public interface TypeEvaluator<T> { public T evaluate(float fraction, T startValue, T endValue);}

ValueAnimator根據動畫已進行的時間跟動畫總時間（duration）的比計算出一個時間因子（0~1），然后根據TimeInterpolator計算出另一個因子：插值因子fraction，最后TypeAnimator通過這個因子計算出屬性值，即返回值。

比如：動畫持續40ms，在進行到10ms時：首先計算出時間因子，即經過的時間百分比：t=10ms/40ms=0.25。經插值計算(inteplator)后的插值因子:大約為0.15，比如用了AccelerateDecelerateInterpolator，計算公式為（input即為時間因子）： (Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f; 最后根據TypeEvaluator計算出在10ms時的屬性值,比如TypeEvaluator為FloatEvaluator：0.15*（40-0）=6pixel。

ValueAnimator包含Property Animation動畫的所有核心功能，如動畫時間，開始、結束屬性值，相應時間屬性值計算方法等。應用Property Animation有兩個步聚：

1、計算屬性值 2、根據屬性值執行相應的動作，如改變對象的某一屬性。

ValuAnimiator只完成了第一步工作，如果要完成第二步，需要實現ValueAnimator.onUpdateListener接口，這個接口只有一個函數onAnimationUpdate()，在這個函數中會傳入ValueAnimator對象做為參數，通過這個ValueAnimator對象的getAnimatedValue()函數可以得到當前的屬性值如：

ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);animation.setDuration(1000);animation.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { Log.i("update", ((Float) animation.getAnimatedValue()).toString()); }});animation.setInterpolator(new CycleInterpolator(3));animation.start();

ObjectAnimator

相比于ValueAnimator，ObjectAnimator可能才是我們最常接觸到的類，因為ValueAnimator只不過是對值進行了一個平滑的動畫過渡，但我們實際使用到這種功能的場景好像并不多。而ObjectAnimator則就不同了，它是可以直接對任意對象的任意屬性進行動畫操作的，比如說View的alpha屬性。 xml文件中使用：放置在res/animator/目錄下

引用XML動畫:

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file); animator.setTarget(view); animator.start();

上面組合動畫如果在Java代碼中寫,如下：

ObjectAnimator moveIn = ObjectAnimator.ofFloat(textview, "translationX", -500f, 0f); ObjectAnimator rotate = ObjectAnimator.ofFloat(textview, "rotation", 0f, 360f); ObjectAnimator fadeInOut = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f); AnimatorSet animSet = new AnimatorSet(); animSet.play(rotate).with(fadeInOut).after(moveIn); animSet.setDuration(5000); animSet.start();

組合動畫也可以使用PropertyValuesHolder類，但AnimatorSet:不僅能夠實現PropertyValuesHolder的效果，而且可以更精確的控制動畫的順序。

private void propertyValuesHolder() { PropertyValuesHolder pv1 = PropertyValuesHolder.ofFloat("translationY", 600f); PropertyValuesHolder pv2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0, 0.5f); PropertyValuesHolder pv3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0, 0.5f); ObjectAnimator.ofPropertyValuesHolder(mImage, pv1, pv2, pv3).setDuration(1000).start(); } ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX", 1.0f, 2f); ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY", 1.0f, 2f); ObjectAnimator anim3 = ObjectAnimator.ofFloat(mBlueBall, "x", cx , 0f); ObjectAnimator anim4 = ObjectAnimator.ofFloat(mBlueBall, "x", cx); /** * anim1，anim2,anim3同時執行 * anim4接著執行 */ AnimatorSet animSet = new AnimatorSet(); //animSet.playTogether(anim1, anim2);//兩個動畫同時執行 animSet.play(anim1).with(anim2); animSet.play(anim2).with(anim3); animSet.play(anim4).after(anim3); animSet.setDuration(1000); animSet.start();

1、要使用ObjectAnimator來構造動畫，要操作的對象中，必須存在對應的屬性的set、get方法（定義對象時時要寫set、get方法） 2、setter 方法的命名必須以駱駝拼寫法命名，即set后每個單詞首字母大寫，其余字母小寫，即類似于setPropertyName所對應的屬性為propertyName 。常用屬性：backgroundColor（背景色），translationX，scaleX，rotationX（沿x軸旋轉，區別于rotation是z軸旋轉，即垂直xy軸），alpha等等。 3、監聽

anim.addListener(new AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } });

如果想選擇性的實現，可以使用以下監聽AnimatorListenerAdapter

anim.addListener(new AnimatorListenerAdapter() { });

4、實現組合動畫功能主要需要借助AnimatorSet這個類，這個類提供了一個play()方法，如果我們向這個方法中傳入一個Animator對象(ValueAnimator或ObjectAnimator)將會返回一個AnimatorSet.Builder的實例，AnimatorSet.Builder中包括以下四個方法：

after(Animator anim) //將現有動畫插入到傳入的動畫之后執行after(long delay) //將現有動畫延遲指定毫秒后執行before(Animator anim) //將現有動畫插入到傳入的動畫之前執行with(Animator anim) //將現有動畫和傳入的動畫同時執行

5、執行順序：

1、playSequentially依次執行,playTogether同時執行。2、animatorSet.play(anim1).before(anim2)animatorSet.play(anim2).after(anim1)是完全等價的

ViewPropertyAnimator的用法

在Android 3.1系統當中補充了ViewPropertyAnimator（即在SDK11的時候，給View添加了animate方法，這個方法的返回值是一個ViewPropertyAnimator對象，也就是說拿到這個對象之后我們就可以調用它的各種方法來實現動畫效果了），更加方便的實現動畫效果。

textview.animate().x(500).y(500).setDuration(5000) .setInterpolator(new BounceInterpolator());

自定義Interpolator：在哪里取值，何時取值

屬性動畫默認的Interpolator是先加速后減速（余弦函數）的一種方式，系統也提供了一些，當然也可以自定義：新建一個類，讓它實現TimeInterpolator接口，重寫getInterpolation方法（計算何時取值）。

public class DecelerateAccelerateInterpolator implements TimeInterpolator{ //先減速后加速，正弦函數 @Override public float getInterpolation(float input) { //input[0,1] float result; if (input <= 0.5) { result = (float) (Math.sin(Math.PI * input)) / 2; } else { result = (float) (2 - Math.sin(Math.PI * input)) / 2; } return result; } }

自定義TypeEvaluator：取值多少,取值方法

ofInt、ofFloat、ofObject最后一組參數的類型分別為int、float、Object。 創建一個類，實現TypeEvaluator接口，重寫evaluate方法。

public class PointEvaluator implements TypeEvaluator{ @Override public Object evaluate(float fraction, Object startValue, Object endValue) { Point startPoint = (Point) startValue; Point endPoint = (Point) endValue; float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX()); float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY()); Point point = new Point(x, y); return point; } }

將Point1通過動畫平滑過度到Point2，就可以這樣寫：

Point point1 = new Point(0, 0); Point point2 = new Point(300, 300); ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), point1, point2); anim.setDuration(5000); anim.start();

參考 Android動畫學習筆記-Android Animation

郭霖 Android屬性動畫完全解析(下)，Interpolator和ViewPropertyAnimator的用法 Android屬性動畫完全解析(中)，ValueAnimator和ObjectAnimator的高級用法 Android屬性動畫完全解析(上)，初識屬性動畫的基本用法

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator 和 TimeInterpolator 之間的恩恩怨怨

android Animation 效果控制（一）

鴻洋： Android 屬性動畫（Property Animation）完全解析（上） Android 屬性動畫（Property Animation）完全解析（下）

Android 群英傳 Android藝術探索

上一篇：ChartView

下一篇：微信小程序的新建頁面 —— 微信小程序教程系列（4）