Android 屬性動畫（Property Animation） 全然解析 （上）

標籤：save   horizon   rem   near   nload   lin   float   view   xtend   

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38067475

1、概述

Android提供了幾種動畫類型：View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單，只是僅僅能支援簡單的縮放、平移、旋轉、透明度主要的動畫。且有一定的局限性。

比方：你希望View有一個顏色的切換動畫。你希望能夠使用3D旋轉動畫；你希望當動畫停止時。View的位置就是當前的位置；這些View Animation都無法做到。

這就是Property Animation產生的原因。本篇部落格具體介紹Property Animation的使用方法。

至於Drawable Animation。嗯，略~

2、相關API

Property Animation故名思議就是通過動畫的方式改變對象的屬性了，我們首先須要瞭解幾個屬性：

Duration動畫的期間，預設300ms。

Time interpolation：時間差值，乍一看不知道是什麼。可是我說LinearInterpolator、AccelerateDecelerateInterpolator，大家一定知道是幹嘛的了，定義動畫的變動率。

Repeat count and behavior：反覆次數、以及反覆模式；能夠定義反覆多少次；反覆時從頭開始。還是反向。

Animator sets: 動畫集合，你能夠定義一組動畫。一起運行或者順序運行。

Frame refresh delay：幀重新整理延遲，對於你的動畫，多久重新整理一次幀；默覺得10ms，但終於依賴系統的目前狀態。基本不用管。

相關的類

ObjectAnimator  動畫的運行類。後面具體介紹

ValueAnimator 動畫的運行類。後面具體介紹 

AnimatorSet 用於控制一組動畫的運行：線性，一起，每一個動畫的先後運行等。

AnimatorInflater 使用者載入屬性動畫的xml檔案

TypeEvaluator  類型估值。主要用於設定動畫操作屬性的值。

TimeInterpolator 時間插值，上面已經介紹。

總的來說。屬性動畫就是。動畫的運行類來設定動畫操作的對象的屬性、期間，開始和結束的屬性值，時間差值等，然後系統會依據設定的參數動態變化對象的屬性。

3、ObjectAnimator實現動畫

之所以選擇ObjectAnimator為第一個~~是由於。這個實現最簡單~~一行代碼，秒秒鐘實現動畫。以下看個範例：
布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/id_container" >    <ImageView        android:id="@+id/id_ball"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:src="@drawable/mv"         android:scaleType="centerCrop"        android:onClick="rotateyAnimRun"        /></RelativeLayout>

非常easy，就一張妹子圖片~
Activity代碼：

package com.example.zhy_property_animation;import android.animation.ObjectAnimator;import android.app.Activity;import android.os.Bundle;import android.view.View;public class ObjectAnimActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.xml_for_anim);}public void rotateyAnimRun(View view){ ObjectAnimator// .ofFloat(view, "rotationX", 0.0F, 360.0F)// .setDuration(500)// .start();}}

效果：

是不是一行代碼就能實現簡單的動畫~~

對於ObjectAnimator

1、提供了ofInt、ofFloat、ofObject。這幾個方法都是設定動畫作用的元素、作用的屬性、動畫開始、結束、以及中間的隨意個屬性值。

當對於屬性值，僅僅設定一個的時候，會覺得當然對象該屬性的值為開始（getPropName反射擷取）。然後設定的值為終點。假設設定兩個，則一個為開始、一個為結束~~~

動畫更新的過程中，會不斷調用setPropName更新元素的屬性，全部使用ObjectAnimator更新某個屬性，必須得有getter（設定一個屬性值的時候）和setter方法~

2、假設你操作對象的該屬性方法裡面。比方上例的setRotationX假設內部沒有調用view的重繪。則你須要自己依照以下方式手動調用。

anim.addUpdateListener(new AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator animation){//view.postInvalidate();//view.invalidate();}});

3、看了上面的範例，由於設定的操作的屬性僅僅有一個。那麼假設我希望一個動畫能夠讓View既能夠縮小、又能夠淡出（3個屬性scaleX,scaleY,alpha）。僅僅使用ObjectAnimator咋弄？

想法是不是非常不錯，可能會說使用AnimatorSet啊。這一看就是一堆動畫塞一起運行，可是我偏偏要用一個ObjectAnimator執行個體實現呢~以下看代碼：

public void rotateyAnimRun(final View view){ObjectAnimator anim = ObjectAnimator//.ofFloat(view, "zhy", 1.0F,  0.0F)//.setDuration(500);//anim.start();anim.addUpdateListener(new AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator animation){float cVal = (Float) animation.getAnimatedValue();view.setAlpha(cVal);view.setScaleX(cVal);view.setScaleY(cVal);}});}

把設定屬性的那個字串。隨便寫一個該對象沒有的屬性，就是無論~~咱們僅僅須要它依照時間插值和期間計算的那個值，我們自己手動調用~

效果：

這個範例就是想說明一下，有時候換個思路不要被API所約束，利用部分API提供的功能也能實現好玩的效果~~~

比方：你想實現拋物線的效果，水平方向100px/s，垂直方向加速度200px/s*s ，咋實現呢~~能夠自己用ObjectAnimator試試~

4、事實上還有更簡單的方式，實現一個動畫更改多個效果：使用propertyValuesHolder

public void propertyValuesHolder(View view){PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,0f, 1f);PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f,0, 1f);PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f,0, 1f);ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY,pvhZ).setDuration(1000).start();}

 4、ValueAnimator實現動畫

和ObjectAnimator使用方法非常相似，簡單看一下用view垂直移動的動畫代碼：

public void verticalRun(View view){ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight- mBlueBall.getHeight());animator.setTarget(mBlueBall);animator.setDuration(1000).start();}

給你的感覺是不是。坑爹啊。這和ValueAnimator有毛線差別~可是細緻看，你看會發現。沒有設定作業的屬性~~也就是說，上述代碼是沒有不論什麼效果的，沒有指定屬性~

這就是和ValueAnimator的差別之處：ValueAnimator並沒有在屬性上做操作，你可能會問這樣有啥優點？我豈不是還得手動設定？

優點：不須要操作的對象的屬性一定要有getter和setter方法，你能夠自己依據當前動畫的計算值，來操作不論什麼屬性。記得上例的那個【我希望一個動畫能夠讓View既能夠縮小、又能夠淡出（3個屬性scaleX,scaleY,alpha）】嗎？事實上就是這麼個使用方法~

執行個體：

布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:id="@+id/id_container"      >    <ImageView        android:id="@+id/id_ball"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/bol_blue" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:orientation="horizontal" >        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="verticalRun"            android:text="垂直" />        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="paowuxian"            android:text="拋物線" />    </LinearLayout></RelativeLayout>

左上方一個小球，底部兩個button~我們先看一個自由落體的代碼：

/** * 自由落體 * @param view */public void verticalRun( View view){ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight- mBlueBall.getHeight());animator.setTarget(mBlueBall);animator.setDuration(1000).start();//animator.setInterpolator(value)animator.addUpdateListener(new AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator animation){mBlueBall.setTranslationY((Float) animation.getAnimatedValue());}});}

與ObjectAnimator不同的就是我們自己設定元素屬性的更新~儘管多了幾行代碼。可是貌似提高靈活性~

以下再來一個範例。假設我希望小球拋物線運動【實現拋物線的效果，水平方向100px/s，垂直方向加速度200px/s*s 】，分析一下，貌似僅僅和時間有關係。可是依據時間的變化。橫向和縱向的移動速率是不同的。我們該咋實現呢？此時就要重寫TypeValue的時候了，由於我們在時間變化的同一時候。須要返回給對象兩個值，x當前位置，y當前位置：

代碼：

/** * 拋物線 * @param view */public void paowuxian(View view){ValueAnimator valueAnimator = new ValueAnimator();valueAnimator.setDuration(3000);valueAnimator.setObjectValues(new PointF(0, 0));valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.setEvaluator(new TypeEvaluator<PointF>(){// fraction = t / duration@Overridepublic PointF evaluate(float fraction, PointF startValue,PointF endValue){Log.e(TAG, fraction * 3 + "");// x方向200px/s ，則y方向0.5 * 10 * tPointF point = new PointF();point.x = 200 * fraction * 3;point.y = 0.5f * 200 * (fraction * 3) * (fraction * 3);return point;}});valueAnimator.start();valueAnimator.addUpdateListener(new AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator animation){PointF point = (PointF) animation.getAnimatedValue();mBlueBall.setX(point.x);mBlueBall.setY(point.y);}});}

能夠看到，由於ofInt,ofFloat等無法使用，我們自己定義了一個TypeValue，每次依據目前時間返回一個PointF對象，（PointF和Point的差別就是x,y的單位一個是float,一個是int;RectF,Rect也是）PointF中包括了x,y的當前位置～然後我們在監聽器中擷取，動態設定屬性：

：

有木有兩個鐵球同一時候落地的感覺~~對。我應該搞兩個球~~ps:物理公式要是錯了，就當沒看見哈

自己定義TypeEvaluator傳入的泛型能夠依據自己的需求，自己設計個Bean。

好了，我們已經分別解說了ValueAnimator和ObjectAnimator實現動畫。二者差別；怎樣利用部分API。自己更新屬性實現效果；自己定義TypeEvaluator實現我們的需求；可是我們並沒有講怎樣設計插值，事實上我覺得把，這個插值預設的那一串實作類別夠用了~~非常少，會自己去設計個超級變態的~嗯~所以：略。

5、監聽動畫的事件

對於動畫，一般都是一些輔助效果，比方我要刪除個元素，我可能希望是個淡出的效果，可是終於還是要刪掉，並非你透明度沒有了，還佔著位置。所以我們須要知道動畫怎樣結束。

所以我們能夠加入一個動畫的監聽:

public void fadeOut(View view){ObjectAnimator anim = ObjectAnimator.ofFloat(mBlueBall, "alpha", 0.5f);anim.addListener(new AnimatorListener(){@Overridepublic void onAnimationStart(Animator animation){Log.e(TAG, "onAnimationStart");}@Overridepublic void onAnimationRepeat(Animator animation){// TODO Auto-generated method stubLog.e(TAG, "onAnimationRepeat");}@Overridepublic void onAnimationEnd(Animator animation){Log.e(TAG, "onAnimationEnd");ViewGroup parent = (ViewGroup) mBlueBall.getParent();if (parent != null)parent.removeView(mBlueBall);}@Overridepublic void onAnimationCancel(Animator animation){// TODO Auto-generated method stubLog.e(TAG, "onAnimationCancel");}});anim.start();}

這樣就能夠監聽動畫的開始、結束、被取消、反覆等事件~可是有時候會覺得，我僅僅要知道結束即可了，這麼長的代碼我不能接收，那你能夠使用AnimatorListenerAdapter

anim.addListener(new AnimatorListenerAdapter(){@Overridepublic void onAnimationEnd(Animator animation){Log.e(TAG, "onAnimationEnd");ViewGroup parent = (ViewGroup) mBlueBall.getParent();if (parent != null)parent.removeView(mBlueBall);}});

AnimatorListenerAdapter繼承了AnimatorListener介面，然後空實現了全部的方法~

：

animator還有cancel()和end()方法：cancel動畫馬上停止，停在當前的位置。end動畫直接到終於狀態。

6、AnimatorSet的使用

執行個體：

布局檔案:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:id="@+id/id_container"       >    <ImageView        android:id="@+id/id_ball"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:src="@drawable/bol_blue" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:orientation="horizontal" >        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="togetherRun"            android:text="簡單的多動畫Together" />        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="playWithAfter"            android:text="多動畫按次序運行" />            </LinearLayout></RelativeLayout>

繼續玩球~

代碼：

package com.example.zhy_property_animation;import android.animation.AnimatorSet;import android.animation.ObjectAnimator;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.animation.LinearInterpolator;import android.widget.ImageView;public class AnimatorSetActivity extends Activity{private ImageView mBlueBall;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.anim_set);mBlueBall = (ImageView) findViewById(R.id.id_ball);}public void togetherRun(View view){ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",1.0f, 2f);ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",1.0f, 2f);AnimatorSet animSet = new AnimatorSet();animSet.setDuration(2000);animSet.setInterpolator(new LinearInterpolator());//兩個動畫同一時候運行animSet.playTogether(anim1, anim2);animSet.start();}public void playWithAfter(View view){float cx = mBlueBall.getX();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.play(anim1).with(anim2);animSet.play(anim2).with(anim3);animSet.play(anim4).after(anim3);animSet.setDuration(1000);animSet.start();}}

寫了兩個效果：

第一：使用playTogether兩個動畫同一時候運行，當然還有playSequentially依次運行~~

第二：假設我們有一堆動畫，怎樣使用代碼控制順序，比方1，2同一時候；3在2後面。4在1之前等~就是效果2了

有一點注意：animSet.play().with();也是支援鏈式編程的。可是不要想著狂點。比方animSet.play(anim1).with(anim2).before(anim3).before(anim5); 這樣是不行的，系統不會依據你寫的這一長串來決定先後的順序。所以麻煩你依照上面範例的寫法，多寫幾行：

：

好了，由於篇幅~~關於屬性動畫還有點知識：

1、xml檔案建立屬性動畫

2、布局動畫

3、View的animate方法等。

那就考慮寫到下一篇了。只是核心的功能就這些了~~

對了，假設使用11以下的SDK 。請匯入nineoldandroids動畫庫。使用方法基本全然一致~

原始碼點擊下載

Android 屬性動畫（Property Animation） 全然解析 （上）