2. 程式人生 > >動畫效果（一）－漸變動畫

動畫效果（一）－漸變動畫

阿新 • • 發佈：2019-02-06

第1節 概述

在安卓系統中，為了介面或者其中的元件在切換、改變的時候顯得自然生動、具有流動性的美感，就給它們添加了動畫的效果。

例如圖片切換的時候，前一張圖片淡出，後一張圖片淡入。

動畫分了三類： frame動畫（逐幀動畫）、 property動畫（屬性動畫）、 tween動畫（漸變動畫）。

  1. 逐幀動畫有點像播放電影，它把很多圖片串起來，按照順序一張一張顯示，通過播放形成動畫效果；

  2. 屬性動畫是對控制元件某個屬性使用的動畫，例如一個按鈕的寬度要從窄設定到寬，而我們希望它的寬度調整的時候，能看到它從窄到寬變化的過程，這時就需要使用屬性動畫。

  3. 漸變動畫是對控制元件整體使用的動畫，有四種最常見到的效果：透明、平移、縮放和旋轉。

/*******************************************************************/
* 版權宣告
* 本教程只在CSDN和安豆網釋出，其他網站出現本教程均屬侵權。
/*******************************************************************/

第2節 漸變動畫

漸變動畫有四種最常見到的效果：透明、平移、縮放和旋轉。這四種效果都有共同點，

  1. 動畫物件作為整體一點點變化；
  2. 這是一個狀態的遷移過程，需要時間的配合，動畫的時間長短可以指定，動畫變化的速度也是可以指定的；
  3. 動畫執行後，這個動畫的物件，並不是真正的變成了動畫展示的那樣，它其實還保持著以前的樣子，你看到的不過是個它的影子罷了，動畫結束，影子就消失了。

動畫效果可以通過資原始檔定義，也可以通過程式碼來定義。

2.1 透明動畫

透明動畫的效果是，動畫物件的透明度從一個程度變成另一個程度。例如從透明變成不透明這種淡入效果。

2.1.1 xml定義透明動畫

通過xml定義透明動畫，

  1. 在res下新建一個anim目錄，然後在這個目錄下建立一個xml檔案；

  2. 定義動畫效果，

    <?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="1500"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>

透明動畫的各個屬性代表瞭如下的含義：

  1. <alpha/>標籤：這是一個透明效果的動畫；
  2. fromAlpha：動畫開始時，動畫物件的透明度值，取值在0-1之間，0是完全透明，1是完全不透明，0和1之間的值就是各種半透效果；
  3. toAlpha：動畫結束時，動畫物件的透明度值，取值在0-1之間；
  4. duration：動畫持續的時間，單位是毫秒；

  5. interpolator：這是插值器，用來指定動畫變化的速率，例如是先快後慢，還是先慢後快，或者是均勻的變化。安卓系統為我們提供了很多現成的插值器，我們可以直接使用，例如上面的線性插值器@android:anim/linear_interpolator；

淡入效果就是剛開始沒有顯示，逐漸顯示出來，所以它的fromAlpha就要設定成0，toAlpha設定成1;

淡出效果就是剛開始顯示，逐漸隱藏起來，所以它的fromAlpha就要設定成1，toAlpha設定成0;

另外，Android SDK也提供了自定義插值器的方法，我們在以後介紹。

2.1.2 java程式碼定義透明動畫

通過java程式碼定義透明動畫，

  1. 建立一個AlphaAnimation，填入起始alpha值和結束的alpha值；
  2. 設定持續時間；
  3. 設定插值器；
AlphaAnimation anim = new AlphaAnimation(0, 1);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.2 平移動畫

平移動畫的效果是，動畫物件沿著水平方向或者垂直方向移動（或者兩個方向同時移動）到另一位置。

2.2.1 xml定義平移動畫

通過xml定義透明動畫，

  1. 在res下新建一個anim目錄，然後在這個目錄下建立一個xml檔案；

  2. 定義動畫效果，

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

    <translate
        android:fromXDelta="－100%"
        android:fromYDelta="－100%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="1500"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>

平移動畫的各個屬性代表瞭如下的含義：

  1. <translate/>標籤：這是一個平移效果的動畫；
  2. fromXDelta：動畫開始時，動畫物件相對於它真實位置在x方向上的座標；
  3. fromYDelta：動畫開始時，動畫物件相對於它真實位置在y方向上的座標；
  4. toXDelta：動畫結束時，動畫物件相對於它真實位置在y方向上的座標；
  5. toYDelta：動畫結束時，動畫物件相對於它真實位置在y方向上的座標；
  6. duration：動畫持續的時間，單位是毫秒；
  7. interpolator：這是插值器，用來指定動畫變化的速率；

起始座標有3種表達方式：

  1. 動畫物件的絕對位置：用數值表示。

  2. 動畫物件相對自身的位置：用％表示。例如給fromXDelta設定－100%，表示動畫開始時，起始的左邊邊界相對於自身真實位置，在負的自身寬度的地方；

  3. 動畫物件相對於它父佈局的位置：用％p表示，這裡的p就是parent的縮寫。

讓物件從左往右平移進入的效果，就是讓它的fromXDelta設定成－100％，toXDelta設定成0%；fromYDelta設定成0%；toYDelta設定成0%；

讓物件從下往上平移進入的效果，就是讓它的fromXDelta設定成0％，toXDelta設定成0%；fromYDelta設定成100%(y座標是從上到下為正方向)；toYDelta設定成0%；

2.2.2 java程式碼定義平移動畫

通過java程式碼定義平移動畫，

  1. 建立一個TranslateAnimation，填入x y方向的起始座標和結束座標；設定座標時，可以設定座標的型別，Animation.RELATIVE_TO_SELF表示使用相對自身的位置座標，Animation.RELATIVE_TO_PARENT表示使用相對父佈局的位置座標，Animation.ABSOLUTE表示使用絕對位置座標；
  2. 設定持續時間；
  3. 設定插值器；
//使用座標的絕對位置建立動畫
TanslateAnimation anim = new TanslateAnimation(－150, 0, －50, 0);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

//使用座標的相對位置建立動畫
TanslateAnimation anim = new TanslateAnimation(Animation.RELATIVE_TO_SELF, －1.0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, －1.0, Animation.RELATIVE_TO_SELF, 0);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.3 縮放動畫

伸縮動畫的效果是，動畫物件以某個位置為中心進行放大或者縮小。

2.3.1 xml定義伸縮動畫

通過xml定義伸縮動畫，

  1. 在res下新建一個anim目錄，然後在這個目錄下建立一個xml檔案；

  2. 定義動畫效果，

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

    <scale
        android:fromXScale="－100%"
        android:fromYScale="－100%"
        android:toXScale="0%"
        android:toYScale="0%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1500"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>

伸縮動畫的各個屬性代表瞭如下的含義：

  1. <scale/>標籤：這是一個伸縮效果的動畫；
  2. fromXScale：動畫開始時，動畫物件在x方向上相對於它真實大小的縮放比例；
  3. fromYScale：動畫開始時，動畫物件在x方向上相對於它真實大小的縮放比例；
  4. toXScale：動畫結束時，動畫物件在y方向上相對於它真實大小的縮放比例；
  5. toYScale：動畫結束時，動畫物件在y方向上相對於它真實大小的縮放比例；
  6. duration：動畫持續的時間，單位是毫秒；
  7. interpolator：這是插值器，用來指定動畫變化的速率；
  8. pivotX：動畫進行縮放時的中心點x座標；
  9. pivotY：動畫進行縮放時的中心點y座標；

這裡的pivotX與pivotY可以設定絕對座標，也可以設定相對自身的相對座標％，以及相對於父佈局的相對座標％p。

2.3.2 java程式碼定義伸縮動畫

通過java程式碼定義伸縮動畫，

  1. 建立一個ScaleAnimation，填入x y方向的起始伸縮比例和結束伸縮比例；設定中心座標時，可以設定座標的型別，Animation.RELATIVE_TO_SELF表示使用相對自身的位置座標，Animation.RELATIVE_TO_PARENT表示使用相對父佈局的位置座標，Animation.ABSOLUTE表示使用絕對位置座標；
  2. 設定持續時間；
  3. 設定插值器；
//使用中心點的絕對位置建立動畫
ScaleAnimation anim = new ScaleAnimation(1, 2, 1, 2, 50, 150);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);


//使用中心點的相對位置建立動畫
ScaleAnimation anim = new ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5, Animation.RELATIVE_TO_SELF, 0.5);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.4 旋轉動畫

旋轉動畫的效果是，動畫物件以某個位置為中心進行旋轉。

2.4.1 xml定義旋轉動畫

通過xml定義旋轉動畫，

  1. 在res下新建一個anim目錄，然後在這個目錄下建立一個xml檔案；

  2. 定義動畫效果，

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

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1500"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>

伸縮動畫的各個屬性代表瞭如下的含義：

  1. <rotate/>標籤：這是一個旋轉效果的動畫；
  2. fromDegrees：動畫開始時，動畫物件相對於真實位置旋轉的角度；
  3. toDegrees：動畫開始時，動畫物件相對於真實位置旋轉的角度；
  4. duration：動畫持續的時間，單位是毫秒；
  5. interpolator：這是插值器，用來指定動畫變化的速率；
  6. pivotX：動畫進行縮放時的中心點x座標；
  7. pivotY：動畫進行縮放時的中心點y座標；

這裡的pivotX與pivotY可以設定絕對座標，也可以設定相對自身的相對座標％，以及相對於父佈局的相對座標％p。

2.4.2 java程式碼定義旋轉動畫

通過java程式碼定義旋轉動畫，

  1. 建立一個RotateAnimation，填入起始角度和結束角度；設定中心座標時，可以設定座標的型別，Animation.RELATIVE_TO_SELF表示使用相對自身的位置座標，Animation.RELATIVE_TO_PARENT表示使用相對父佈局的位置座標，Animation.ABSOLUTE表示使用絕對位置座標；
  2. 設定持續時間；
  3. 設定插值器；
//使用中心點的絕對位置建立動畫
RotateAnimation anim = new RotateAnimation(0, 360, 50, 150);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

//使用中心點的相對位置建立動畫
ScaleAnimation anim = new ScaleAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5, Animation.RELATIVE_TO_SELF, 0.5);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.5 使用動畫

2.5.1 使用xml定義的動畫

  1. 使用AnimationUtils.loadAnimation()裝載動畫；
  2. 對要使用動畫的物件使用startAnimation()函式，啟動動畫；
Animation anim = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
mAnimationTarget.startAnimation(anim);

2.5.2 使用程式碼定義的動畫

使用程式碼定義的動畫就和使用xml一樣，對要使用動畫的物件使用startAnimation()函式，啟動動畫；

mAnimationTarget.startAnimation(anim);

2.6 多個動畫效果疊加

這幾種動畫不僅可以單獨使用，也可以混合著使用，例如你希望一個物件一邊淡入一邊做平移。

2.6.1 xml定義多個動畫

對同一個物件同時使用多個動畫效果，只要在定義動畫的xml檔案中，新增多個希望的動畫就行了。

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

    <rotate
        ....../>

    <scale
        ....../>

    <translate
        ....../>

    <alpha
        ....../>
</set>

2.6.2 java程式碼定義多個動畫

在java程式碼中可以，

  1. 建立多個動畫；
  2. 建立AnimationSet；
  3. 將建立的多個動畫加入到AnimatonSet當中；
TranslateAnimation anim1 = new TranslateAnimation(...);
ScaleAnimation anim2 = new ScaleAnimation(...);
AlphaAnimation Anim3 = new AlphaAnimation(...);
RotateAnimation anim4 = new RotateAnimation(...);

AnimationSet set = new AnimationSet(true);
set.addAnimation(anim1);
set.addAnimation(anim2);
set.addAnimation(anim3);
set.addAnimation(anim4);

mAnimationTarget.startAnimation(set);

2.7 漸變動畫的監聽

有的時候，需要知道一個動畫執行的狀態，就需要給動畫新增一個監聽器。通過監聽器獲得動畫狀態變化的通知。

TranslateAnimation anim = new TranslateAnimation(...);

anim.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        //動畫開始
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        //動畫結束
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        //動畫重複執行
    }
});

2.8 漸變動畫的其它共同屬性

在前面我們已經介紹了android:duration android:interpolator等共同的屬性。現在我們再介紹幾個其它的重要屬性。

2.8.1 android:fillAfter

假設一個按鈕被使用透明效果的動畫，從不透明變到全透明。動畫完成後，這個按鈕會被還原到它的真實狀態（按鈕並沒有消失或透明，仍然顯示在以前的位置）。

如果給這個動畫設定了android:fillAfter屬性為true，那麼在執行完動畫後，按鈕還是保持動畫最後一幀的效果。

這兩個屬性要設定在<set/>標籤當中才能有效果。

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

也就是說，如果是用程式碼建立動畫的話，得把這個動畫放到AnimationSet之中再來設定屬性。

RotateAnimation anim = new RotateAnimation(...);
AnimationSet set = new AnimationSet(true);
set.addAnimation(anim);
set.setFillAfter(true);

2.8.2 android:repeatMode與android:repeatCount

可以通過設定android:repeatCount的數值，讓動畫重複播放；

  1. 該值為大於0：動畫重複該數值表示的次數；
  2. 該值設定為INFINITE：動畫將會無限迴圈進行下去；

當android:repeatCount被設定大於0以後，還可以配合使用android:repeatMode，

  1. 該值設定為RESTART：每一次動畫執行完成後，回到最初狀態重新執行下一次動畫；
  2. 該值設定為REVERSE：每一次動畫執行完成後，動畫倒著執行；

/*******************************************************************/
* 版權宣告
* 本教程只在CSDN和安豆網釋出，其他網站出現本教程均屬侵權。

*另外，我們還推出了Arduino智慧硬體相關的教程，您可以在我們的網店跟我學Arduino程式設計中購買相關硬體。同時也感謝大家對我們這些碼農的支援。

*最後再次感謝各位讀者對安豆的支援，謝謝:)
/*******************************************************************/

相關推薦

動畫效果（一）－漸變動畫

第1節 概述 在安卓系統中，為了介面或者其中的元件在切換、改變的時候顯得自然生動、具有流動性的美感，就給它們添加了動畫的效果。 例如圖片切換的時候，前一張圖片淡出，後一張圖片淡入。 動畫分了三類： frame動畫（逐幀動畫）、 property動畫（屬性動

使用CABasicAnimation實現的動畫效果（一）

這個動畫採用了CABasicAnimation和CAAnimationGroup來實現的，改變位置、改變大小、按鈕圓角數合在一起形成一個組合動畫。 原來是準備在CABasicAnimation中通過begintime來設定延時的效果，但效果不理想。 程式碼部分： 自定義按

CSS動畫例項：Loading載入動畫效果（一）

      一些網站或者APP在載入新東西的時候，往往會給出一個好看有趣的Loading圖，大部分的Loading樣式都可以使用CSS3製作出來，它不僅比直接使用gif圖簡單方便，還能節省載入時間和空間。下面介紹常見的一些Loading動畫效果圖的製作方法。 1．圓環型Loadi

Android動畫解析（一）-----逐幀動畫和補間動畫

今天專案又用到了動畫，發現之前掌握的那些又遺忘了不少，趁著有時間，再重新捋順一邊。 Android中的動畫分為 逐幀動畫，補間動畫，屬性動畫 三種. 逐幀動畫（Frame Animation） 逐幀動畫：就像GIF圖片一樣，通過一系列的Drawab

利用css3的animation實現點點點loading動畫效果（二）

設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果 簡介 box-shadow理論上可以生成任意的圖形效果，當然也就可以實現點點點的loading效果了。 實現原理 html代碼，首先需要寫如下html代

WPF編遊戲系列 之七 動畫效果（2）

sed 其中 所有 wpf olt targe 針對 font bar 原文:WPF編遊戲系列 之七 動畫效果（2）       上一篇已經對關閉窗口圖標進行了動畫效果處理，本篇將對窗口界面的顯示和關閉效果進行處理

Android學習之動畫總結（一）

寫在前面：本文是根據hencoder提供的教程寫的總結。HenCoder https://hencoder.com。        Android裡動畫可以分為兩類：Animation和Transition，其中Animation又可以分為View Animation和Pr

Android動畫--屬性動畫總結（一）

屬性動畫是API 11 才引入的新特性，屬性動畫彌補了view動畫的一些不足。屬性動畫可以針對屬性進行動畫而不僅僅是View。 但並不是傳遞任何的屬性都能有效果。屬性動畫要求做動畫的物件提供該屬性的get和set方法，屬性動畫根據外界傳遞的該屬性的初始值和最終值，以動畫的效果多次呼叫set

自定義控制元件三部曲之動畫篇（一）——alpha、scale、translate、rotate、set的xml屬性及用法

前言：這幾天做客戶回訪，感觸很大，使用者只要是留反饋資訊，總是一種恨鐵不成鋼的心態，想用你的app，卻是因為你的技術問題，讓他們不得不放棄，而你一個回訪電話卻讓他們盡釋前嫌，當最後把手機號留給他們以便隨時溝通的時候，總會發來一條條的鼓勵簡訊，讓我不自主的開始內疚。哎，多麼可愛

轉：定義控制元件三部曲之動畫篇（一）——alpha、scale、translate、rotate、set的xml屬性及用法

前言：這幾天做客戶回訪，感觸很大，使用者只要是留反饋資訊，總是一種恨鐵不成鋼的心態，想用你的app，卻是因為你的技術問題，讓他們不得不放棄，而你一個回訪電話卻讓他們盡釋前嫌，當最後把手機號留給他們以便隨時溝通的時候，總會發來一條條的鼓勵簡訊，讓我不自主的開始內疚。哎，多麼

Android動畫系列（一）

動畫是Android一個相當重要的組成部分，作為安卓開發者也許多多少少用過一些動畫三方庫。我一直想要系統的整理一下動畫相關的知識。在網上逛了逛，發現很多都已經總結過了，啟航的自定義控制元件三部曲是他花費大心思寫的。真心很不錯，鴻洋也寫過類似動畫的文章，郭神也發過

WOW.js – 在頁面滾動時展現動感的元素動畫效果（精）

簡介 有的頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。比如剛剛釋出的 iPhone 6 的頁面（檢視）。如果你希望你的頁面也更加有趣，那麼你可以試試 WOW.js。 檢視原文 **WOW .js** 依

(原)Unreal源碼搬山-動畫篇 自定義動畫節點（一）

prot win 微軟 pmo tty tsp specified affect display @author:黑袍小道 太忙了，來更新下，嘿嘿 前言： 本文是接著上文 Unreal搬山之動畫模塊_Unreal動畫流程和框架，進行簡單入門如何自定義動畫圖標的An

【Unity程式設計】Unity動畫系統（一）

Unity動畫系統 Unity動畫系統，也稱為“Mecanim”，提供了以下功能： 簡單的工作流程，設定動畫的所有元素，包括物件，角色和屬性。 支援匯入外部建立的動畫片段和使用內建動畫編輯器製作的動畫片段。 人型動畫重新定位，動畫角色的運動控制可以被所有的

Flutter進階—實現動畫效果（七）

我們假設一種情況，如果應用程式使用條形圖顯示給定年份的產品類別的銷售額，使用者可以選擇另一年，然後該應用程式將動畫到該年的條形圖。如果產品類別在兩年內是相同的，或者恰好是相同的，除了在其中一個圖表中右側顯示的其他類別，我們可以使用我們現有的程式碼。但如果公司在2

Android動畫學習（五）之屬性動畫實現Tween的效果和高階屬性示例

一、基本介紹 Golang設計者為了程式設計方便，提供了一些函式，這些函式可以直接使用，我們稱為Go的內建函式。文件：https://studygolang.com/pkgdoc -> buil

Android動畫篇（一）：圓形進度條CircleProgressBar

前言 最近看框架和原始碼比較多，很久沒有寫動畫了，相信很多的朋友都對動畫感興趣，我也不例外，畢竟做前端還是要靠動畫特效吃飯的，並且比寫功能模組更有成就感。 今天我們就來個稍微簡單一點的CircleProgressBar熱個身。 首先需要對ValueAnim

UWP中實現大爆炸效果（一）

ID eight 爆炸效果 foo 更新 The 選中 wid 重寫 自從老羅搞出大爆炸之後，各家安卓都內置了類似功能。UWP怎麽能落下呢，在這裏我們就一起擼一個簡單的大爆炸實現。 閑話不說，先上效果： 因為代碼太多，所以我打算寫成一個系列，下面是第一篇的正文： 首先

C學習筆記（一）－程式設計作業

C學習筆記（一）－程式設計作業 第十一週作業： [Loop]雙基迴文數 [Loop]校門外的樹 [Algorithm]約瑟夫環 [Recursion] 漢諾塔 [Algorithm]紀念郵票 [algorithm]

Echarts + Web實現大屏展示效果（一）

一、效果展示 二、資源下載 1、圖片資源下載        點選這裡 2、js+css 檔案資源下載  點選這裡 三、Demo實現 1、文件結構如下圖所示： 2、Demo.html 程式碼 <!DOCTYPE html> <html l