Android 動畫基礎

一. View 動畫

分為四種:平移,縮放,旋轉,漸變,他們之間有很多共性,所以有一個共同的父類 Animation,存放一些動畫共有的屬性

  1. Animation

    • duration 時長
    • fillAfter 停止后是否留在最后一幀
    • fillBefore 停止后是否回到第一幀,默認為 true
    • fillEnabledfillBefore 相同
    • repeatCount 重復的次數
    • repeatMode 重復的類型,分為 reverserestart ,前一個表示第一次動畫結束后從最后一幀往前,后一個表示第一次動畫結束后再從第一幀開始,默認是 restart
    • interpolator 差值器
  2. Translate 移動

    • android:fromXDelta 數值可以為 整數,百分數,百分數p ,例如 50、50%、50%p,
      • 50 表示以當前View左上角坐標加50px為初始點
      • 50% 表示以當前View的左上角加上當前View寬高的50%做為初始點
      • 50%p 表示以當前View的左上角加上父控件寬高的50%做為初始點,p 代表 parent
    • android:fromYDelta 同上
    • android:toXDelta 同上
    • android:toYDelta 同上
    <?xml version="1.0" encoding="utf-8"?>  
        <translate xmlns:android="http://schemas.android.com/apk/res/android"  
            android:fromXDelta="0"  
            android:fromYDelta="0"
            android:toXDelta="-80"  
            android:toYDelta="-80"  
            android:duration="2000">  
        </translate> 
    

    如果只是在 x 方向上移動,不在 y 方向上移動,只需要寫成下面這樣子, 不需要加上 y :

    <?xml version="1.0" encoding="utf-8"?>  
        <translate xmlns:android="http://schemas.android.com/apk/res/android"  
            android:fromXDelta="0"  
            android:toXDelta="-80"   
            android:duration="2000">  
        </translate> 
    

    ?

  3. Scale 縮放放大

    • android:fromXScale 浮點值,開始的時候 x方向 縮放或者放大比例
    • android:toXScale 浮點值,結束的時候 x方向 縮放或者放大比例
    • android:fromYScale 同上x
    • android:toYScale 同上x
    • android:pivotX 軸點 X 坐標,支持三種表示方式(數值,百分比,父 View 百分比)
    • android:pivotY 軸點 Y 坐標
  4. Rotate 旋轉

    • android:fromDegrees 順時針正值,逆時針負值
    • android:toDegrees
    • android:pivotX 軸點 X 坐標,支持三種表示方式
    • android:pivotY 軸點 Y 坐標
    <?xml version="1.0" encoding="utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromDegrees="0"  
        android:toDegrees="-650"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:duration="3000"  
        android:fillAfter="true">  
          
    </rotate>
    
  5. Alpha 漸變

    • android:fromAlpha 浮點值,0.0 - 1.0, 0為全透明,1位全不透明
    • android:toAlpha
    <?xml version="1.0" encoding="utf-8"?>  
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1"  
        android:duration="3000"  
        android:fillBefore="true">  
    </alpha> 
    
  6. Set 動作合集
    也是直接繼承自 Animation, 但是沒有自己的屬性,包裹其他動畫,實現幾個動畫同時發生

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:duration="3000"  
        android:fillAfter="true">  
          
      <alpha   
        android:fromAlpha="0.0"  
        android:toAlpha="1.0"/>  
        
      <scale  
        android:fromXScale="0.0"  
        android:toXScale="1.4"  
        android:fromYScale="0.0"  
        android:toYScale="1.4"  
        android:pivotX="50%"  
        android:pivotY="50%"/>  
        
      <rotate  
        android:fromDegrees="0"  
        android:toDegrees="720"  
        android:pivotX="50%"  
        android:pivotY="50%"/>  
             
    </set>
    
  7. View 動畫的使用

    Animation translateAnim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
    view.startAnimation(translateAnim);
    

二. 幀動畫

幀動畫的載體是一個 ImageViwe, 設置一個 AnimationDrawable

  1. 先定義一個 animation-list 類型的 xml 文件, 名字叫 item01 ,放在 drawable 文件夾下面
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/anim_fram_08"
        android:duration="80" />
    <item
        android:drawable="@drawable/anim_fram_09"
        android:duration="80" />
    <item
        android:drawable="@drawable/anim_fram_10"
        android:duration="80" />

</animation-list>
  1. 具體設置代碼:
ivAnim.setImageResource(R.drawable.item01);
AnimationDrawable animationDrawable = (AnimationDrawable) ivAnim.getDrawable();
animationDrawable.start();

三. 屬性動畫

屬性動畫原理是通過反射 setProp 方法不斷修改對象的屬性,例如 view 的 x 屬性值等,達到動畫的效果。

對于屬性值,只設置一個的時候,會認為當前對象該屬性的值為開始(getPropName反射獲取),然后設置的值為終點。如果設置兩個,則一個為開始、一個為結束

動畫更新的過程中,會不斷調用setPropName更新元素的屬性,所有使用ObjectAnimator更新某個屬性,必須得有getter(設置一個屬性值的時候)和setter方法

  1. ObjectAnimator
    對象動畫類,在構造的過程中需要傳遞一個對象,主要通過 of 方法 改變對象的屬性,因為是 String 類型的參數傳入,所以沒有代碼提示,可以通過 view.getXX 方法獲得具體的屬性名字和屬性的數據類型,第三個參數可以設置多個參數值,標識在這幾個參數之間變化, 例如下面就是先從 0 到 360,再從 360 到 120。
ObjectAnimator.ofFloat(view, "translationX", 0f, 360f,120f)
                        .setDuration(500)
                        .start();

Animator 有 addUpdateListener() 方法,用來設置在動畫執行過程中的回調監聽。

例如下面,隨便設置了一個屬性,因為屬性值是逐漸變化的,變化的過程中會有觸發回調,我們在回調里設置了scale 和 alpha 屬性

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "valuae", 1.0f, 0f, 1.0f)
                        .setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float animatValue = (float) animation.getAnimatedValue();
                        Log.i("value", animatValue + "");
                        view.setScaleX(animatValue);
                        view.setScaleY(animatValue);
                        view.setAlpha(animatValue);
                    }
                });
                animator.start();

PropertyValuesHolder 屬性持有器
用來保存一些屬性的變化過程,構造的時候只有屬性和變化的數值,方便組合動畫

PropertyValuesHolder scaleXHolder = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0f, 1.0f);
PropertyValuesHolder scaleYHolder = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0f, 1.0f);
PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f, 1.0f);
ObjectAnimator.ofPropertyValuesHolder(view, scaleXHolder, scaleYHolder, alphaHolder)
                        .setDuration(1000)
                        .start();
  1. ValueAnimator
    構造的時候只傳入變化的數值,然后在 animator.addUpdateListener 中根據動畫的數值手動進行動畫
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0f, 1.0f);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (float) animation.getAnimatedValue();
                        view.setScaleX(value);
                        view.setScaleY(value);
                        view.setAlpha(value);
                        view.setPivotX(0);
                        view.setPivotY(0);
                    }
                });
valueAnimator.start();
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容