Android群英傳知識點回顧——第七章：Android動畫機制與提示

標籤：set   mat   viewport   映像   事件   width   動畫特效   google   描述   

• 7.1 Android View動畫架構
  
  • 7.1.1 透明度動畫
  • 7.1.2 旋轉動畫
  • 7.1.3 位移動畫
  • 7.1.4 縮放動畫
  • 7.1.5 動畫集合
• 7.2 Android屬性動畫分析
  
  • 7.2.1 ObjectAnimator
  • 7.2.2 PropertyValuesHolder
  • 7.2.3 ValueAnimator
  • 7.2.4 動畫事件的監聽
  • 7.2.5 AnimatorSet
  • 7.2.6 在XML中使用屬性動畫
  • 7.2.7 View的animate方法
• 7.3 Android布局動畫
• 7.4 Interpolators
• 7.5 自訂動畫
• 7.6 Android5.X SVG向量動畫機制
  
  • 7.6.1 <path>標籤
  • 7.6.2 SVG常用指令
  • 7.6.3 SVG編輯器
  • 7.6.4 Android中使用SVG
  • 7.6.5 SVG動畫執行個體
• 7.7 Android動畫特效
  
  • 7.7.1 靈動菜單
  • 7.7.2 計時器動畫
  • 7.7.3 下拉展開動畫

這篇知識點不多，也容易理解，只是經典代碼回顧案例比較多，所以整章篇幅偏長，不過經典代碼回顧的案例很nice，建議大家多多實踐經典代碼回顧

Android 動畫分為：

• View動畫：又稱視圖動畫、又稱補間動畫、又稱Tween動畫（常用）
• 屬性動畫：通過改變屬性值產生動畫

View動畫中定義了透明度、旋轉、縮放和位移動畫，其實現原理是：

每次繪製視圖時View所在的ViewGroup中的drawChild函數擷取該View的Animation的Transformation值，然後調用canvas.concat(transformToApply.getMatrix())，通過矩陣運算完成動畫幀

其參數分別為旋轉起始角度和旋轉中心點的座標，下面以自身中心點設定旋轉動畫：

與旋轉動畫一樣，縮放動畫也可以設定縮放的中心點，這裡以自身中心設定縮放動畫：

通過AnimationSet，將動畫組合起來：

系統還提供了View動畫的監聽回調：

通過監聽回調，可以獲得到動畫的開始、結束和重複事件

• 在Animator架構中使用最多的就是AnimatorSet和ObjectAnimator配合，使用ObjectAnimator進行更精細化的控制，只控制一個對象的一個屬性，而使用多個ObjectAnimator組合到AnimatorSet形成一個動畫
• 屬性動畫通過調用屬性的get、set方法來真實地控制了一個View的屬性值

• 建立一個ObjectAnimator只需通過他的靜態工廠直接返回一個ObjectAnimator對象
• 參數包括一個對象和對象的屬性名稱字，這個屬性必須有get和set函數，內部會通過Java反射機制來調用set函數修改對象屬性值
• 調用setInterpolator來設定相應的插值器
• 舊版本的動畫所產生的動畫，並不能改變事件響應的位置，知識單純地改變了顯示

參數介紹：

• 第一個參數：被操作的View
• 第二個參數：要操作的屬性
• 第三個參數：可變數組，需要傳遞去該屬性變化的一個取值過程

在使用ObjectAnimator特別重要的是操縱的屬性必須具有get、set方法，不然ObjectAnimator就無法起效，下面介紹一些常用可以直接使用的屬性：

• translationX和translationY：作為一種增量來控制著View對象從它版面配置容器的左上方座標位移的位置
• rotation、rotationX和rotationY：控制View對象圍繞支點進行2D和3D旋轉
• scaleX和scaleY：控制View對象圍繞它的支點進行2D縮放
• pivotX和pivotY：控制View對象的支點位置，圍繞這個支點進行旋轉和縮放變換處理，預設情況下，該支點的位置就是View對象的中心點
• x和y：它描述了View對象在它的容器中的最終位置，它是最初的左上方座標和 translationX和 translationY值的累計和
• alpha：它表示View對象的alpha透明度，預設值是1(不透明)，0代表完全透明(不可見)

如果屬性中沒有get、set方法，可以通過下面方法來實現：

• 通過自訂一個屬性或者封裝類，間接地給這個屬性添加get、set方法
• 通過ValueAnimator實現

這裡以自訂一個屬性增加get、set方法為例：

通過代碼使用：

類似View動畫中的AnimationSet，可以實現多個屬性動畫的組合：

• ObjectAnimator繼承自ValueAnimator
• ValueAnimator本身不提供任何動畫效果，它更像一個數值發生器，用來產生具有一定規律的數字，從而讓調用者來控制動畫的實現過程，通過AnimatorUpdateListener監聽數值的變換：

系統還提供了屬性動畫的監聽回調：

當然，系統還提供了一個可選擇性的監聽事件，選擇需要的事件監聽：

AnimatorSet功能和PropertyValuesHolder和AnimationSet是一樣的效果，只不過針對不同的動畫

AnimatorSet不僅僅通過playTogether()，還有其他方法控制多個效果的協同工作：playSequentially()、animSet.play().with()、before()、after()

屬性動畫同視圖動畫一樣，也可以在XML檔案中編寫：

在程式中使用也很簡單：

Google給View增加了animate方法來直接驅動屬性動畫：

所謂布局動畫指的是作用在ViewGroup上，給ViewGroup增加View時添加一個動畫過度效果

最簡單的布局動畫在ViewGroup的XML中，系統預設的也是無法替換的：

還可以通過LayoutAnimationController類實現自訂子View的過渡效果：

LayoutAnimationController 第一個參數是需要的動畫，第二個參數是每個子View顯示的delay時間，若時間不為0，還可以setOrder設定子View的顯示順序：

• LayoutAnimationController.ORDER_NORMAL：順序
• LayoutAnimationController.ORDER_RANDOM：隨機
• LayoutAnimationController.ORDER_REVEESE：反序

插值器是一個可以控制動畫變換速率的一個屬性值，有點類似於物理的中的加速度，常見的插值器有：

• LinearInterpolator：線性插值器，勻速運動
• AccelerateDecelerateInterpolator：加速減速插值器，動畫兩頭慢中間快
• DecelerateInterpolator：減速插值器，動畫越來越慢
• BounceInterpolator：彈跳插值器，動畫結束時有個彈跳效果

• 需要實現它的applyTransformation的邏輯
• 需要覆蓋父類的initalize方法實現一些初始化工作

• 第一個參數是插值器的時間因子，由動畫當前完成的百分比和目前時間所對應的插值所計算得來的，取值範圍為0到1.0
• 第二個參數是矩陣封裝類，一般使用該類擷取矩陣對象

通過對matrix的變換操作就可以實現動畫效果，我們以類比電視機關閉的效果為例：

android.graphics.Camera中的Camera類，它封裝了openGL的3D動畫，從而可以風場方便地建立3D動畫效果，只要移動Camera就能拍攝到具有立體感的映像：

點擊後開始動畫，這樣一個Button會在設定的時間長度內，使用相應的插值器來完成動畫：

什麼是SVG：

• 可伸縮向量圖形（Scalable Vector Graphics）
• 定義用於網路的基於向量的圖形
• 使用XML格式定義圖形
• 圖片在放大或改變尺寸的情況下其圖形品質不會有所損失
• 全球資訊網同盟標準
• 與諸多DOM和XSL之類的W3C標準是一個整體

Android5.X之後添加了對SVG的<path>標籤的支援，其優點是：

• 放大不會失真
• bitmap需要為不同解析度設計多套表徵圖，而向量圖則不需要

使用<path>標籤有以下指令：

• M=moveto(M X,Y)：將畫筆移動到指定的座標位置，但未發生繪製
• L=lineto(L X,Y)：畫直線到指定的座標位置
• H=horizontal lineto( H X)：畫水平線到指定的X座標位置
• V=vertical lineto(V Y )：畫垂直線到指定的Y座標
• C=curveto(C ,X1,Y1,X2,Y2,ENDX,ENDY)：三次貝茲路徑
• S=smooth curveto(S X2,Y2,ENDX,ENDY)：三次貝茲路徑
• Q=quadratic Belzier curve(Q X Y,ENDX,ENDY)：二次方貝茲曲線
• T=smooth quadratic Belzier curvrto(T,ENDX,ENDY)：映射前面路徑的終點
• A=elliptical Are(A RX,RY,XROTATION,FLAG1FLAG2,X,Y)：弧線
• Z=closepath()：關閉路徑

使用上面指令時，需要注意以下幾點：

• 座標軸以（0，0）位中心，X軸水平向右，Y軸水平向下
• 所有指令大小寫均可，大寫絕對位置，參照全域座標系，小寫相對定位，參照父容器座標系
• 指令和資料間的空格可以無視
• 同一指令出現多次可以只用一個

• L
  繪製直線的指令是“L”，代表從當前點繪製直線到給定點，“L”之後的參數是一個點座標，同時，還可以使用“H”和“V”指令來繪製水平、豎直線，後面的參數是x座標或y座標
• M
  M指令類似Android繪圖中的path類moveto方法，即代表畫筆移動到某一點，但並不發生繪圖動作
• A
  A指令是用來繪製一條弧線，且允許弧線不閉合，可以把A指令繪製的弧度想象成橢圓的某一段，A指令一下有七個參數
  
  • RX,RY：所在的橢圓的半軸大小
  • XROTATION：橢圓的X軸與水平方向順時針方向的夾角，可以想象成一個水平的橢圓饒中心點順時針旋轉XROTATION 的角度
  • FLAG1：只有兩個值，1表示大角度弧度，0為小角度弧度
  • FLAG2：只有兩個值，確定從起點到終點的方向1順時針，0逆時針
  • X，Y軸：終點座標

• 線上可視化SVG編輯器官網：http://editor.method.ac/
• 優秀的離線SVG編輯器：Inkscape

Android5.X提供了兩個API來支援SVG：

• VectorDrawable：在XML中可以建立一個靜態SVG圖形
• AnimatedVectorDrawable：給VectorDrawable提供動畫效果

VectorDrawable的使用是通過<vector>標籤來聲明的：

如果做過Web的應該對viewport應該很熟悉

• height：表示SVG的高度200dp
• width：表示SVG的寬度200dp
• viewportHeight：表示SVG圖形被劃分成100份
• viewportWidth：表示SVG圖形被劃分成100份
• 如果在繪圖中使用座標（50,50），則意味著該座標為正中間

接下來，給<vector>標籤增加顯示path：

然後就可以在布局檔案中直接使用：

：這是一個填充的圖形，因為我們用的是fillColor

如果要繪製一個非填充的圖形，使用下面的代碼：

：

AnimatedVectorDrawable使用：Google工程師將其比喻為一個膠水，通過其串連靜態VectorDrawable和動態objectAnimator

首先在XML檔案中通過<animated-vector>標籤來聲明對AnimatedVectorDrawable的使用：

特別注意的是：這個target裡面的name要和VectorDrawable的name對應，animation要和動畫資源檔案對應

對應的VectorDrawable檔案：

對應的animation檔案：

特別注意的是：在<group>標籤和<path>標籤中添加了rotate、fillColor、pathData等屬性，那麼可以通過objectAnimator指定android:propertyName=”XXXX”屬性來控制哪一種屬性，如果指定屬性為pathData，那麼需要添加一個屬性——android:valueType=”pathType”來告訴系統進行pathData的變換

在布局檔案中使用：

在Activity中開啟動畫：

• 線圖動畫……見經典代碼回顧案例一
• 類比三球儀……見經典代碼回顧案例二
• 軌跡動畫……見經典代碼回顧案例三

• 靈動菜單……見經典代碼回顧案例四
• 計時器動畫……見經典代碼回顧案例五
• 下拉展開動畫……見經典代碼回顧案例六

定義我們的VectorDrawable托福口語

定義兩個Path的objectAnimator，從path1到path2

定義AnimatedVectorDrawable串連VectorDrawable和objectAnimator

布局檔案中使用這個AnimatedVectorDrawable

代碼中啟動動畫

定義我們的VectorDrawable

定義兩個objectAnimator，代碼都是一樣的

定義AnimatedVectorDrawable串連VectorDrawable和objectAnimator

布局檔案中使用這個AnimatedVectorDrawable

代碼中啟動動畫

定義我們的VectorDrawable

定義兩個objectAnimator，代碼都是一樣的

定義AnimatedVectorDrawable串連VectorDrawable和objectAnimator

布局檔案中使用這個AnimatedVectorDrawable

代碼中啟動動畫

布局檔案

Activity檔案

布局檔案

Activity檔案

布局檔案

Activity檔案

經典回顧源碼下載

github：https://github.com/CSDNHensen/QunYingZhuang

Android群英傳知識點回顧——第七章：Android動畫機制與提示