詳解Android動畫之Tween Animation

時間 2019-11-10

標籤詳解 android 動畫 tween animation 欄目 Android 简体版

原文原文鏈接

前面講了動畫中的Frame動畫，今天就來詳細講解一下Tween動畫的使用。java

一樣，在開始實例演示以前，先引用官方文檔中的一段話：android

Tween動畫是操做某個控件讓其展示出旋轉、漸變、移動、縮放的這麼一種轉換過程，咱們成爲補間動畫。咱們能夠以XML形式定義動畫，也能夠編碼實現。app

若是以XML形式定義一個動畫，咱們按照動畫的定義語法完成XML，並放置於/res/anim目錄下，文件名能夠做爲資源ID被引用；若是由編碼實現，咱們須要使用到Animation對象。ide

若是用定義XML方式實現動畫，咱們須要熟悉一下動畫XML語法：函數

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@[package:]anim/interpolator_resource"  
        android:shareInterpolator=["true" | "false"] >  
        <alpha  
            android:fromAlpha="float"  
            android:toAlpha="float" />  
        <scale  
            android:fromXScale="float"  
            android:toXScale="float"  
            android:fromYScale="float"  
            android:toYScale="float"  
            android:pivotX="float"  
            android:pivotY="float" />  
        <translate  
            android:fromX="float"  
            android:toX="float"  
            android:fromY="float"  
            android:toY="float" />  
        <rotate  
            android:fromDegrees="float"  
            android:toDegrees="float"  
            android:pivotX="float"  
            android:pivotY="float" />  
        <set>  
            ...  
        </set>  
    </set>

XML文件中必須有一個根元素，能夠是<alpha>、<scale>、<translate>、<rotate>中的任意一個，也能夠是<set>來管理一個由前面幾個元素組成的動畫集合。佈局

<set>是一個動畫容器，管理多個動畫的羣組，與之相對應的Java對象是AnimationSet。它有兩個屬性，android:interpolator表明一個插值器資源，能夠引用系統自帶插值器資源，也能夠用自定義插值器資源，默認值是勻速插值器；稍後我會對插值器作出詳細講解。android:shareInterpolator表明<set>裏面的多個動畫是否要共享插值器，默認值爲 true，即共享插值器，若是設置爲false，那麼<set>的插值器就再也不起做用，咱們要在每一個動畫中加入插值器。動畫

<alpha>是漸變更畫，能夠實現fadeIn和fadeOut的效果，與之對應的Java對象是AlphaAnimation。 android:fromAlpha屬性表明起始alpha值，浮點值，範圍在0.0和1.0之間，分別表明透明和徹底不透明，android:toAlpha屬性表明結尾alpha值，浮點值，範圍也在0.0和1.0之間。this

<scale>是縮放動畫，能夠實現動態調控件尺寸的效果，與之對應的Java對象是ScaleAnimation。 android:fromXScale屬性表明起始的X方向上相對自身的縮放比例，浮點值，好比1.0表明自身無變化，0.5表明起始時縮小一倍，2.0 表明放大一倍；android:toXScale屬性表明結尾的X方向上相對自身的縮放比例，浮點值；android:fromYScale屬性表明起始的Y方向上相對自身的縮放比例，浮點值；android:toYScale屬性表明結尾的Y方向上相對自身的縮放比例，浮點值；android:pivotX屬性表明縮放的中軸點X座標，浮點值，android:pivotY屬性表明縮放的中軸點Y座標，浮點值，對於這兩個屬性，若是咱們想表示中軸點爲圖像的中心，咱們能夠把兩個屬性值定義成0.5或者50%。編碼

<translate>是位移動畫，表明一個水平、垂直的位移。與之對應的Java對象是TranslateAnimation。 android:fromXDelta屬性表明起始X方向的位置，android:toXDelta表明結尾X方向上的位置，android:fromYScale屬性表明起始Y方向上的位置，android:toYDelta屬性表明結尾Y方向上的位置，以上四個屬性都支持三種表示方式：浮點數、num%、num%p；若是以浮點數字表示，表明相對自身原始位置的像素值；若是以num%表示，表明相對於本身的百分比，好比 toXDelta定義爲100%就表示在X方向上移動本身的1倍距離；若是以num%p表示，表明相對於父類組件的百分比。spa

<rotate>是旋轉動畫，與之對應的Java對象是RotateAnimation。android:fromDegrees屬性表明起始角度，浮點值，單位：度；android:toDegrees屬性表明結尾角度，浮點值，單位：度；android:pivotX屬性表明旋轉中心的X座標值，android:pivotY屬性表明旋轉中心的Y座標值，這兩個屬性也有三種表示方式，數字方式表明相對於自身左邊緣的像素值，num% 方式表明相對於自身左邊緣或頂邊緣的百分比，num%p方式表明相對於父容器的左邊緣或頂邊緣的百分比。

另外，在動畫中，若是咱們添加了android:fillAfter="true"後，這個動畫執行完以後保持最後的狀態；android:duration="integer"表明動畫持續的時間，單位爲毫秒。

若是要把定義在XML中的動畫應用在一個ImageView上，代碼是這樣的：

    ImageView image = (ImageView) findViewById(R.id.image);  
    Animation testAnim = AnimationUtils.loadAnimation(this, R.anim.test);  
    image.startAnimation(testAnim);

下面重點介紹一下插值器的概念：

首先要了解爲何須要插值器，由於在補間動畫中，咱們通常只定義關鍵幀（首幀或尾幀），而後由系統自動生成中間幀，生成中間幀的這個過程能夠成爲「插值」。插值器定義了動畫變化的速率，提供不一樣的函數定義變化值相對於時間的變化規則，能夠定義各類各樣的非線性變化函數，好比加速、減速等。下面是幾種常見的插值器：

Interpolator對象	資源ID	功能做用
AccelerateDecelerateInterpolator	@android :anim/accelerate_decelerate_interpolator	先加速再減速
AccelerateInterpolator	@android :anim/accelerate_interpolator	加速
AnticipateInterpolator	@android :anim/anticipate_interpolator	先回退一小步而後加速前進
AnticipateOvershootInterpolator	@android :anim/anticipate_overshoot_interpolator	在上一個基礎上超出終點一小步再回到終點
BounceInterpolator	@android :anim/bounce_interpolator	最後階段彈球效果
CycleInterpolator	@android :anim/cycle_interpolator	週期運動
DecelerateInterpolator	@android :anim/decelerate_interpolator	減速
LinearInterpolator	@android :anim/linear_interpolator	勻速
OvershootInterpolator	@android :anim/overshoot_interpolator	快速到達終點並超出一小步最後回到終點

而後咱們能夠這樣使用一個插值器：

    <set android:interpolator="@android :anim/accelerate_interpolator">  
    ...  
    </set> <alpha android:interpolator="@android :anim/accelerate_interpolator"    .../>

若是隻簡單地引用這些插值器還不能知足須要的話，咱們要考慮一下個性化插值器。咱們能夠建立一個插值器資源修改插值器的屬性，好比修改 AnticipateInterpolator的加速速率，調整CycleInterpolator的循環次數等。爲了完成這種需求，咱們須要建立XML 資源文件，而後將其放於/res/anim下，而後再動畫元素中引用便可。咱們先來看一下幾種常見的插值器可調整的屬性：

<accelerateDecelerateInterpolator> 無

<accelerateInterpolator> android:factor 浮點值，加速速率，默認爲1

<anticipateInterploator> android:tension 浮點值，起始點後退的張力、拉力數，默認爲2

<anticipateOvershootInterpolator> android:tension 同上 android:extraTension 浮點值，拉力的倍數，默認爲1.5（2 * 1.5）

<bounceInterpolator> 無

<cycleInterplolator> android:cycles 整數值，循環的個數，默認爲1

<decelerateInterpolator> android:factor 浮點值，減速的速率，默認爲1

<linearInterpolator> 無

<overshootInterpolator> 浮點值，超出終點後的張力、拉力，默認爲2

下面咱們就拿最後一個插值器來舉例：

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

上面的代碼中，咱們把張力改成7.0，而後將此文件命名爲my_overshoot_interpolator.xml，放置於/res/anim下，咱們就能夠引用到自定義的插值器了：

    <scale xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@anim/my_overshoot_interpolator"  
        .../>

若是以上這些簡單的定義還不能知足咱們的需求，那麼咱們就須要考慮一下本身定義插值器類了。

咱們能夠實現Interpolator接口，由於上面全部的Interpolator都實現了Interpolator接口，這個接口定義了一個方法：float getInterpolation(float input);

此方法由系統調用，input表明動畫的時間，在0和1之間，也就是開始和結束之間。

線性（勻速）插值器定義以下：

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

加速減速插值器定義以下：

    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
    }

有興趣的話，你們能夠嘗試一下自定義一個插值器。

講了這麼久的概念，下面咱們就結合實例來演示一下幾種Tween動畫的應用。

先來介紹一下旋轉動畫的使用，佈局文件/res/layout/rotate.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:orientation="vertical"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent"  
      android:background="#FFFFFF">  
      <ImageView  
            android:id="@+id/piechart"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_horizontal"  
            android:src="@drawable/piechart"/>  
      <Button  
            android:id="@+id/positive"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:text="順時針"  
            android:onClick="positive"/>  
      <Button  
            android:id="@+id/negative"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:text="逆時針"  
            android:onClick="negative"/>       
    </LinearLayout>

咱們定義了一個ImageView，用於顯示一個餅狀圖，演示旋轉動畫，而後定義了兩個按鈕，用以運行編碼實現的動畫。動畫定義文件/res/anim/rotate.xml以下：

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

最後再來看一下RotateActivity.java代碼：

    package com.scott.anim;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.view.animation.Animation;  
    import android.view.animation.AnimationUtils;  
    import android.view.animation.LinearInterpolator;  
    import android.view.animation.RotateAnimation;  
      
    public class RotateActivity extends Activity {  
      
        private int currAngle;  
        private View piechart;  
      
        @Override  
        public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.rotate);  
      
            piechart = findViewById(R.id.piechart);  
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);  
            piechart.startAnimation(animation);  
        }  
          
        public void positive(View v) {  
            Animation anim = new RotateAnimation(currAngle, currAngle + 180, Animation.RELATIVE_TO_SELF, 0.5f,  
                    Animation.RELATIVE_TO_SELF, 0.5f);  
            /** 勻速插值器 */  
            LinearInterpolator lir = new LinearInterpolator();  
            anim.setInterpolator(lir);  
            anim.setDuration(1000);  
            /** 動畫完成後不恢復原狀 */  
            anim.setFillAfter(true);  
            currAngle += 180;  
            if (currAngle > 360) {  
                currAngle = currAngle - 360;  
            }  
            piechart.startAnimation(anim);  
        }  
          
        public void negative(View v) {  
            Animation anim = new RotateAnimation(currAngle, currAngle - 180, Animation.RELATIVE_TO_SELF, 0.5f,  
                    Animation.RELATIVE_TO_SELF, 0.5f);  
            /** 勻速插值器 */  
            LinearInterpolator lir = new LinearInterpolator();  
            anim.setInterpolator(lir);  
            anim.setDuration(1000);  
            /** 動畫完成後不恢復原狀 */  
            anim.setFillAfter(true);  
            currAngle -= 180;  
            if (currAngle < -360) {  
                currAngle = currAngle + 360;  
            }  
            piechart.startAnimation(anim);  
        }  
    }

而後，看一下漸變更畫，佈局文件/res/layout/alpha.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <FrameLayout  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent"  
      android:background="#FFFFFF">  
      <ImageView  
          android:id="@+id/splash"  
          android:layout_width="fill_parent"  
          android:layout_height="fill_parent"  
          android:layout_gravity="center"  
          android:src="@drawable/splash"/>  
      <Button  
          android:layout_width="fill_parent"  
          android:layout_height="wrap_content"  
          android:layout_gravity="bottom"  
          android:text="alpha"  
          android:onClick="alpha"/>    
    </FrameLayout>

動畫定義文件/res/anim/alpha.xml以下：

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

AlphaActivity.java代碼以下：

    package com.scott.anim;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.util.Log;  
    import android.view.View;  
    import android.view.animation.AlphaAnimation;  
    import android.view.animation.Animation;  
    import android.view.animation.Animation.AnimationListener;  
    import android.view.animation.AnimationUtils;  
    import android.widget.ImageView;  
      
    public class AlphaActivity extends Activity implements AnimationListener {  
          
        private ImageView splash;  
          
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.alpha);  
              
            splash = (ImageView) findViewById(R.id.splash);  
            Animation anim = AnimationUtils.loadAnimation(this, R.anim.alpha);  
            anim.setAnimationListener(this);  
            splash.startAnimation(anim);  
        }  
          
        public void alpha(View view) {  
            Animation anim = new AlphaAnimation(1.0f, 0.0f);  
            anim.setDuration(3000);  
            anim.setFillAfter(true);  
            splash.startAnimation(anim);  
        }  
      
        @Override  
        public void onAnimationStart(Animation animation) {  
            Log.i("alpha", "onAnimationStart called.");  
        }  
      
        @Override  
        public void onAnimationEnd(Animation animation) {  
            Log.i("alpha", "onAnimationEnd called");  
        }  
      
        @Override  
        public void onAnimationRepeat(Animation animation) {  
            Log.i("alpha", "onAnimationRepeat called");  
        }  
    }

接着看一下位移動畫，佈局文件/res/layout/translate.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <FrameLayout  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:orientation="vertical"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent">  
      <ImageView  
        android:id="@+id/trans_image"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_weight="1"  
        android:src="@drawable/person"/>  
      <Button  
        android:id="@+id/trans_button"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_gravity="bottom"  
        android:text="translate"  
        android:onClick="translate"/>  
    </FrameLayout>

動畫定義文件/res/anim/translate.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@android :anim/bounce_interpolator">  
        <translate  
            android:fromXDelta="0"  
            android:fromYDelta="0"  
            android:toXDelta="200"  
            android:toYDelta="300"  
            android:duration="2000"/>  
    </set>

而後TranslateActivity.java代碼以下：

    package com.scott.anim;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.view.animation.Animation;  
    import android.view.animation.AnimationUtils;  
    import android.view.animation.OvershootInterpolator;  
    import android.view.animation.TranslateAnimation;  
    import android.widget.ImageView;  
      
    public class TranslateActivity extends Activity {  
          
        private ImageView trans_iamge;  
          
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.tanslate);  
            trans_iamge = (ImageView) findViewById(R.id.trans_image);  
            Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate);  
            anim.setFillAfter(true);  
            trans_iamge.startAnimation(anim);  
        }  
          
        public void translate(View view) {  
            Animation anim = new TranslateAnimation(200, 0, 300, 0);  
            anim.setDuration(2000);  
            anim.setFillAfter(true);  
            OvershootInterpolator overshoot = new OvershootInterpolator();  
            anim.setInterpolator(overshoot);  
            trans_iamge.startAnimation(anim);  
        }  
    }

最後，咱們再來看如下縮放動畫，佈局文件/res/layout/scale.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:orientation="vertical"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent">  
      <ImageView  
        android:id="@+id/scale_image"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center"  
        android:layout_weight="1"  
        android:src="@drawable/person"/>  
      <Button  
        android:id="@+id/scale_button"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_gravity="bottom"  
        android:text="scale"  
        android:onClick="sclae"/>  
    </LinearLayout>

動畫定義文件/res/anim/scale.xml以下：

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:interpolator="@android :anim/bounce_interpolator">  
        <scale  
            android:fromXScale="1.0"  
            android:toXScale="2.0"  
            android:fromYScale="1.0"  
            android:toYScale="2.0"  
            android:pivotX="0.5"  
            android:pivotY="50%"  
            android:duration="2000"/>  
        <alpha  
            android:fromAlpha="0.0"  
            android:toAlpha="1.0"  
            android:duration="3000"/>  
    </set>

而後ScaleActivity.java代碼以下：

    package com.scott.anim;  
      
    import android.app.Activity;  
    import android.os.Bundle;  
    import android.view.View;  
    import android.view.animation.Animation;  
    import android.view.animation.AnimationUtils;  
    import android.view.animation.BounceInterpolator;  
    import android.view.animation.ScaleAnimation;  
    import android.widget.ImageView;  
      
    public class ScaleActivity extends Activity {  
          
        private ImageView scale_iamge;  
          
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.scale);  
            scale_iamge = (ImageView) findViewById(R.id.scale_image);  
            Animation anim = AnimationUtils.loadAnimation(this, R.anim.scale);  
            anim.setFillAfter(true);  
            scale_iamge.startAnimation(anim);  
        }  
          
        public void sclae(View view) {  
            Animation anim = new ScaleAnimation(2.0f, 1.0f, 2.0f, 1.0f,   
                    Animation.RELATIVE_TO_SELF, 0.5f,   
                    Animation.RELATIVE_TO_SELF, 0.5f);  
            anim.setDuration(2000);  
            anim.setFillAfter(true);  
            BounceInterpolator bounce = new BounceInterpolator();  
            anim.setInterpolator(bounce);  
            scale_iamge.startAnimation(anim);  
        }  
    }

幾種動畫運行效果以下圖所示：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。