前往
大廳
主題

【Android筆記】Resource - 動畫(Animation, Animator)

LF(小魚) | 2021-02-19 13:49:36 | 巴幣 0 | 人氣 280


一、介紹:
分成兩種,屬性動畫(Property Animation)及顯示動畫(View Animation)(歡迎補充個適合的翻譯)

二、屬性動畫(Property Animation):
屬性動畫是以一定的時間修改物件"屬性"來達到動畫的效果,此類會放在res/animator/底下用XML來撰寫的檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<set>
  包含不同的動畫元素,例如:<objectAnimator>,<animator>,或是其他的<set>元素(備註1
  對應到AnimatorSet類別
  屬性:
  android:ordering(String)
    指定播放順序
說明
"sequentially" 依照順序播放
"together"(預設) 同時播放

<objectAnimator>
  在特定時間對特定對象的屬性進行動畫處理
  對應到ObjectAnimator類別
  屬性:
  android:propertyName(String)*
    動畫的屬性名,用來被呼叫的名字
android:valueTo(float, int or color)*
    動畫屬性結束的值,顏色必須是"#"加3個2位16進位數字
    例如:100, 10.57, #2196F3
  android:valueFrom(float, int or color)
    動畫屬性開始的值,預設為從get方法獲得的值
    例如:100, 10.57, #2196F3
  android:duration(int)
    動畫時間(毫秒),預設300
  android:startOffset(int)
    調用("start()")動畫後延遲的秒數,預設無延遲
  android:repeatCount(int)
    重複次數,可以是-1, 0或正整數,-1為無限重複,0為不重複,預設0
    例如:1,則動畫重複1次,共執行2次
  android:repeatMode(String)
    每次動畫結尾的行為,只在repeatCount為-1或正整數時生效
    可以是"reverse"和"repeat",前者每次執行會轉換方向,後者則是直接從頭開始
  android:valueType(String)
    如果value是顏色,請不要使用此屬性(備註2
描述
"intType" 指定動畫值是整數
"floatType"(默認) 指定動畫值是浮點數

<animator>
  指定時間執行動畫
  對應到ValueAnimator類別
  屬性:
  android:valueTo(float, int or color)*
    動畫屬性結束的值,顏色必須是"#"加3個2位16進位數字
    例如:100, 10.57, #2196F3
  android:valueFrom(float, int or color)*
    動畫屬性開始的值,預設為從get方法獲得的值
    例如:100, 10.57, #2196F3
  android:duration(int)
    動畫時間(毫秒),預設300
  android:startOffset(int)
    調用("start()")動畫後延遲的秒數,預設無延遲
  android:repeatCount(int)
    重複次數,可以是-1, 0或正整數,-1為無限重複,0為不重複,預設0
    例如:1,則動畫重複1次,共執行2次
  android:repeatMode(String)
    每次動畫結尾的行為,只在repeatCount為-1或正整數時生效
    可以是"reverse"和"repeat",前者每次執行會轉換方向,後者則是直接從頭開始
  android:valueType(String)
    如果value是顏色,請不要使用此屬性(備註2
描述
"intType" 指定動畫值是整數
"floatType"(默認) 指定動畫值是浮點數

範例(來自Android官方文件):
<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>


二、顯示動畫(View Anamation):
顯示動畫是以一定的時間播放圖片來達到動畫的效果,而此類又被分成兩種,捕間動畫(Tween Animation)及框架動畫(Frame Animation)(徵求更好的翻譯)

1. 補間動畫(Tween Animation)
捕間動畫是將圖形做旋轉,淡入淡出等操作所形成的動畫,此類會放在res/anim/底下用XML來撰寫的檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<set>
  包含不同的動畫元素,例如:<alpha>,<scale>,<translate>,<rotate>,或是其他的<set>元素
  對應到AnimationSet類別
  屬性:
android:interpolator(Interpolator Resource)
    插植器(備註3,影響動畫的改變方式,詳細之後說明
  android:shareInterpolator(boolean)
    是否要再子元素中共享插植器(備註3

<alpha>
  淡入或淡出動畫
  對應到AlphaAnimation類別
  屬性:
  繼承自Animation(備註3
  android:fromAlpha(float)
    初始不透明度,0.0到1.0(不透明)
  android:toAlpha(float)
    結束不透明度,0.0到1.0(不透明)

<scale>
  調整大小,中心點可透過pivotX和pivotY設定,預設為原點即最左上角
  對應到ScaleAnimation
  屬性:
  繼承自Animation(備註3
  android:fromXScale(float)
    初始X方向大小,原始1.0
  android:toXScale(float)
    結束X方向大小,原始1.0
  android:fromYScale(float)
    初始Y方向大小,原始1.0
  android:toYScale(float)
    結束Y方向大小,原始1.0
android:pivotX(float)
    縮放中心點X座標,縮放時X座標固定
  android:pivotY(float)
    縮放中心點Y座標,縮放時Y座標固定

<translate>
  垂直水平移動,除了繼承自Animation屬性外,皆支援以下3種表示法:
  -100到100以"%"結尾的百分比、-100到100以"%p"的與其父級相對的百分比、不帶後綴的浮點數表絕對位置
  對應到TranslateAnimation類別
  屬性:
  繼承自Animation(備註3
  android:fromXDelta(float, % or %p)
    初始X偏移量
  android:toXDelta(float, % or %p)
    結束X偏移量
  android:fromYDelta(float, % or %p)
    初始Y偏移量
  android:toYDelta(float, % or %p)
    結束Y偏移量

<rotate>
  旋轉
  對應到RotateAnimation類別
屬性:
  繼承自Animation(備註3
  android:fromDegrees(float)
    起始角度,單位為度
  android:toDegrees(float)
    結束角度,單位為度
  android:pivotX(float, % or %p)
    旋轉中心點X座標
  android:pivotY(float, % or %p)
    旋轉中心點Y座標

範例(來自Android官方文件):
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>


2. 框架動畫(Frame Animation):
框架動畫依照順序播放一系列圖像所形成的動畫,此類會放在res/drawble/底下用XML來撰寫的檔案
既然是XML檔,勢必會有規定的元素(Element)及屬性(Attribute):
元素:
<animation-list>*
  必須是根元素,包含一個或多個<item>元素
屬性:
  android:oneshot(boolean)
    是否循環播放動畫,false為循環,true為單次執行
<item>
  必須是<animation-list>的子元素
  屬性:
  android:drawable(Drawable Resource)
    可繪製的圖片或xml
  android:duration(int)
    持續時間

範例(來自Android官方文件):
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

備註1:好像還有<propertyValuesHolder>,但我不清楚功能,有待查證
備註2:Android文件上寫的,但我發現Android Studio是可以填入pathType, intType, floatType, colorType的
備註3:另開一篇說明





創作回應

更多創作