要點提煉|開發藝術之Animation

時間  2019-11-09
標籤 要點 提煉 開發 藝術 animation 简体版
原文   原文鏈接

在以前開發藝術之View講滑動的時候曾簡單提起過動畫，本篇將依次分析和總結如下三類動畫：

  • View動畫（View Animation）/補間動畫（Tween animation）
    • 自定義View動畫
    • 佈局動畫
    • Activity切換動畫
  • 逐幀動畫（Drawable Animation）
  • 屬性動畫（Property Animation）

一View動畫html

1.Q：View動畫主要的四種變換效果java

A：平移動畫、縮放動畫、旋轉動畫和透明度動畫 。對應關係如圖：android

image

注意：View動畫的View移動只是視覺效果，並不能真正的改變view的位置。bash

2.View動畫的建立app

對於View動畫建議採用XML來定義dom

a.經過xml定義：ide

  • 該xml文件建立在res/anim/ 下。
  • 根節點<set>，子節點<translate>、<scale>、<rotate>、<alpha >，分別對應四種View動畫：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true"
    android:fillAfter="true">
    
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float"/>
     <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float"/>    
     <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotY="float"
        android:pivotX="float"/>
    <alpha 
        android:fromAlpha="float"
        android:toAlpha="float"/>

</set>
複製代碼

接下來分別解釋各個節點下屬性含義：佈局

①<set >：表示動畫集合，對應AnimationSet類。post

  • android:shareInterpolator：表示集合中的動畫是否和集合共享一個插值器。動畫

    • 若是集合不指定插值器, 那麼子動畫就須要單獨制定所需的插值器或者使用默認值。

  • android:fillAfter：表示動畫結束時是否保持動畫結束時的狀態 。

②<translate>：表示平移動畫，對應TranslateAnimation類。

  • android:fromXDelta：動畫起始時X座標上的位置。
  • android:toXDelta：動畫結束時X座標上的位置。
  • android:fromYDelta：動畫起始時Y座標上的位置。
  • android:toYDelta：動畫結束時Y座標上的位置。

注意：以上四個屬性以及後面幾個相似屬性的取值多是數值、百分數、百分數p，各自含義是：

  • 50：以View左上角爲原點沿座標軸正方向偏移50px。
  • 50%：以View左上角爲原點沿座標軸正方向偏移View寬/高度的50%。
  • 50%p：以View左上角爲原點沿座標軸正方向偏移父（parent）控件寬/高度的50%。區別如圖：

image

③<scale>：表示縮放動畫，對應ScaleAnimation類。

  • android:fromXScale動畫起始時X座標上的伸縮尺寸。
  • android:toXScale：動畫結束時X座標上的伸縮尺寸 。
  • android:fromYScale：動畫起始時Y座標上的伸縮尺寸。
  • android:toYScale：屬性爲動畫結束時Y座標上的伸縮尺寸。

以上四個屬性值的值含義：

  • 值=0.0 ：表示收縮到沒有
  • 值＜1.0 ：表示收縮
  • 值=1.0 ：表示無伸縮
  • 值＞1.0 ：表示放大
  • android:pivotX：動畫相對於物件的X座標的開始位置。
  • android:pivotY：動畫相對於物件的Y座標的開始位置。

以上兩個屬性值表示縮放的軸點：從0%-100%中取值。

④<rotate>：表示旋轉動畫，對應RotateAnimation類。

  • android:fromDegrees：動畫起始時物件的角度 。
  • android:toDegrees：動畫結束時物件旋轉的角度。
  • 以上兩個屬性共同肯定旋轉方向，原則是：當角度爲負數時表示逆時針旋轉，反之。
  • 故共存在如下四種狀況：
    • from=負數->to=正數：表示順時針旋轉
    • from=負數->to=負數：表示逆時針旋轉
    • from=正數->to=正數：表示順時針旋轉
    • from=正數->to=負數：表示逆時針旋轉
  • android:pivotY：動畫相對於物件的X座標的開始位置。
  • android:pivotX：動畫相對於物件的Y座標的開始位置。

以上兩個屬性值表示旋轉的軸點：從0%-100%中取值。

⑤<alpha>：表示透明度動畫，對應AlphaAnimation類。

  • android:fromAlpha：動畫起始時透明度。
  • android:toAlpha動畫結束時透明度。

以上兩個屬性值：從0-1中取值。特別的，

  • 值=0.0 ：表示徹底透明
  • 值=1.0 ：表示徹底不透明

以上四類View動畫除了各自的特有屬性外，它們的共有屬性有：

image

在xml聲明好以後，接下來只要在代碼中startAnimation(animation) 開始動畫便可，代碼以下：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.XXX);
mView.startAnimation(animation);
複製代碼

同時，可經過Animation的setAnimationListener(new AnimationListener(){...}) 給動畫添加過程監聽，這樣在動畫開始、結束和每一次循環時均可在回調方法中監聽到。接口代碼以下：

public static interface AnimationListener {
        //動畫開始        
        void onAnimationStart(Animator animation);
        //動畫結束
        void onAnimationEnd(Animator animation);
        //動畫重複
        void onAnimationRepeat(Animator animation);
    }
複製代碼

b.經過Java代碼動態建立

  • 具體步驟：

step1：建立TranslateAnimation、RotateAnimation、ScaleAnimation或AlphaAnimation對象。

step2：設置建立的動畫對象的屬性，如動畫執行時間、延遲時間、起始位置、結束位置等。

step3：經過View.startAnimation() 方法開啓動畫。

step4：可經過Animation.setAnimationListener() 設置動畫的監聽器，同上。

c.綜合實例

①平移：

//法一：xml定義
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="2000"
           android:fromXDelta="0"
           android:fromYDelta="0"
           android:toXDelta="100%"
           android:toYDelta="100%">
</translate>

//在MainActivity中調用
  Animation translateAnim = AnimationUtils.loadAnimation(this, R.anim.view_anim_translate);
    mImageView.startAnimation(translateAnim);
複製代碼
//法二：java代碼建立
TranslateAnimation translateAnimation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 1,
            Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 1);
    translateAnimation.setDuration(2000);
    mImageView.startAnimation(translateAnimation);
}
複製代碼

效果：

image

②縮放：

//法一：xml定義
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="2000"
       android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="0.5"
       android:toYScale="0.5">
</scale>

//在MainActivity中調用
   Animation scaleAnim = AnimationUtils.loadAnimation(this, R.anim.view_anim_scale);
    mImage.startAnimation(scaleAnim);
複製代碼
//法二：java代碼建立
ScaleAnimation scaleAnimation = new ScaleAnimation(
            1, 0.5f,
            1, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(2000);
    mImageView.startAnimation(scaleAnimation);
複製代碼

效果:

image

③旋轉:

//法一：xml定義
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="true"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%">
</rotate>

//在MainActivity中調用
Animation rotateAnim = AnimationUtils.loadAnimation(this, R.anim.view_anim_rotate);
    mImageView.startAnimation(rotateAnim);
複製代碼
//法二：java代碼建立
RotateAnimation rotateAnimation = new RotateAnimation(
            0, 360,
            Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setDuration(2000);
    mImageView.startAnimation(rotateAnimation);

複製代碼

效果：圖片在2s內以圖片中心爲軸點，順時針旋轉360°，即完整轉一圈。

④透明度：

//法一：xml定義
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="2000"
       android:fromAlpha="1.0"
       android:toAlpha="0">
</alpha>

//在MainActivity中調用
    Animation alphaAnim = AnimationUtils.loadAnimation(this, R.anim.view_anim_alpha);
    mImageView.startAnimation(alphaAnim);
複製代碼
//法二：java代碼建立
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
    alphaAnimation.setDuration(2000);
    mImageView.startAnimation(alphaAnimation);
複製代碼

效果：圖片在2s內從有到無。

⑤動畫集合：

//法一：xml定義
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true" >
    
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="100%"> />
    <scale
       android:duration="2000"
       android:fromXScale="1.0"
       android:fromYScale="1.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="0.5"
       android:toYScale="0.5" /> 
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
     <alpha
       android:duration="2000"
       android:fromAlpha="1.0"
       android:toAlpha="0"/>   
</set>

//在MainActivity中調用
    Animation setAnim = AnimationUtils.loadAnimation(this, R.anim.view_anim_set);
    mImageView.startAnimation(setAnim);
複製代碼
//法二：java代碼建立
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
    alphaAnimation.setDuration(2000);

    RotateAnimation rotateAnimation = new RotateAnimation(
            0, 360,
            Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setDuration(2000);

    ScaleAnimation scaleAnimation = new ScaleAnimation(
            1, 0.5f,
            1, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(2000);

    TranslateAnimation translateAnimation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 1,
            Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 1);
    translateAnimation.setDuration(2000);

    AnimationSet animationSet = new AnimationSet(true);
    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(rotateAnimation);
    animationSet.addAnimation(scaleAnimation);
    animationSet.addAnimation(translateAnimation);

    mImageView.startAnimation(animationSet);
複製代碼

效果：以上四種動畫效果的疊加。圖片在2s內邊向右下角移動、邊縮小、邊旋轉、邊下降透明度至消失。

補充實例：View動畫高級實例探究

3.自定義View動畫

實際項目中以上幾種動畫並不能知足咱們的需求，這時就須要自定義View動畫。

  • 步驟：繼承Animation->重寫initialize() 和applyTransformation() 方法：initialize()用於初始化；applyTransformation()用於進行矩陣變換
  • 實例：自定義補間動畫、3D翻轉動畫

4.view動畫的特殊使用場景

View動畫除了可做用在某個View對象上， 還能夠用在特殊的場景，例如：控制ViewGroup的子View 的出場效果，還有Activity的切換效果。接下來依次介紹。

a.佈局動畫

  • 經常使用場景：ListView、GridView。
  • 對應類：LayoutAnimation。
  • 該xml文件建立在res/anim/ 下。
  • 根節點<layoutAnimation >，經常使用屬性：
layoutAnimation 
    |- delay="float"
    |- animationOrder="[normal|reverse | random]"
    |- animation="[@anim/res_id]"
複製代碼

①android:delay：表示子元素開始動畫的延遲時間。

好比，子元素入場動畫的時間週期是300ms，那麼該屬性值=0.5就表示每一個子元素都須要延遲150ms才能播放入場動畫。

② android:animationOrder ：表示子元素動畫的播放順序。可選模式：normal （正常順序）、random（隨機順序）、reverse（倒序）。 ③android:animation ：爲子元素指定具體的入場動畫。

  • 建立方法：

法一：xml定義，分兩步

step1：定義layoutAnimation動畫

// res/anim/anim_layout.xml
<layoutAnimation 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_item"
    android:delay="0.5"
    android:animationOrder="normal">
</layoutAnimation>
複製代碼
// res/anim/anim_item.xml 
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1" />
    <translate
        android:fromXDelta="100"
        android:toXDelta="0"
        />
</set>
複製代碼

step2：爲ViewGroup設置android:layoutAnimation屬性， 這裏假設爲listview：

//activity_main.xml
<ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layoutAnimation="@anim/anim_layout"/>
複製代碼

法二：java代碼建立，經過LayoutAnimation類綁定

//和上述xml定義方法的效果相同
Animation animation = AnimationUtils.loadLayoutAnimation(this, R.anim.anim_item);
        LayoutAnimationController controller = new LayoutAnimationController(animation);//對應android:animation屬性
        controller.setDelay(0.5);//對應android:delay屬性       controller.setOrder(LayoutAnimationController.ORDER_NORMAL);//對應android:animationOrder屬性
        listView.setLayoutAnimation(controller);//對應android:layoutAnimation屬性
複製代碼

b.Activity的切換效果

  • 該xml文件建立在res/anim/ 下。
  • Activity默認是有切換效果的，若須要自定義切換效果，須要用到overridePendingTransition(int inAnim, int outAnim) 方法。
    • 參數含義：（進入的Activity所需進行的動畫id，退出的Activity所需進行的動畫id）
    • 該方法調用在startActivity()或finish()之後才生效。例如：
startActivity(intent);
overridePendingTransition(R.anim.enter_anim, R.anim.exit_anim);
複製代碼

補充實例：Android動畫總結——佈局動畫、轉場動畫

二.逐幀動畫

幀動畫也是View動畫的一種，它會按照順序播放一組預先定義好的圖片。對應類AnimationDrawable。

1.逐幀動畫的建立

a.經過xml定義：

  • 該xml文件建立在res/drawable/ 下。
  • 根節點<animation-list>，屬性android:oneshot表示是否執行一次；子節點<item> 下可設置輪播的圖片資源id和持續時間。例如：
<?xml version="1.0" encoding="utf-8"?>
<animation-list  xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/xxx1" android:duration="500"/>
    <item android:drawable="@drawable/xxx2" android:duration="500"/>
    <item android:drawable="@drawable/xxx3" android:duration="500"/>
    <item android:drawable="@drawable/xxx4" android:duration="500"/>
</animation-list>
複製代碼

在xml聲明好以後，將它做爲View的背景並經過AnimationDrawable來播放便可。代碼以下：

mView.setBackgroundResource(R.drawable.XXX);
AnimationDrawable animationDrawable = (AnimationDrawable)mView.getBackground();
animationDrawable.start();
複製代碼

b.經過Java代碼動態建立

//和上述xml定義方法的效果相同
AnimationDrawable ad = new AnimationDrawable();//1.建立AnimationDrawable對象
    for (int i = 0; i < 4; i++) {//2.添加Drawable對象及其持續時間
        Drawable drawable = getResources().getDrawable(getResources().getIdentifier("xxx" + i, "drawable", getPackageName()));
        ad.addFrame(drawable, 500);
    }
    ad.setOneShot(false);//3.設置是否執行一次
    mView.setBackgroundResource(ad);//4.將幀動畫做爲view背景
    ad.start();//5.播放動畫
複製代碼

注意：使用禎動畫要注意不能使用尺寸過大的圖片，不然容易形成OOM( 內存溢出)錯誤。

補充實例：Android 逐幀動畫：關於 逐幀動畫 的使用都在這裏了！

三.屬性動畫

1.Q：屬性動畫與View動畫的不一樣

A：

image

2.理解插值器和估值器

a.插值器(Interpolator)

  • 做用：根據時間流逝的百分比計算出當前屬性值改變的百分比。肯定了動畫效果變化的模式，如勻速變化、加速變化等等。
  • 經常使用的系統內置插值器：
    • 線性插值器(LinearInterpolator)：勻速動畫
    • 加速減速插值器(AccelerateDecelerateInterpolator)：動畫兩頭慢中間快
    • 減速插值器(DecelerateInterpolator)：動畫愈來愈慢
  • 可針對的對象
    • View動畫：插值器對應的屬性是android:interpolator。
    • 屬性動畫：是實現非勻速動畫的重要手段。
  • 自定義插值器方法：實現 Interpolator / TimeInterpolator接口 ，而後複寫getInterpolation()。
  • 補間動畫實現 Interpolator接口、屬性動畫實現***TimeInterpolator***接口。
  • TimeInterpolator接口是屬性動畫中新增的，用於兼容Interpolator接口。

b.類型估值器(TypeEvaluator)

  • 做用：根據當前屬性改變的百分比計算出改變後的屬性值。
  • 經常使用的系統內置的估值器：
    • 整形估值器(IntEvaluator)
    • 浮點型估值器(FloatEvaluator)
    • Color屬性估值器(ArgbEvaluator)
  • 針對於屬性動畫，View動畫不須要類型估值器。是屬性動畫實現非勻速動畫的重要手段。
  • 自定義估值器方法：實現TypeEvaluator接口，而後複寫evaluate()。

推薦閱讀：你真的會使用插值器與估值器嗎？

3.Q：屬性動畫的工做原理

A： 在必定時間間隔內，經過不斷對值進行改變，並不斷將該值賦給對象的屬性，從而實現該對象在該屬性上的動畫效果。

具體體如今 ：

step1：建立屬性動畫時，若未設置屬性的初始值，則系統會經過該屬性的get() 方法獲取初始值。故屬性動畫要求必須提供屬性的get()方法。

step2： 在動畫播放的過程當中，利用時間插值器和類型估值器獲取改變後的屬性值。

step3：將改變後的屬性值經過set() 方法設置到對象中。故屬性動畫要求必須提供屬性的set()方法。

即經過反射調用get/set方法。

4.屬性動畫的實現方式

在res/animator/ 下可建立屬性動畫的xml文件。其中，根節點<set>對應AnimatorSet 類，子節點<objectAnimator>對應ObjectAnimator 類、<animator>對應ValueAnimator 類。經常使用屬性：

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["repeat" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>
複製代碼

首先先來介紹<set>標籤下的經常使用屬性：

  • android:ordering：設置動畫的時序關係。可選值：
    • together：默認值。表示動畫集合中的子動畫同時播放。
    • sequentially：表示動畫集合中的子動畫按照書寫的前後順序依次播放。

接下來具體介紹屬性動畫的實現方式：

a.經過ObjectAnimator實現屬性動畫

  • 原理：經過直接對對象（object）的屬性值進行改變操做，從而實現動畫效果。
  • 對應根節點<objectAnimator>
  • 經常使用屬性介紹：

①android:propertyName：屬性動畫做用的屬性名稱。

②android:duration： 動畫持續時長。

③android:startOffset：設置動畫執行以前的等待時長。

④android:repeatCount：動畫重複執行的次數。

  • 默認爲0，表示只播放一次。
  • 設置爲**-1或infinite**，表示無限重複。

⑤android:repeatMode：動畫重複執行的模式。可選值：

  • restart：表示連續重複，爲默認值。
  • reverse ：表示逆向重複。

⑥android:valueFrom：動畫初始值。

⑦android:valueTo：動畫結束值。

⑧android:valueType：動畫值類型。可選值：

  • intType ：以上兩個value屬性值爲整型。
  • floatType：即以上兩個value屬性值爲浮點型，爲默認值。
  • 若爲color值，則無需設置該屬性。

b.經過ValueAnimator實現屬性動畫

  • 原理：經過不斷控制值（value）的變化，再不斷手動賦給對象的屬性，從而實現動畫效果。

ObjectAnimator與 ValueAnimator類的區別：

  • ValueAnimator 類是先改變值，而後手動賦值給對象的屬性從而實現動畫；是間接對對象屬性進行操做；
  • ObjectAnimator 類是先改變值，而後自動賦值給對象的屬性從而實現動畫；是直接對對象屬性進行操做；
  • 對應根節點<animator>
  • 經常使用屬性比****標籤少一個android:propertyName屬性，其餘相同。

推薦閱讀：這是一篇很詳細的 屬性動畫 總結&攻略

5.屬性動畫的監聽器

屬性動畫主要使用兩個接口：AnimatorUpdateListener&AnimatorListener來監聽動畫的播放過程。

  • AnimatorListener ：監聽動畫的開始、結束、取消以及重複播放。以下：
public static interface AnimatorListener {
    void onAnimationStart(Animator animation); //動畫開始
    void onAnimationEnd(Animator animation); //動畫結束
    void onAnimationCancel(Animator animation); //動畫取消
    void onAnimationRepeat(Animator animation); //動畫重複播放
}
複製代碼

爲方便開發，系統提供了AnimatorListenerAdapter類，它是AnimatorListener的適配器，如此可有選擇複寫上述四個方法。

  • AnimatorUpdateListener ：監聽整個動畫過程。每播放一幀onAnimationUpdate()就會被調用一次，以下：
public interface AnimatorUpdateListener {
  void onAnimationUpdate(ValueAnimator var1);//在屬性動畫的屬性值變化是回調。
}
複製代碼

推薦閱讀：Android中的View動畫和屬性動畫

但願這篇文章對你有幫助~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程