2. 程式人生 > >Android動畫（一）-檢視動畫

Android動畫（一）-檢視動畫

阿新 • • 發佈：2018-11-17

概述

Android開發中一直會遇到各種動畫效果，特別是如果老闆和UI妹子很扣這塊的話。這也是每一個Android程式設計師無法繞過的一塊內容，目前專案不忙，終於有時間來系統的整理下Android中的動畫。

Android中動畫分為:

  1. 幀動畫（Frame Anim），像幻燈片那樣逐張播放
  2. 補間動畫(Tween Anim)，比如對一個TextView執行一系列簡單變換（位置、大小、旋轉、透明度）

還有屬性動畫（Property Anim），佈局動畫（Layout Anim），都歸在補間動畫裡下面會介紹

1 幀動畫

幀動畫有兩種實現方式1.xml中引用drawable 2.程式碼實現，下面就這兩種實現方式我們分別寫Demo看下

1.1 xml中實現

幀動畫按照在animation-list中的item逐個播放，每次開始播放都會從第一幀開始。

這裡寫圖片描述

貼一下xml檔案

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

    <item android:drawable="@mipmap/wifi1" android:duration="500"/>
    <item android:drawable
 
="@mipmap/wifi2" android:duration="500"/>
    <item android:drawable="@mipmap/wifi3" android:duration="500"/>
    <item android:drawable="@mipmap/wifi4" android:duration="500"/>
    <item android:drawable="@mipmap/wifi5" android:duration="500"/>
    <item android:drawable="@mipmap/wifi6" android:duration
 
="500"/>
</animation-list>

1.2 程式碼實現

思路也是給控制元件設定Drawable,逐幀播放。效果和上面一樣的就不貼圖了。

 AnimationDrawable animDrawableBg = new AnimationDrawable();
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi1), 500);
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi2), 500);
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi3), 500);
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi4), 500);
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi5), 500);
        animDrawableBg.addFrame(getResources().getDrawable(R.mipmap.wifi6), 500);
        animDrawableBg.setOneShot(false);//設定迴圈播
        mContentIv.setImageDrawable(animDrawableBg);

2 補間動畫

在說動畫之前，我們要先了解下Android中的座標系。

首先來看以螢幕坐上角為原點的座標系，是Android座標系也可以叫螢幕座標系。

這裡寫圖片描述

其次看以檢視View左上角為原點的座標系叫檢視座標系

這裡寫圖片描述

在看下點關係

這裡寫圖片描述

最後放一張綜合的圖上來，這裡借鑑了若水的圖

這裡寫圖片描述

2.1 View Anim

2.1.1 位移動畫（Translate）

把佈局從一個座標位移動到另一個座標位。

TranslateAnimation(Context context, AttributeSet attrs)

TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) 

TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

有三個構造方法，我們直接看引數最多的那個。

 /**
     * 位移動畫構造方法
     *
     * @param fromXType  X軸方向的參照，有如下幾個引數可選，預設是ABSOLUTE
     *                   Animation.ABSOLUTE,相對於具體座標系值，比如100到300，指絕對的螢幕畫素單位
     *                   Animation.RELATIVE_TO_SELF，相對於自身，移動倍數
     *                   Animation.RELATIVE_TO_PARENT嗎，相對於父容器，移動倍數
     * @param fromXValue 動畫開始的X軸值，以檢視座標系為參照，不是以螢幕的座標系
     * @param toXType X軸終點參照
     * @param toXValue 動畫結束的X軸值
     * @param fromYType Y軸方向的參照系，引數同X軸一樣
     * @param fromYValue 動畫開始的Y軸值
     * @param toYType Y軸終點參照
     * @param toYValue 動畫結束的Y軸值
     */
    public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
                              int fromYType, float fromYValue, int toYType, float toYValue)

舉幾個栗子！

例子1：把View從（0,0）移動到（200,200）

這裡寫圖片描述

private void translate() {
        TranslateAnimation translateAnim = new TranslateAnimation(0, 200, 0, 200);
        translateAnim.setDuration(2000);//動畫執行時間
        mAnimIv.startAnimation(translateAnim);//開始動畫
    }

例子2：把View從（0,0）移動到（2倍自身的X，2倍自身的Y）

 private void translate() {
       TranslateAnimation translateAnim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2,
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2);
        translateAnim.setDuration(2000);//動畫執行時間
        translateAnim.setRepeatCount(1);//重複兩次
        translateAnim.setRepeatMode(Animation.REVERSE);//反向
        mAnimIv.startAnimation(translateAnim);//開始動畫
    }

介紹一下RepeatMode，動畫的重複模式

  /**
     * 定義動畫的重複模式，只在RepeatCount>0 的情況下有效
     *
     * @param repeatMode 重複模式
     *                   RESTART，預設值，動畫結束回到初始位置
     *                   REVERSE，動畫結束從結束點在倒退回原始位置
     */
    public void setRepeatMode(int repeatMode)

看一個bug，在使用ViewAnimtion做動畫時，其實改變的並不是View本身的位置，在View移走的時候我點選了原始位置，點選事件被觸發，這樣就很不好。解決辦法是使用屬性動畫改變View的佈局屬性，下一篇在介紹。

這裡寫圖片描述

2.1.2 縮放動畫（Scale）

    public ScaleAnimation(Context context, AttributeSet attrs) 

    public ScaleAnimation(float fromX, float toX, float fromY, float toY)

    public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            float pivotX, float pivotY)

    public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

看下他第三個構造方法，其餘類似

 /**
     * 縮放動畫構造器
     *
     * @param fromX 起始位橫向縮放因子
     * @param toX 結束位橫向縮放因子
     * @param fromY 起始位縱向縮放因子
     * @param toY 結束位縱向縮放因子
     * @param pivotX 縮放中心點X軸座標
     * @param pivotY 縮放中心點Y軸座標
     */
    public ScaleAnimation(float fromX, float toX, float fromY, float toY,
                          float pivotX, float pivotY)

例子1：將View以左上角為縮放點放大一倍

這裡寫圖片描述

 private void scale() {
        scaleAnim = new ScaleAnimation(1, 2, 1, 2, 0, 0);
        scaleAnim.setDuration(2000);
        scaleAnim.setRepeatCount(1);
        scaleAnim.setRepeatMode(Animation.REVERSE);
        mAnimIv.startAnimation(scaleAnim);
    }

例子2：將View以中心為縮放點 縮小一倍

這裡寫圖片描述

 private void scale() {
        scaleAnim = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setDuration(2000);
        scaleAnim.setRepeatCount(1);
        scaleAnim.setRepeatMode(Animation.REVERSE);
        mAnimIv.startAnimation(scaleAnim);
    }

2.1.3 旋轉動畫（Rotate）

    public RotateAnimation(Context context, AttributeSet attrs) 

    public RotateAnimation(float fromDegrees, float toDegrees)

    public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) 

    public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue)

一樣，我們只看引數最多的那個構造。

/**
     * 旋轉動畫的構造
     *
     * @param fromDegrees 動畫開始時的角度
     * @param toDegrees   動畫結束時的角度
     * @param pivotXType  X軸起始點型別，有如下幾種可選，預設是 Animation.ABSOLUTE
     *                    Animation.ABSOLUTE，畫素值
     *                    Animation.RELATIVE_TO_SELF，以自身為參照，倍數
     *                    Animation.RELATIVE_TO_PARENT，以父容器為參照，倍數
     * @param pivotXValue X軸起始點值
     * @param pivotYType  Y軸起始點型別
     * @param pivotYValue Y軸起始點值
     */
    public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
                           int pivotYType, float pivotYValue)

舉個栗子！

例子1：以初始點為旋轉點，將View旋轉360度

(這裡為了旋轉時轉出螢幕外，我先將View設定了layout_grivity:’center’)

這裡寫圖片描述

private void rotate() {
        rotateAnim = new RotateAnimation(0, 360);
        rotateAnim.setDuration(2000);
        rotateAnim.setRepeatCount(1);
        rotateAnim.setRepeatMode(Animation.REVERSE);
        mAnimIv.startAnimation(rotateAnim);
    }

例子2：以控制元件中心點位旋轉點，將View旋轉360度

private void rotate() {
        rotateAnim = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 1.5f, Animation.RELATIVE_TO_SELF, 1.5f);
        rotateAnim.setDuration(2000);
        rotateAnim.setRepeatCount(1);
        rotateAnim.setRepeatMode(Animation.REVERSE);
        mAnimIv.startAnimation(rotateAnim);
    }

當然也可以以隨便一個點為旋轉點畫圓，自己去試吧~

*補充 在這裡突然想到以前一個面試題。

問題：在做旋轉的時候暫停，將View固定為暫停時的角度，下次開始時就從上次暫停的角度開始。

說的具體一點，就類似以前的碟片機那樣，用一下下篇的圖。

這裡寫圖片描述

這個需求用View Anim還不行，因為動畫取消後，View就回歸到了原始的位置。如圖：

這也就遷出了View Anim的另一個特點，他改變的並不是View在螢幕上真正的位置。

對應這個特點，有一個bug，在View執行時的點選問題。

我首先給View新增一個點選事件,就是彈一個Toast，下面看問題

這裡我點選移動中的View是不會觸發點選事件的，但是我點選View最開始的位置就觸發了點選事件！

2.1.4 透明動畫（Alpha）

    public AlphaAnimation(Context context, AttributeSet attrs)

    public AlphaAnimation(float fromAlpha, float toAlpha)

這個動畫雖然簡單，但是使用也是很多的，比如做一個閃光效果，透明效果都會用到

    /**
     * 透明動畫構造器
     * @param fromAlpha 動畫開始的透明值0~1 0表示完全透明，1表示不透明
     * @param toAlpha 動畫結束的透明值
     */
    public AlphaAnimation(float fromAlpha, float toAlpha)

例子1：製作一個閃動的View

這裡寫圖片描述

 private void alpha() {
        alphaAnim = new AlphaAnimation(1, 0f);
        alphaAnim.setDuration(800);
        alphaAnim.setRepeatCount(4);
        alphaAnim.setRepeatMode(Animation.REVERSE);
        mAnimIv.startAnimation(alphaAnim);
    }

2.1.5 組合動畫（）

除了上面四種外，還可以把他們互相組合起來用

    /**
     * 組合動畫構造器
     *
     * @param shareInterpolator True:set裡面所有動畫使用set統一的插值器 False:使用自己各自的插值器
     */
    public AnimationSet(boolean shareInterpolator)

例子1：漸變向下移動

這裡寫圖片描述

    private void animSet() {
        AnimationSet animationSet = new AnimationSet(true);
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0f,
                Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.8f);
        translateAnimation.setDuration(3000);
        AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0.5f);
        alphaAnimation.setDuration(3000);
        animationSet.addAnimation(translateAnimation);
        animationSet.addAnimation(alphaAnimation);
        animationSet.setInterpolator(new BounceInterpolator());//插值器
        mAnimIv.startAnimation(animationSet);
    }

彈起的效果是插值器做的，我們介紹完動畫接下來就介紹他！

*注意 動畫時間會以animationSet設定的時間為準，如果沒設定則會以內部動畫設定的時間為準

相關推薦

Android動畫（一）-檢視動畫

概述 Android開發中一直會遇到各種動畫效果，特別是如果老闆和UI妹子很扣這塊的話。這也是每一個Android程式設計師無法繞過的一塊內容，目前專案不忙，終於有時間來系統的整理下Android中的動畫。 Android中動畫分為: 幀動畫（Frame Anim），像幻

Android 動畫（一）幀動畫、補間動畫

1.Frame Animation（幀動畫） 幀動畫就是把多張圖片在定義的短時間內完成順序播放，最終呈現在視覺上的動態效果；幀動畫首先得具有圖片資源。 下面是幀動畫在Android開發中的具體實現： （1）activity_main.xml檔案： <

Android View動畫（一） --- scale

for -- 縮放 記錄 1.0 使用 tco 關於 mod 在我們做apk開發的過程中，如果要吸引用戶，就需要要做出來一個非常炫的界面，當然動畫是必不可少的，接下來就記錄和學習動畫相關…… 接下來就把平時的一些東西，慢慢的上傳上來，做一下記錄和保存 今天要講解的第一個

【Android 動畫】動畫詳解之補間動畫（一）

前言 ：之前很早就想寫寫Android 的動畫，最近剛好有時間，大概聊一聊安卓動畫。 我個人習慣將動畫分為：補間動畫（透明度、旋轉、位移、縮放）、幀動畫、和屬性動畫，這一篇，我們先說說補間動畫。 補間動畫這個詞出於flash，在兩個關鍵幀（可以理解成動畫開始和結束）中間需要做“補

WPF中的動畫——（一）基本概念

問題 code AD soft msdn 動畫 易維 sof lean 原文:WPF中的動畫——（一）基本概念WPF的一個特點就是支持動畫，我們可以非常容易的實現漂亮大方的界面。首先，我們來復習一下動畫的基本概念。計算機中的動畫一般是定格動畫，也稱之為逐幀動畫，它通過每幀不

（一）簡單動畫控制播放

很久之前講述過animation動畫播放https://www.cnblogs.com/llstart-new0201/p/7294373.html，現在研究一下animator （一）Project檢視新建AnimatorController （二）在上述介面右鍵Create state->E

Android動畫（二）-屬性動畫

概述 上一篇主要介紹了ViewAnim和幀動畫，篇幅有點長，另起一篇。上篇介紹的兩種動畫開發中用到的不多，主要還是本篇的屬性動畫使用比較廣。 1 補間動畫 1.1 Property Anim 開發中Property Anim使用比View Anim要更為廣泛，主要還是出於剛剛

Android View體系（一）檢視座標系

前言 Android View體系是介面程式設計的核心，他的重要性不亞於Android四大元件，在這個系列中我會陸續講到View座標系、View的滑動、View的事件分發等文章來逐步介紹Android View體系。 1.View簡介 View是And

Javascript動畫（一）

Javascript定時執行程式碼塊方式 number:setInterval(func, msec) 此方法是每隔一定的時間(msec引數值)呼叫一次傳給它的函式(func引數)，若不主動呼叫clearInterval(number)取消定時器，則會一直執行下去。 func

載入RecycleView時為itemView新增一些過渡動畫（一）

效果圖如下： 採用什麼方式實現該種動畫效果？ 　　Android動畫可以分為三類：幀動畫（Frame Animation）、補間動畫（Tween Animation）、屬性動畫（Property Animation）。我們主要這裡用到了補

和ys一起學動畫——傳統動畫與屬性動畫（一）

最近閒啊，所以一直都在看些部落格。想到自己沒怎麼用過動畫，總不能老用別人寫好的動畫就滿足了吧。所以自己學習了幾天的動畫。 傳統動畫 傳統動畫，就是Android3.0之前就可以使用的 API 現在用的情況已經比較少了。但仍然還是學習一下，幀動畫（Fram

小人快跑之WPF基礎——圖形與動畫（一）

前言： 之前為了完成一些任務，因為公司只能限定一些網路訪問且不能用儲存裝置進行拷貝，所以自己在家裡寫了一個demo就放到csdn的下載區回公司再下下來，令人意外的是這個非常小的demo居然兩天裡就有幾十個下載還得到了幾個評論（在我之前從來沒有遇到過的）。想了一下乾脆分享一下

【H5 3D應用開發】 Three.js 播放json模型動畫並切換動畫（一）

1、匯入Js模型 var loader = new THREE.JSONLoader(true); //JSONLoader構造傳入true，即showStatus=ture（顯示載入進度）

通過原始碼，手把手帶你學屬性動畫（一）

在 Android 3.0(API level 11) 之後，Google 為 Android添加了屬性動畫(Property Animation)，該動畫系統是一個強大的框架，允許開發者對幾乎任何物件進行動畫。 由此可知，屬性動畫致力於為開發者提供更

WPF中的動畫——（五）路徑動畫

hid height TP ima 簡單的 .html ani xtra 很難 原文:WPF中的動畫——（五）路徑動畫路徑動畫是一種專門用於將對象按照指定的Path移動的動畫，雖然我們也可以通過控制動畫的旋轉和偏移實現對象的移動，但路徑動畫更專業，它的實現更加簡潔明了。

Android MVC（一） MVC簡介

mvc tar .com 程序 tro view 用戶界面 lis 代碼 今天有朋友和我提到Android中的MVC模式，自己就在這裏總結下，如有不妥，大家盡情批評指教 MVC框架簡介 　　MVC全名是Model View Controller，是模型(model)－視圖(

Android學習（一）--安卓四大元件

 Android有四大元件，分別是Activity,Service,Content Provider和Broadcast Receiver。   首先說明Activity元件，開發一個應用程式不用到Activity是很難的，一個Activity通常就是一個獨立的視窗或

Android學習（一）—— Android studio的安裝與配置

          最近事比較少，想著做一系列Android的學習，把自己當時遇到的一些整理一下，方便新學android的人學習 首先先來安裝編寫Android的軟體，我這裡用的是android studio Android studio安裝與配

Android學習（一）

分析 構建 新的 studio 字符串解析 ble 學習 nullable android學習 Android 系統架構 linux內核層 系統運行庫層 應用框架層 應用層 Android 的四大組件 活動（Activity） 服務（S

android開發（一）

開始android歷程： 1、模擬器無法連線本地PC：       模擬器中可以連外網，但無法訪問本地PC上的IIS的API介面：報connect refused錯誤。      後試了很多方法，修改模擬器網址等，沒用。 &