寫在前面的幾句話
<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的語法，什么都能繪制的出來~！
那么怎么在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();
}
}
雖然和上面的效果不是一模一樣，但是完成的功能是一致的
