寫在前面的幾句話

<p>
上面一篇對Touch Feedback (觸摸反饋)，Reveal Effect (揭露效果)，Curved Motion (曲線運動)，View State Changes (視圖狀態改變)動畫效果在5.0及5.0以下的實現效果進行了分析，這篇主要對于Animate View Drawables (可繪矢量動畫)，Activity Transitions ( Activity 切換效果 )進行分析

一.Animate View Drawables (可繪矢量動畫)

可繪制矢量圖在拉伸時不會失真。AnimatedVectorDrawable類可以在可繪制矢量圖上面作用動畫。

通常需要在三個xml文件中定義可動的矢量圖：

一個矢量圖使用<vector>元素,放在res/drawable/下。

一個可動的矢量圖使用<animated-vector>元素，放在res/drawable/下。

一個或更多個動畫對象使用<objectAnimator>元素，放在res/anim/下。

可動矢量圖可以使用<group>和<path>元素。<group>元素定義一系列路徑或者子組，<path>元素定義可繪圖的路徑。

當你定義了一個想要作用動畫的矢量可繪制圖，使用android:name屬性給每個group和path指定一個唯一的名字，這樣你可以從動畫的定義中找到他們。

vector_smile.xml

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <path
        android:fillColor="#ff0"
        android:pathData=" M 50,50
    m -48,0
    a 48,48 0 1,0 96,0
    a 48,48 0 1,0 -96,0"/>
    <path
        android:fillColor="@android:color/black"
        android:pathData="M 35,40
    m -7,0
    a 7,7 0 1,0 14,0
    a 7,7 0 1,0 -14,0"/>
    <path
        android:fillColor="@android:color/black"
        android:pathData="M 65,40
    m -7,0
    a 7,7 0 1,0 14,0
    a 7,7 0 1,0 -14,0"/>
    <path
        android:name="mouth"
        android:strokeColor="@android:color/black"
        android:strokeWidth="4"
        android:strokeLineCap="round"
        android:pathData=" M 30,75
    Q 50,55 70,75"/>
</vector>

animatedvector_smile.xml

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

    <target
        android:animation="@anim/anim_smile"
        android:name="mouth"/>

</animated-vector>

anim_smile.xml

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="pathData"
    android:valueFrom="M 30,75
    Q 50,55 70,75"
    android:valueTo=" M 30,65
    Q 50,85 70,65"
    android:valueType="pathType"
    android:interpolator="@android:anim/accelerate_interpolator"/>

大家應該對pathData中的數字很感興趣把，

這里的其實是 SVG 標準指令，規則如下：

• 代碼中的 M 表示 MoveTo; l 表示 LineTo;z` 表示收尾閉合

• 矢量圖path從一個圖形到另一個，from 和 to 的路徑必須一致：相同數量的命令和相同數量的每個命令的參數

全部的指令使用一個字母表示，如 M，l

• 指令中的逗號、空格符可以被省略，如 M 100 100 L 200 20 → M100 100L200 200

• 連續使用的相同指令可以被省略，如M 100 200 L 200 100 L -100 -200 → M 100 200 L 200 100 -100 -200

• 大寫指令代碼絕對坐標，小寫指令代碼相對坐標

• Unicode U+0046 FULL STOP (“.”) 是唯一被允許的小數點。如數字 13,000.56 是不合法的

更多有關pathData語法的信息，請參閱SVG Path 的文檔參考。學好了PathData的語法，什么都能繪制的出來~！

圖1 5.0可繪矢量動畫效果

那么怎么在5.0版本以下實現相同的效果呢

其實SVG還是對Path的繪制，所以在5.0以下相同效果其實可以通過Canvas繪制出來

mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.YELLOW);
canvas.drawCircle(centerX, centerY, radius, mPaint);

mPaint.setColor(Color.BLACK);
canvas.drawCircle(centerX - radius / 3, centerY - radius / 3, eyesradius, mPaint);
canvas.drawCircle(centerX + radius / 3, centerY - radius / 3, eyesradius, mPaint);

mPaint.setStrokeWidth(20);
mPaint.setStyle(Paint.Style.STROKE);
mPath.reset();
mPath.moveTo(centerX - radius / 2, centerY + radius / 2);
mPath.quadTo(centerX, controlY, centerX + radius / 2, centerY + radius / 2);
canvas.drawPath(mPath, mPaint);

if (isAnim){
    if (controlY < centerY + radius){
        controlY = controlY + 2;
        invalidate();
    }
}

圖2 5.0以下可繪矢量動畫效果

雖然和上面的效果不是一模一樣，但是完成的功能是一致的

二.Activity Transitions ( Activity 切換效果 )