Android-屬性動畫原理總結

Android屬性動畫允許開發者隨着時間的流逝改變對象的屬性。

我們用一個小案例看下它是如何工作的。

下面是官方文檔提供的一張原理圖：

從圖中可以看到ValueAnimator類封裝了：

一個TimeInerpolator,

一個TypeEvaluator,

動畫執行的時間duration，

屬性的起始值startPropertyValue，屬性終止值endPropertyValue。

當我們使用屬性動畫就需要提供這些信息，可以是系統提供的，我們也可以自己實現，那么當一個ValueAnimator設置了這些屬性，它門是如何協同工作的呢？

（勿噴。。。）

首先系統根據已經流失的時間和持續時間計算出一個elapsed fraction，將它傳遞給時間插值器的getInterpolation(float input)方法，該方法對輸入值進行映射到0-1之間的interpolated fraction，接着該值被傳遞給Evaluator的evaluate(float fraction, Point start, Point end)方法，又該方法返回本次計算的屬性值，可以在AnimatorUpdateListener的onAnimationUpdate(ValueAnimator anition)方法的參數animation的getAnimatedValue()方法獲得最新的屬性，然后重新給對象設置該屬性，完成對對象屬性的修改。

下面舉個栗子：該例子演示了一個紅色的小球勻速運動的例子。

MainActivity.java

public class MainActivity extends Activity {


    private  ImageView ivBall;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ball);

        ivBall = (ImageView) findViewById(R.id.ivBall);
    }

    /**
     *  對應Button的點擊事件
     * @param view
     */
    public void run(View view)
    {
        //設置自定義的TypeEvaluator，起始屬性，終止屬性
        ValueAnimator valueAnimator = ValueAnimator.ofObject(new MyTypeEvaluator(), new Point(0, 0), new Point(0, 0));
        //設置持續時間
        valueAnimator.setDuration(2000);
        //設置加速時間插值器
        valueAnimator.setInterpolator(new MyInperpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {    //設置監聽器
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //將最新計算出的屬性值設置給ImageView
                Point point = (Point) animation.getAnimatedValue();
                ivBall.setX(point.x);
                ivBall.setY(point.y);
            }
        });

        //開啟動畫
        valueAnimator.start();
    }

    /**
     * 自定義時間插值器，這里實現了線性時間插值器
     */
    class MyInperpolator implements TimeInterpolator
    {

        @Override
        public float getInterpolation(float input) {
            return input;
        }
    }

    /**
     * 實現的自己的TypeEvaluator
     */
    class MyTypeEvaluator implements TypeEvaluator<Point> {

        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {
            Point point = new Point();
            point.x = startValue.x + fraction * 500;
            point.y = startValue.y + fraction * 500;

            return point;
        }
    }


    /**
     * 保存坐標信息
     */
    class Point
    {
        float x;
        float y;
        public Point()
        {}

        public Point(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }

}

布局文件：

ball.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ivBall"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/blue_ball"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button
            android:id="@+id/btnVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="run"
            android:onClick="run"/>

    </LinearLayout>


</RelativeLayout>

小球的背景：

blue_ball.xml:

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


    <solid android:color="#0000ff"></solid>
    <size
        android:width="40dp"
        android:height="40dp"></size>
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />

</shape>

　　

最終的效果是：

 

 

通過這個例子再結合官方文檔http://developer.android.com/guide/topics/graphics/prop-animation.html#interpolators應該不難理解屬性動畫了。