2. 程式人生 > >詳解Android動畫之Tween Animation

詳解Android動畫之Tween Animation

阿新 • • 發佈：2019-01-09

轉載地址：http://blog.csdn.net/liuhe688/article/details/6660823

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

同樣，在開始例項演示之前，先引用官方文件中的一段話：

Tween動畫是操作某個控制元件讓其展現出旋轉、漸變、移動、縮放的這麼一種轉換過程，我們成為補間動畫。我們可以以XML形式定義動畫，也可以編碼實現。

如果以XML形式定義一個動畫，我們按照動畫的定義語法完成XML，並放置於/res/anim目錄下，檔名可以作為資源ID被引用；如果由編碼實現，我們需要使用到Animation物件。

如果用定義XML方式實現動畫，我們需要熟悉一下動畫XML語法：

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:interpolator="@[package:]anim/interpolator_resource"
  4.     android:shareInterpolator=["true" | "false"] >
  5.     <alpha
  6.         android:fromAlpha="float"
  7.         android:toAlpha
    ="float"/>
  8.     <scale
  9.         android:fromXScale="float"
  10.         android:toXScale="float"
  11.         android:fromYScale="float"
  12.         android:toYScale="float"
  13.         android:pivotX="float"
  14.         android:pivotY="float"/>
  15.     <translate
  16.         android:fromX="float"
  17.         android:toX
    ="float"
  18.         android:fromY="float"
  19.         android:toY="float"/>
  20.     <rotate
  21.         android:fromDegrees="float"
  22.         android:toDegrees="float"
  23.         android:pivotX="float"
  24.         android:pivotY="float"/>
  25.     <set>
  26.         ...  
  27.     </set>
  28. </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之間。

<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表示，代表相對於父類元件的百分比。

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

另外，在動畫中，如果我們添加了android:fillAfter="true"後，這個動畫執行完之後保持最後的狀態；android:duration="integer"代表動畫持續的時間，單位為毫秒。

如果要把定義在XML中的動畫應用在一個ImageView上，程式碼是這樣的：

  1. ImageView image = (ImageView) findViewById(R.id.image);  
  2. Animation testAnim = AnimationUtils.loadAnimation(this, R.anim.test);  
  3. 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 快速到達終點並超出一小步最後回到終點

然後我們可以這樣使用一個插值器：

  1. <setandroid:interpolator="@android:anim/accelerate_interpolator">
  2. ...  
  3. </set>
  1. <alphaandroid:interpolator="@android:anim/accelerate_interpolator"
  2.     .../>

如果只簡單地引用這些插值器還不能滿足需要的話，我們要考慮一下個性化插值器。我們可以建立一個插值器資源修改插值器的屬性，比如修改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

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

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <overshootInterpolatorxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:tension="7.0"/>
上面的程式碼中，我們把張力改為7.0，然後將此檔案命名為my_overshoot_interpolator.xml，放置於/res/anim下，我們就可以引用到自定義的插值器了：
  1. <scalexmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:interpolator="@anim/my_overshoot_interpolator"
  3.     .../>
如果以上這些簡單的定義還不能滿足我們的需求，那麼我們就需要考慮一下自己定義插值器類了。

我們可以實現Interpolator介面，因為上面所有的Interpolator都實現了Interpolator介面，這個介面定義了一個方法：float getInterpolation(float input);

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

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

  1. publicfloat getInterpolation(float input) {  
  2.     return input;  
  3. }  
加速減速插值器定義如下：
  1. publicfloat getInterpolation(float input) {  
  2.     return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
  3. }  
有興趣的話，大家可以嘗試一下自定義一個插值器。

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

先來介紹一下旋轉動畫的使用，佈局檔案/res/layout/rotate.xml如下：

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayout
  3.   xmlns:android="http://schemas.android.com/apk/res/android"
  4.   android:orientation="vertical"
  5.   android:layout_width="fill_parent"
  6.   android:layout_height="fill_parent"
  7.   android:background="#FFFFFF">
  8.   <ImageView
  9.         android:id="@+id/piechart"
  10.         android:layout_width="wrap_content"
  11.         android:layout_height="wrap_content"

  12. 相關推薦

    詳解Android動畫之Tween Animation

    轉載地址：http://blog.csdn.net/liuhe688/article/details/6660823 前面講了動畫中的Frame動畫，今天就來詳細講解一下Tween動畫的使用。 同樣，在開始例項演示之前，先引用官方文件中的一段話：

    詳解Android逆向之Smali語法

    資料型別 Dalvik位元組碼只有兩種格式：基本型別和引用型別。物件和陣列屬於引用型別 語法 含義 V void，只用於返回值型別 Z boolean B byte S short C

    Android動畫之Frame Animation

    在開始例項講解之前，先引用官方文件中的一段話： Frame動畫是一系列圖片按照一定的順序展示的過程，和放電影的機制很相似，我們稱為逐幀動畫。Frame動畫可以被定義在XML檔案中，也可以完全編碼實現。 如果被定義在XML檔案中，我們可以放置在/res下的anim或drawable目錄中(/res/[ani

    Android 動畫之ScaleAnimation應用詳解

    android中提供了4中動畫： AlphaAnimation 透明度動畫效果 ScaleAnimation 縮放動畫效果 TranslateAnimation 位移動畫效果 RotateAnimation 旋轉動畫效果 本節講解ScaleAnimation 動

    【Android 動畫】View Animation詳解（一）

    安卓平臺目前提供了兩大類動畫，在Android 3.0之前，一大類是View Animation，包括Tween animation（補間動畫）,Frame animation（幀動畫），在android3.0中又引入了一個新的動畫系統：property ani

    詳解android之Animation監聽方法AnimationListener（一）

    先寫一個類繼承AnimationListener，看看具體方法： 具體方法大家也已經從圖片中也有些瞭解了，那接下來就看看實戰中，又怎麼使用呢： 1. 先看看佈局檔案和效果圖：     

    詳解Android View的事件體系 之View基礎（二）

    前言 掌握View的事件體系是Android 向高階邁向的必經之路，本片部落格講解Android View的相關基礎知識第二部分，後面我們會為大家講解View事件體系、View事件分發等知識內容。View相關知識第一部分https://blog.csdn.net/huangliniqng/a

    Android 動畫之補間動畫(View Animation)

    Android 中補間動畫包括下面四種: 1.透明度動畫 (AlphaAnimation) 2.縮放動畫 (ScaleAnimation) 3.平移動畫 (TranslateAnimation) 4.旋轉動畫 (RotateAnimation) 補間動畫是專門針對V

    詳解Android View的事件體系 之View基礎（一）

    前言 掌握View的事件體系是Android 向高階邁向的必經之路，本片部落格講解Android View的相關基礎知識第一部分，後面我們會為大家講解基礎知識第二部分、VIew事件體系、View事件分佈等知識內容。 1.View基礎 1.1 什麼是View 簡單的說V

    Android動畫之animation-list實現逐幀動畫

    簡介 幀動畫（Frame Animation又稱Drawable Animation）是最簡單的Android動畫效果，其與電影多重連續幀播放原理相似，通過視覺殘留來讓人感知到動畫效果。其實現方式是將

    Android開發之Tween(補間動畫)完全解析(下)——程式碼實現

    在上一篇文章中，我們詳細討論了Tween動畫的xml的實現以及interpolator的使用，相信通過上篇文章大家對Tween動畫的xml屬性的配置會有一個詳細的理解，當然這篇文章也是承接上篇文章，所以強烈建議先閱讀上篇文章：Android開發之Tween(

    Android開發之Tween(補間動畫)完全解析(上)——xml檔案配置的實現

    相信不管做了多長時間開發的人都用過Tween動畫，從剛開始工作到現在我也是用了N次Tween動畫，但是每一次使用總感覺掌握的不夠全面，所以花了點時間詳細的總結了下Tween動畫，其實在androi

    Android開發之Tween動畫實現方法

    1,   Activity中實現 Animation的子類              Animation scaleAnimation = new ScaleAnimation(0f, 1f, 0f, 1f,             Animation.RELATIVE_

    詳解 Android 的 Activity 組件

    lag 基本 詳細說明 email tco use you 鎖定 多態 本文詳細介紹了 Android 應用編程中 Activity 的生命周期、通信方式和 Intent Filter 等內容，並提供了一些日常開發中經常用到的關於 Activity 的技巧和方法

    Python之Metaclass詳解，Python之元類

    turned 除了 方法 寫法 找到 類對象 global 所在 code 本人Java程序員一枚，這幾天閑來無事就自學了下Python，學到Metaclass感覺有點迷惑，就在網上查相關資料，在棧溢出(stackoverflow)網站上看到一個關於metaclass的回答

    詳解Android數據存儲技術

    應用 接收 delete gets 數據庫版本 data文件夾 upgrade 占位符 講解 前言 學習Android相關知識，數據存儲是其中的重點之一，如果不了解數據，那麽讓你跟一款沒有數據的應用玩，你能玩多久呢？答案是這和沒有手機幾乎是差不多的。我們聊QQ，聊微信，看

    Spring MVC之@RequestMapping 詳解 Spring MVC之@RequestMapping 詳解

    轉自原文 Spring MVC之@RequestMapping 詳解 引言： 前段時間專案中用到了REST風格來開發程式，但是當用POST、PUT模式提交資料時，發現伺服器端接受不到提交的資料（伺服器端引數繫結沒有加 任何註解），查看了提交方式為application/json， 而且伺服器端通過requ

    詳解Android/IOS平臺下抓包工具使用以及抓取API介面

    抓包工具 Charles 主機允許代理模式 客戶端設定代理 截獲資料包 HTTPS 模仿一個app

    Android 動畫之ScaleAnimation

    android中提供了4中動畫： AlphaAnimation 透明度動畫效果 ScaleAnimation 縮放動畫效果 TranslateAnimation 位移動畫效果 RotateAnimation 旋轉動畫效果 本節講解ScaleAnimation

    Android動畫之Interpolator插入器

    SDK對Interpolator的描述是：An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rot