Android View 動畫框架總結

Android View 動畫框架總結

1. 視圖動畫 ( Animation )：Android 3.0之前就存在
  • 優(yōu)點：簡單、效率比較高
  • 缺點：無法交互，比如某個View發(fā)生移動的視圖動畫后，這個View的點擊事件還需要點擊動畫前的位置
  • AlphaAnimation 透明度動畫
  • RotateAnimation 旋轉動畫
  • TranslateAnimation 平移動畫
  • ScaleAnimation 縮放動畫
  • AnimationSet 動畫集合，用來組合以上動畫
2. 屬性動畫 ( Animator )：Android 3.0之后增加的
  • 優(yōu)點：通過自身屬性的改變來進行動畫，可以交互
  • 缺點：復雜
  • ObjectAnimator
  • ValueAnimator
  • PropertyValuesHolder 類似AnimationSet
  • AnimatorListener 屬性動畫監(jiān)聽器
    • onAnimationStart() 動畫開始
    • onAnimationRepeat() 動畫再次播放
    • onAnimationEnd() 動畫結束
    • onAnimationCancel() 動畫取消
  • AnimatorSet 和之前PropertyValuesHolder類似，但是更強，可以準確的確定動畫順序
  • 屬性動畫的簡單調用方法 ---> View的animate方法
    • view.animate().alpha(0).y(300).setDuration(300)....start();
3. 布局動畫

布局動畫是指作用在ViewGroup上，給ViewGroup增加View時添加一個過渡動畫。

最簡單的方式是在ViewGroup的xml中添加以下屬性

android:animateLayoutChanges="true"

當ViewGroup添加子View時候會調用Android默認的顯示動畫(逐漸出現(xiàn))，無法自定義。

還可以通過LayoutAnimationController自定義子View的過渡動畫

LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
//設置過渡動畫
ScaleAnimation sa = new ScaleAnimation(0,1,0,1);
sa.setDuration(2000);
//設置布局動畫的顯示屬性
//參數(shù)1: 需要作用的動畫
//參數(shù)2: 每個子View顯示的delay時間
LayoutAnimationController lac = new LayoutAnimationController(sa,0.5F);
//子View顯示順序
//LayoutAnimationController.ORDER_NORMAL -- 順序
//LayoutAnimationController.ORDER_RANDOM -- 隨機
//LayoutAnimationController.ORDER_REVERSE -- 反序
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
ll.setLayoutAnimation(lac);

通過以上代碼給LinearLayout增加了一個視圖動畫，讓子View出現(xiàn)的時候是放大出現(xiàn)的。

4.Interpolators(插值器)

插值器可以定義動畫的變化速率，比如先快后慢、一直加速、一直減速、等等

5.自定義視圖動畫
//創(chuàng)建3D Y軸旋轉動畫，繼承視圖動畫類
public class RotateY3DAnimation extends Animation {

    public static final String TAG = RotateY3DAnimation.class.getSimpleName();

    //Y軸旋轉角度
    private int mRotateY;

    //Camera類封裝了openGL 的 3D 動畫
    private Camera mCamera;

    //動畫初始化時候回調
    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        //默認時長2000ms
        setDuration(2000);
        //動畫結束后保留狀態(tài)
        setFillAfter(true);
        //設置插值器為回彈插值器
        setInterpolator(new BounceInterpolator());
        //Y軸旋轉45度
        mRotateY = 45;
        //初始化Camera
        mCamera = new Camera();
    }

    //動畫執(zhí)行期間回調
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        //通過改變matrix來實現(xiàn)動畫
        Matrix matrix = t.getMatrix();
        mCamera.save();
        mCamera.rotateY(mRotateY * interpolatedTime);
        mCamera.getMatrix(matrix);
        mCamera.restore();
    }

}
6. SVG矢量動畫 Android 5.0之后

6.1 什么是SVG？

  • 可伸縮矢量圖形（Scalable Vector Craphics）
  • 定義用于網(wǎng)絡的基于矢量的圖形
  • 使用XML格式定義圖形
  • 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
  • 萬維網(wǎng)聯(lián)盟的標準
  • 諸如DOM和XSL之類的W3C標準是一個整體

6.2 SVG與Bitmap對比

  • Bitmap通過在每個像素點上存儲色彩信息來表達圖形，SVG是一個繪制標準。
  • SVG不會失真，Bitmap需要為不同分辨率設計多套圖，SVG不用。

6.3 使用<path>標簽創(chuàng)建SVG，就像用指令方式控制畫筆在紙上繪制。

  • 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 curve(T endx,endy) 二次貝塞爾曲線
  • A = elliptical Arc (A rx,ry,xrotation,flag1,flag2,x,y) 弧線
  • Z = closepath (Z) 關閉路徑
  • 使用指令時候使用（左上角為原點，向右為x軸正方向，向左為x軸負方向）
  • 指令大小寫區(qū)別在于參考坐標系不同，小寫相對與之前繪制的結束點定位，大寫參照父容器坐標系

6.4 SVG在線編輯器

6.5 android中使用SVG

適配5.0~3.0系統(tǒng)

  • 引入新的兼容庫 compile 'com.android.support:appcompat-v7:23.2.0'或者比這還新的
  • build.gradle 中加入以下一行代碼
        defaultConfig {        
            vectorDrawables.useSupportLibrary = true    
        }
  • 在xml中使用AppCompatImageView代替ImageView
  • 在AppCompatImageView中使用app:srcCompat代替android:src

使用方式：在drawable文件夾下創(chuàng)建xml文件

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    
    <!--
        android:width="200dp"
        android:height="200dp"
        中200dp是任意取的，主要配合
        android:viewportHeight="100"
        android:viewportWidth="100"
        使用。

        android:viewportHeight="100"
        android:viewportWidth="100"
        確定了x,y軸最大值
        相當于將200dp劃分成100份，每一份2dp
        之后svg指令中：50，50意味著正中間，是距離左邊100dp，距離頂部100dp的位置
    -->

    <group
        android:name="test"
        android:pivotX="50"
        android:pivotY="50"
        android:rotation="0">

        <!--
            pivotX、pivotY設置了旋轉的中心點
            rotation設置了旋轉角度，順時針方向
        -->

        <path
            android:fillColor="@color/colorPrimary"
            android:pathData="M 25 50
            a 25 25 0 1 0 50 0
            "
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="2" />
    </group>
</vector>

6.6 SVG動畫
第一步：創(chuàng)建SVG圖片，在drawable文件夾下創(chuàng)建xml文件

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <path
            android:name="path1"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20 80
            L 50 80 80 80"
            />
        <path
            android:name="path2"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="M 20 20
            L 50 20 80 20"
            />
    </group>
</vector>

第二步：創(chuàng)建在animator文件夾下創(chuàng)建屬性動畫

animator1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20 80 L 50 80 80 80"
    android:valueTo="M 20 80 L 50 50 80 80"
    android:valueType="pathType">

</objectAnimator>

animator2.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20 20
            L 50 20 80 20"
    android:valueTo="M 20 20
            L 50 50 80 20"
    android:valueType="pathType">

</objectAnimator>

第三步：將SVG圖片和動畫結合，在drawable文件夾下創(chuàng)建animated-vector文件

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/arc"
    tools:targetApi="lollipop">

    <target
        android:name="path1"
        android:animation="@animator/animator1" />

    <target
        android:name="path2"
        android:animation="@animator/animator2" />

</animated-vector>

第四步：將SVG動畫設置給ImageView

activity_main.xml中添加節(jié)點：

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ffffff"
        app:srcCompat="@drawable/animate_arc" />

第五步：執(zhí)行動畫屬性動畫

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        AppCompatImageView iv = findViewById(R.id.iv);

        final Animatable animatable = (Animatable) iv.getDrawable();
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animatable.start();
            }
        });
    }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容