Android動(dòng)畫<第十一篇>：矢量圖動(dòng)畫

在完成矢量圖動(dòng)畫之前吧雹，必須了解矢量圖在Android中的代碼表示。Android Studio也可以制作自帶的矢量圖峭状，或者導(dǎo)入svg格式的圖片生成矢量圖的代碼。

我在Android Studio神器之Vector Asset這篇文章上已經(jīng)做了簡(jiǎn)單的介紹逼争。其中最為關(guān)鍵之處就是看懂矢量圖的代碼了优床。

（1）使用Vector Asset工具隨意生成一個(gè)矢量圖代碼

矢量圖的代碼如下：

<vector android:height="24dp" android:tint="#FF3950"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,6v3l4,-4 -4,-4v3c-4.42,0 -8,3.58 -8,8 0,1.57 0.46,3.03 1.24,4.26L6.7,14.8c-0.45,-0.83 -0.7,-1.79 -0.7,-2.8 0,-3.31 2.69,-6 6,-6zM18.76,7.74L17.3,9.2c0.44,0.84 0.7,1.79 0.7,2.8 0,3.31 -2.69,6 -6,6v-3l-4,4 4,4v-3c4.42,0 8,-3.58 8,-8 0,-1.57 -0.46,-3.03 -1.24,-4.26z"/>
</vector>

圖像如下：

圖片.png

以上是使用Vector Asset工具生成的矢量圖和矢量圖代碼。

android:width：表示是矢量圖的寬度誓焦；
android:height：表示矢量圖的高度胆敞；
android:viewportWidth：表示將矢量圖的寬分成N等分，這里是分成24等分杂伟；
android:viewportHeight：表示將矢量圖的高分成N等分移层，這里是分成24等分；
<path/>：表示一個(gè)路徑
android:pathData：表示路徑上的數(shù)據(jù)

<path> 可用的命令如下：

名稱 解釋
M = moveto(M X,Y) 將畫筆移動(dòng)到指定的坐標(biāo)位置
L = lineto(L X,Y) 畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X) 畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y) 畫垂直線到指定的Y坐標(biāo)位置
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 curveto(T ENDX,ENDY) 同樣二次貝塞爾曲線观话，更平滑
A = elliptical Arc(A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y) 弧線
Z = closepath() 關(guān)閉路徑

以上所有命令均允許小寫字母。大寫的字母是基于原點(diǎn)的坐標(biāo)系(偏移量)越平，即絕對(duì)位置频蛔；小寫字母是基于當(dāng)前點(diǎn)坐標(biāo)系(偏移量)灵迫，即相對(duì)位置。

（2）自己繪制一個(gè)矢量圖

按照上面說到的path命令晦溪，我們完全可以自己繪制一個(gè)簡(jiǎn)單的矢量圖

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <path
        android:strokeWidth="1"
        android:fillColor="#ffffff"
        android:pathData="M10,10 L20,10 z"
        android:strokeColor="#FFFF00" />

</vector>

這是一條直線瀑粥，如圖：

圖片.png

然而，更加復(fù)雜的矢量圖繪制難度很大三圆。

我們完全可以利用繪圖工具制作一個(gè)SVG圖片狞换，然后使用AS生成代碼，也可以使用AS自帶的Vector Asset工具制作SVG圖片舟肉。

然后哀澈，復(fù)雜的SVG生成的代碼必然也是更加的復(fù)雜，這樣就必須加深SVG的了解了度气。

（3）必須了解的API：VectorDrawable

VectorDrawable 一般是以 <vector> 為根標(biāo)簽定義的 XML 文件割按，<vector>標(biāo)簽下還可以有三種標(biāo)簽，分別是：<group>磷籍、<clip-path>适荣、<path>，下面分別貼出這幾種標(biāo)簽對(duì)應(yīng)的屬性院领。

<vector> 定義這個(gè)矢量圖
android:name 矢量圖的名字
android:width 矢量圖的內(nèi)部(intrinsic)寬度,支持所有Android系統(tǒng)支持的尺寸弛矛，通常使用dp
android:height 矢量圖的內(nèi)部(intrinsic)高度
android:viewportWidth 矢量圖視圖的寬度，視圖就是矢量圖path路徑數(shù)據(jù)所繪制的虛擬畫布
android:viewportHeight 矢量圖視圖的高度
android:tint 矢量圖的tint顏色比然。默認(rèn)是沒有tint顏色的
android:tintMode 矢量圖tint顏色的Porter-Duff混合模式丈氓，默認(rèn)值為src_in。(src_in,src_over,src_atop,add,screen,multiply)
android:autoMirrored 設(shè)置當(dāng)系統(tǒng)為RTL(right-to-left)布局的時(shí)候强法，是否自動(dòng)鏡像該圖片万俗。比如阿拉伯語(yǔ)
android:alpha 該圖片的透明度屬性
<group> 設(shè)置路徑做動(dòng)畫的關(guān)鍵屬性的
android:name 定義group的名字
android:rotation 定義該group的路徑旋轉(zhuǎn)多少度
android:pivotX 定義縮放和旋轉(zhuǎn)該group時(shí)候的X參考點(diǎn)。該值相對(duì)于vector的viewport值來指定的饮怯。
android:pivotY 定義縮放和旋轉(zhuǎn)該 group 時(shí)候的Y參考點(diǎn)闰歪。該值相對(duì)于vector的viewport值來指定的。
android:scaleX 定義X軸的縮放倍數(shù)
android:scaleY 定義Y軸的縮放倍數(shù)
android:translateX 定義移動(dòng)X軸的位移蓖墅。相對(duì)于vector的viewport值來指定的库倘。
android:translateY 定義移動(dòng)Y軸的位移。相對(duì)于vector的viewport值來指定的
<path> 路徑
android:name 定義該path的名字论矾，這樣在其他地方可以通過名字來引用這個(gè)路徑
android:pathData 和SVG中d元素一樣的路徑信息教翩。
android:fillColor 定義填充路徑的顏色，如果沒有定義則不填充路徑
android:strokeColor 定義如何繪制路徑邊框贪壳，如果沒有定義則不顯示邊框
android:strokeWidth 定義路徑邊框的粗細(xì)尺寸
android:strokeAlpha 定義路徑邊框的透明度
android:fillAlpha 定義填充路徑顏色的透明度
android:trimPathStart 從路徑起始位置截?cái)嗦窂降谋嚷时ヒ冢≈捣秶鷱?到1；注意從一半到起始動(dòng)畫為from-0.5-to-0
android:trimPathEnd 從路徑結(jié)束位置截?cái)嗦窂降谋嚷剩≈捣秶鷱?到1路捧；注意從一半到結(jié)束動(dòng)畫為from-0.5-to-1.0
android:trimPathOffset 設(shè)置路徑截取的范圍关霸，取值范圍從0到1
android:strokeLineCap 設(shè)置路徑線帽的形狀，取值為 butt, round, square.
android:strokeLineJoin 設(shè)置路徑交界處的連接方式杰扫，取值為 miter,round,bevel.
android:strokeMiterLimit 設(shè)置斜角的上限
<clip-path> 定義當(dāng)前繪制的剪切路徑队寇。注意，clip-path 只對(duì)當(dāng)前的 group 和子 group 有效
android:name 定義clip-path的名字
android:pathData android:pathData的取值一樣章姓。

查看以上標(biāo)簽屬性佳遣，我們發(fā)現(xiàn)<group>標(biāo)簽其實(shí)是為動(dòng)畫存在的，它本身對(duì)矢量圖的繪制關(guān)系不大凡伊，而這個(gè)動(dòng)畫叫做矢量圖動(dòng)畫零渐。

那么，這個(gè)動(dòng)畫到底怎么實(shí)現(xiàn)呢系忙？這里還需要了解一個(gè)接口：AnimatedVectorDrawable

（4）必須了解的API：AnimatedVectorDrawable

一般情況诵盼，表示一張矢量圖不需要group標(biāo)簽，但是如果涉及到動(dòng)畫的話银还，可能就需要將一個(gè)或者多個(gè)路徑進(jìn)行分組风宁。

AnimatedVectorDrawable通過ObjectAnimator或AnimatorSet對(duì)VectorDrawable的某個(gè)屬性作一個(gè)矢量資源的動(dòng)畫。

AnimatedVectorDrawable就是矢量圖動(dòng)畫蛹疯，完成矢量圖動(dòng)畫的要素有三戒财，如下：

  • 一張矢量圖，即以vector為標(biāo)簽的xml文件
  • 一個(gè)動(dòng)畫捺弦，objectAnimator或者AnimatorSet
  • AnimatedVectorDrawable饮寞，即以animated-vector為標(biāo)簽的xml文件
【舉例】 實(shí)現(xiàn)左右箭頭移動(dòng)
41.gif

[第一步] 選擇并自動(dòng)生成一張矢量圖

圖片.png

生成的矢量圖代碼如下：

<vector
    android:height="24dp"
    android:tint="#3A2DFF"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3zM21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
</vector>

[第二步] 拆分矢量圖的兩個(gè)箭頭

矢量圖的路徑一般以Z（z）為結(jié)尾，根據(jù)這個(gè)特性列吼，將矢量圖拆分幽崩，拆分后的代碼如下：

<vector
    android:height="240dp"
    android:tint="#3A2DFF"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="240dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:name="left">
        <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z"/>
    </group>
    <group android:name="right">
        <path android:fillColor="#FF000000" android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
    </group>
</vector>

[第三步] 準(zhǔn)備好左右移動(dòng)的動(dòng)畫

anim_left.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="-10">
</objectAnimator>

anim_right.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="10">
</objectAnimator>

[第四步] animated-vector編寫

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_swap_horiz_black_24dp">
    <target
        android:animation="@animator/anim_left"
        android:name="left">
    </target>
    <target
        android:animation="@animator/anim_right"
        android:name="right">
    </target>
</animated-vector>

其中，ic_swap_horiz_black_24dp為矢量圖冈欢，animation為某動(dòng)畫歉铝，name和矢量圖group標(biāo)簽的name對(duì)應(yīng)。

[第五步] 設(shè)置src

<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/animatedvector"/>

這里需要注意的是凑耻，如果設(shè)置background動(dòng)畫是無效的，需要設(shè)置src才有動(dòng)畫效果柠贤。

[第六步] 在代碼中執(zhí)行動(dòng)畫

        case R.id.button:
            Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
            if (drawable instanceof Animatable){
                ((Animatable)drawable).start();
            }
            break;

但是香浩，我們發(fā)現(xiàn)，完成一個(gè)矢量圖動(dòng)畫需要建立多個(gè)xml文件臼勉，為了解決這個(gè)問題邻吭，可以將矢量圖所用到的xml合并。

合并之后的xml如下：

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

    <aapt:attr name="android:drawable">

        <vector
            android:height="240dp"
            android:tint="#3A2DFF"
            android:viewportHeight="24.0"
            android:viewportWidth="24.0"
            android:width="240dp"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <group android:name="left">
                <path android:fillColor="#FF000000" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z"/>
            </group>
            <group android:name="right">
                <path android:fillColor="#FF000000" android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
            </group>
        </vector>

    </aapt:attr>

    <target
        android:name="left">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:repeatCount="infinite"
                android:propertyName="translateX"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="-10">
            </objectAnimator>
        </aapt:attr>
    </target>
    <target
        android:name="right">

        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="1000"
                android:repeatCount="infinite"
                android:propertyName="translateX"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="10">
            </objectAnimator>
        </aapt:attr>

    </target>
</animated-vector>

使用時(shí)宴霸，只要直接設(shè)置src并且執(zhí)行動(dòng)畫即可囱晴。

<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/animatedvector"/>



    Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
    if (drawable instanceof Animatable){
        ((Animatable)drawable).start();
    }
（5）Shape Shifter工具的基本使用

[第一步] 打開網(wǎng)頁(yè)在線編輯

https://shapeshifter.design/

圖片.png

[第二步] 文件導(dǎo)入

圖片.png

在本地選擇一個(gè)SVG格式的矢量圖或者Vector Drawble膏蚓，如下：

導(dǎo)入之后的圖片如下：

圖片.png

[第三步] 查看文件

圖片.png

點(diǎn)擊圖中的path，可以查看路徑代碼

圖片.png

我們可以對(duì)這個(gè)路徑進(jìn)行修改畸写，比如修改顏色

圖片.png

再看驮瞧，圖中的網(wǎng)狀線條，其實(shí)就是給矢量圖分成了24等份方便坐標(biāo)表示枯芬，這里的pathData就是根據(jù)坐標(biāo)繪制軌跡的论笔。

[第四步] 設(shè)置動(dòng)畫時(shí)長(zhǎng)

圖片.png

默認(rèn)時(shí)長(zhǎng)為300ms，點(diǎn)擊修改動(dòng)畫時(shí)長(zhǎng)為1秒千所。

圖片.png

[第五步] 考慮好自己想要完成的動(dòng)畫狂魔，比如讓整個(gè)圖片進(jìn)行旋轉(zhuǎn)

結(jié)合group標(biāo)簽的知識(shí)，group標(biāo)簽的功能有：設(shè)置錨點(diǎn)淫痰、旋轉(zhuǎn)最楷、縮放、平移待错。

所以這里的旋轉(zhuǎn)動(dòng)畫可以使用group標(biāo)簽來完成管嬉。

[第六步] 添加group標(biāo)簽，并將path添加到group標(biāo)簽中

圖片.png

點(diǎn)擊圖中的“+”朗鸠，添加一個(gè)group圖層

圖片.png

并將path拖入group中

圖片.png

[第七步] 為group添加旋轉(zhuǎn)動(dòng)畫

圖片.png

如圖蚯撩，修改group的初始值，將錨點(diǎn)調(diào)整到圖片中央（圖片分成了24等份）

圖片.png

點(diǎn)擊右上角的“鬧鐘”圖標(biāo)烛占，添加“rotation”字段

圖片.png

在時(shí)間線區(qū)域不自動(dòng)生成一個(gè)綠色時(shí)間線胎挎，正好與字段“rotation”字段平行，選中綠色時(shí)間線忆家，綠色時(shí)間線變?yōu)樗{(lán)色時(shí)間線犹菇，在屏幕右上角出現(xiàn)該時(shí)間線的屬性：

圖片.png

startTime:開始時(shí)間
endTime：結(jié)束時(shí)間
interpolator：動(dòng)畫插值器
fromValue：動(dòng)畫的初始旋轉(zhuǎn)角度
toValue：動(dòng)畫的結(jié)束旋轉(zhuǎn)角度

圖片.png

將動(dòng)畫時(shí)間改為1000ms，任意選擇動(dòng)畫插值器芽卿，將動(dòng)畫角度變化范圍調(diào)整為0~360度揭芍。

[第八步] 播放動(dòng)畫

197.gif

[第九步] 導(dǎo)出矢量圖動(dòng)畫文件

圖片.png

最后，直接導(dǎo)出文件即可卸例，點(diǎn)擊Export-->Animated Vector Drawable称杨。

生成的代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="240dp"
            android:height="240dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="group"
                android:pivotX="12"
                android:pivotY="12">
                <path
                    android:name="path"
                    android:pathData="M 12 6 L 12 9 L 16 5 L 12 1 L 12 4 C 7.58 4 4 7.58 4 12 C 4 13.57 4.46 15.03 5.24 16.26 L 6.7 14.8 C 6.25 13.97 6 13.01 6 12 C 6 8.69 8.69 6 12 6 Z M 18.76 7.74 L 17.3 9.2 C 17.74 10.04 18 10.99 18 12 C 18 15.31 15.31 18 12 18 L 12 15 L 8 19 L 12 23 L 12 20 C 16.42 20 20 16.42 20 12 C 20 10.43 19.54 8.97 18.76 7.74 Z"
                    android:fillColor="#ff0000"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="1000"
                android:valueFrom="0"
                android:valueTo="360"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

設(shè)置這個(gè)矢量圖動(dòng)畫

<ImageView
    android:id="@+id/imageview"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_centerInParent="true"
    android:src="@drawable/yuan_anim"/>

最后再代碼中播放動(dòng)畫

    Drawable drawable = ((ImageView)findViewById(R.id.imageview)).getDrawable();
    if (drawable instanceof Animatable){
        ((Animatable)drawable).start();
    }

演示效果如下：

198.gif
（6）Shape Shifter工具的Group屬性

group標(biāo)簽除了旋轉(zhuǎn)動(dòng)畫之外以，還有pivotX筷转、pivotY姑原、scaleX、scaleY呜舒、translateX锭汛、translateY等屬性可以設(shè)置動(dòng)態(tài)變化。

下面來一一舉例：

[pivotX]和[pivotY]：設(shè)置錨點(diǎn)

上面圖形的旋轉(zhuǎn)動(dòng)畫的錨點(diǎn)的取值是（12,12），這個(gè)值從動(dòng)畫開始到動(dòng)畫結(jié)束沒有發(fā)生變化唤殴，下面將錨點(diǎn)也隨著時(shí)間動(dòng)畫變化呢般婆？

圖片.png
199.gif

[scaleX]和[scaleY]：動(dòng)態(tài)縮放

圖片.png
200.gif

[translateX]和[translateY]：動(dòng)態(tài)平移

【略】

（7）Shape Shifter工具的Path屬性

可被設(shè)置動(dòng)畫的字段有，pathData朵逝、fillColor蔚袍、fillAlpha、strokeColor廉侧、strokeAlpha页响、strokeWidth创译、trimPathStart褐奴、trimPathEnd、trimPathOffset懂从。

pathData： 和SVG中d元素一樣的路徑信息连舍，可以將路徑設(shè)置為動(dòng)畫開始和結(jié)束的取值没陡；

【略】

fillColor： 定義填充路徑的顏色，如果沒有定義則不填充路徑

201.gif

fillAlpha： 定義填充路徑顏色的透明度

202.gif

strokeColor： 定義如何繪制路徑邊框索赏，如果沒有定義則不顯示邊框

203.gif

strokeAlpha： 定義路徑邊框的透明度

【略】

strokeWidth： 定義路徑邊框的粗細(xì)尺寸

【略】

trimPathStart： 從路徑起始位置截?cái)嗦窂降谋嚷逝涡≈捣秶鷱?到1；

204.gif

這里需要注意的是潜腻，截?cái)嗟氖锹窂桨６翘畛渖蠄D的路徑加上了邊框融涣，這個(gè)邊框就是軌跡童番。

trimPathEnd： 從路徑結(jié)束位置截?cái)嗦窂降谋嚷剩≈捣秶鷱?到1威鹿；

205.gif

這里需要注意的是剃斧，截?cái)嗟氖锹窂剑翘畛渖瞿悖蠄D的路徑加上了邊框幼东，這個(gè)邊框就是軌跡。

trimPathOffset： 設(shè)置起點(diǎn)路徑和終點(diǎn)路徑偏移量的范圍科雳，取值范圍從0到1

206.gif

這里需要注意的是根蟹，截?cái)嗟氖锹窂剑翘畛渖ǘ桑蠄D的路徑加上了邊框娜亿，這個(gè)邊框就是軌跡。

（8）Shape Shifter工具自帶Demo解析

[Demo：Play to Pause]

207.gif
圖片.png

如圖所示蚌堵，完成這個(gè)動(dòng)畫需要兩個(gè)字段的動(dòng)畫：rotation、pathData

圖片.png

旋轉(zhuǎn)動(dòng)畫的字段在group標(biāo)簽上，取值范圍是0~90度吼畏。

圖片.png

路徑動(dòng)畫的字段在path標(biāo)簽上督赤，去世范圍是：從M 8 5 L 8 12 L 19 12 L 19 12 L 8 5 M 8 12 L 8 19 L 19 12 L 19 12 L 8 12到M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14。

在右上角有一個(gè)編輯按鈕泻蚊，點(diǎn)擊進(jìn)入編輯界面

圖片.png

編輯界面頂部有幾個(gè)按鈕：
加號(hào)按鈕的作用是添加一個(gè)點(diǎn)躲舌；
剪刀按鈕的作用是畫一條直線分割一個(gè)路徑，使路徑一分為二性雄；
雙向箭頭按鈕的作用是匹配動(dòng)畫前后的路徑没卸；
雙向箭頭后面的按鈕的作用是將選中的路徑上的點(diǎn)反轉(zhuǎn)，動(dòng)畫前后的點(diǎn)必須一一對(duì)應(yīng)秒旋，路徑上的點(diǎn)反轉(zhuǎn)之后動(dòng)畫也會(huì)發(fā)生改變约计；
左箭頭按鈕的作用是將路徑的點(diǎn)依次向上移動(dòng)一個(gè)單位；
右箭頭按鈕的作用是將路徑的點(diǎn)依次向下移動(dòng)一個(gè)單位迁筛；

總之煤蚌，為了將兩個(gè)毫不相關(guān)的路徑完成動(dòng)畫效果，必須將兩個(gè)路徑緊密的聯(lián)系在一起细卧，這個(gè)編輯界面可以將兩個(gè)毫不相關(guān)的路徑緊密的聯(lián)系在一起尉桩，最終完成動(dòng)畫。

代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="playtopause"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group
                android:name="group"
                android:pivotX="12"
                android:pivotY="12">
                <path
                    android:name="path"
                    android:pathData="M 8 5 L 8 19 L 19 12 Z"
                    android:fillColor="#000000"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="300"
                android:valueFrom="M 8 12 L 8 19 L 19 12 L 19 12 L 8 12 M 8 5 L 8 12 L 19 12 L 19 12 L 8 5"
                android:valueTo="M 5 6 L 5 10 L 19 10 L 19 6 L 5 6 M 5 14 L 5 18 L 19 18 L 19 14 L 5 14"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="300"
                android:valueFrom="0"
                android:valueTo="90"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

接下來的幾個(gè)Demo將直接貼出動(dòng)畫效果和代碼贪庙。

[Demo：Search to Close]

動(dòng)畫效果如下：

208.gif

代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="searchtoclose"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group android:name="oval_container">
                <path
                    android:name="oval"
                    android:pathData="M 13.389 13.389 C 15.537 11.241 15.537 7.759 13.389 5.611 C 11.241 3.463 7.759 3.463 5.611 5.611 C 3.463 7.759 3.463 11.241 5.611 13.389 C 7.759 15.537 11.241 15.537 13.389 13.389 Z"
                    android:strokeColor="#000000"
                    android:strokeWidth="1.8"/>
            </group>
            <path
                android:name="ne_stem"
                android:pathData="M 18 6 L 6 18"
                android:strokeColor="#000000"
                android:strokeWidth="1.8"
                android:trimPathStart="1"/>
            <path
                android:name="nw_stem"
                android:pathData="M 6 6 L 20 20"
                android:strokeColor="#000000"
                android:strokeWidth="1.8"
                android:trimPathStart="0.48"/>
        </vector>
    </aapt:attr>
    <target android:name="nw_stem">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="trimPathStart"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0.48"
                    android:valueTo="0"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="trimPathEnd"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="1"
                    android:valueTo="0.86"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="ne_stem">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathStart"
                android:startOffset="522"
                android:duration="314"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="oval">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathStart"
                android:startOffset="134"
                android:duration="416"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="oval_container">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="translateX"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0"
                    android:valueTo="-6.7"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="translateY"
                    android:startOffset="300"
                    android:duration="500"
                    android:valueFrom="0"
                    android:valueTo="-6.7"
                    android:valueType="floatType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Morphing animals]

動(dòng)畫效果如下：

209.gif

代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="morphinganimals"
            android:width="409dp"
            android:height="280dp"
            android:viewportWidth="409"
            android:viewportHeight="280">
            <path
                android:name="path"
                android:pathData="M 26.705 118.377 C 28.575 93.291 37.705 71.203 54.087 52.095 C 72.551 30.519 95.691 19.735 123.487 19.735 C 134.06 19.735 149.767 21.407 170.623 24.712 C 191.48 28.049 207.181 29.682 217.765 29.682 C 225.855 29.682 235.734 31.192 247.403 34.208 C 259.072 37.224 272.531 41.744 287.779 47.764 C 293.181 49.818 299.709 55.439 307.376 64.554 C 311.733 69.94 318.476 78.054 327.6 88.844 C 329.675 90.304 332.38 92.474 335.704 95.396 C 339.022 98.28 341.299 99.536 342.531 99.122 C 342.951 97.866 343.999 96.117 345.658 93.84 C 346.488 93.004 346.998 92.59 347.202 92.59 C 347.842 93.004 348.452 93.42 349.078 93.84 C 349.698 94.26 349.901 95.492 349.698 97.566 C 349.276 101.304 349.078 102.44 349.078 100.979 C 348.855 103.063 348.562 104.399 348.141 105.041 C 345.441 109.596 344.395 113.131 345.033 115.606 C 345.658 117.876 347.603 121.526 350.933 126.503 C 354.258 131.48 356.115 135.218 356.529 137.706 C 356.324 139.57 356.234 142.568 356.234 146.728 C 355.194 149.318 354.154 151.908 353.114 154.498 C 353.114 160.31 359.852 170.281 373.339 184.394 C 379.783 187.278 382.979 197.25 382.979 214.246 C 382.979 227.541 371.993 234.163 350.014 234.163 C 347.104 234.163 343.998 234.073 340.674 233.843 C 338.397 233.027 335.074 232.096 330.721 231.063 C 325.541 230.423 322.007 228.676 320.151 225.753 C 316.821 221.008 311.421 216.528 303.958 212.383 C 302.712 211.783 300.894 209.499 298.508 205.543 C 296.116 201.6 293.991 199.113 292.134 198.065 C 290.278 197.043 287.574 196.825 284.038 197.465 C 278.022 198.485 274.698 199.008 274.085 199.008 C 272.625 199.008 270.5 198.6 267.705 197.758 C 264.899 196.928 262.889 196.508 261.632 196.508 C 260.19 203.155 259.865 209.586 260.702 215.8 C 260.905 217.472 261.952 218.824 263.815 219.845 C 266.73 221.925 268.275 223.061 268.492 223.29 C 270.348 224.732 272.326 227.118 274.392 230.423 C 274.814 231.686 274.036 233.805 272.058 236.803 C 270.085 239.815 268.491 241.588 267.233 242.086 C 265.996 242.623 263.297 242.891 259.143 242.891 C 253.121 242.891 250.748 242.981 251.998 243.184 C 243.704 241.934 239.034 241.219 237.988 241.028 C 232.806 239.982 228.34 238.335 224.614 236.038 C 222.734 234.801 220.577 228.983 218.089 218.608 C 217.81 217.363 217.536 216.174 217.267 215.039 C 216.999 213.904 216.736 212.825 216.478 211.801 C 216.22 210.776 215.968 209.807 215.721 208.893 C 214.98 206.15 214.288 203.902 213.643 202.149 C 212.998 200.396 212.4 199.137 211.849 198.371 C 211.441 197.759 210.924 197.466 210.305 197.466 C 209.26 197.466 207.545 198.486 205.165 200.579 C 202.778 202.622 201.165 203.757 200.347 203.999 C 197.451 216.224 195.977 222.029 195.977 221.392 C 195.977 226.177 197.323 230.195 200.022 233.526 C 202.715 236.843 205.529 240.059 208.438 243.159 C 211.958 247.102 213.72 250.522 213.72 253.431 C 213.72 255.077 213.21 256.519 212.163 257.781 C 207.806 263.167 200.539 265.871 190.376 265.871 C 178.963 265.871 171.499 264.315 167.983 261.201 C 163.409 257.259 160.506 253.101 159.268 248.774 C 159.064 247.727 158.548 244.614 157.711 239.434 C 157.296 236.308 156.359 234.458 154.923 233.844 C 152.84 233.532 150.504 233.092 147.912 232.522 C 145.32 231.953 142.473 231.254 139.369 230.424 C 138.112 229.596 136.766 227.516 135.311 224.199 C 132.626 217.779 130.647 213.417 129.397 211.133 C 123.164 208.019 113.212 204.51 99.514 200.58 C 99.306 200.997 99.134 201.467 98.998 201.995 C 98.862 202.522 98.762 203.105 98.695 203.747 C 98.629 204.389 98.596 205.089 98.596 205.85 C 100.872 208.76 104.292 213.226 108.86 219.223 C 112.59 224.2 114.46 228.985 114.46 233.539 C 114.46 242.269 108.86 246.605 97.656 246.605 C 94.821 246.605 92.286 246.538 90.051 246.403 C 87.815 246.268 85.879 246.064 84.242 245.79 C 82.604 245.515 81.266 245.17 80.226 244.753 C 75.671 242.891 71.83 238.513 68.716 231.687 C 63.53 220.254 60.626 213.824 60.002 212.382 C 58.34 208.547 56.939 204.939 55.801 201.563 C 54.662 198.187 53.784 195.042 53.169 192.132 C 53.049 191.541 52.92 190.905 52.783 190.225 C 52.646 189.544 52.5 188.818 52.347 188.047 C 52.193 187.277 52.031 186.461 51.861 185.601 C 51.691 184.741 51.513 183.836 51.326 182.887 C 51.139 181.937 50.944 180.943 50.741 179.905 C 50.538 178.867 50.326 177.784 50.107 176.658 C 49.887 175.531 49.659 174.36 49.423 173.145 C 48.94 170.802 48.365 168.628 47.697 166.624 C 47.03 164.621 46.27 162.789 45.418 161.128 C 44.566 159.468 43.621 157.98 42.583 156.665 C 31.163 141.92 25.869 129.155 26.703 118.372 C 26.704 118.374 26.704 118.375 26.705 118.377"
                android:fillColor="#78909c"
                android:strokeWidth="1"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:duration="300"
                    android:valueFrom="M 217.765 29.683 C 225.855 29.683 235.734 31.193 247.403 34.209 C 259.072 37.224 272.53 41.744 287.779 47.764 C 293.183 49.818 299.71 55.439 307.378 64.555 C 311.735 69.94 318.479 78.055 327.602 88.844 C 329.676 90.305 332.381 92.475 335.705 95.396 C 339.023 98.28 341.3 99.537 342.532 99.122 C 342.952 97.866 343.999 96.117 345.658 93.84 C 346.487 93.004 346.998 92.589 347.202 92.589 C 347.84 93.004 348.452 93.419 349.077 93.84 C 349.696 94.261 349.9 95.492 349.696 97.566 C 349.275 101.304 349.077 102.44 349.077 100.979 C 348.854 103.065 348.561 104.399 348.14 105.043 C 345.441 109.599 344.395 113.133 345.033 115.608 C 345.658 117.879 347.603 121.528 350.934 126.505 C 354.258 131.482 356.115 135.22 356.529 137.708 C 356.325 139.572 356.235 142.57 356.235 146.73 C 355.975 147.377 355.715 148.025 355.455 148.672 C 355.195 149.32 354.935 149.968 354.675 150.615 C 354.416 151.263 354.156 151.91 353.896 152.558 C 353.636 153.205 353.376 153.852 353.116 154.5 C 353.116 155.953 353.537 157.666 354.379 159.639 C 355.222 161.612 356.485 163.844 358.17 166.336 C 361.541 171.32 366.596 177.34 373.34 184.397 C 379.784 187.281 382.981 197.253 382.981 214.249 C 382.981 227.545 371.994 234.167 350.015 234.167 C 347.106 234.167 343.999 234.078 340.675 233.848 C 338.398 233.031 335.074 232.1 330.722 231.066 C 325.542 230.428 322.008 228.68 320.151 225.758 C 316.821 221.012 311.423 216.532 303.959 212.386 C 302.714 211.786 300.896 209.503 298.51 205.547 C 296.118 201.604 293.993 199.116 292.136 198.069 C 290.28 197.048 287.575 196.831 284.04 197.47 C 278.024 198.49 274.7 199.014 274.087 199.014 C 272.627 199.014 270.502 198.605 267.707 197.763 C 266.304 197.348 265.1 197.035 264.09 196.826 C 263.079 196.617 262.263 196.512 261.634 196.512 C 260.191 203.16 259.866 209.591 260.703 215.805 C 260.906 217.477 261.953 218.829 263.816 219.85 C 266.731 221.93 268.276 223.066 268.493 223.296 C 270.349 224.737 272.327 227.123 274.394 230.428 C 274.815 231.691 274.037 233.81 272.059 236.808 C 270.087 239.82 268.493 241.593 267.235 242.091 C 265.997 242.627 263.298 242.895 259.145 242.895 C 253.122 242.895 250.749 242.984 251.999 243.188 C 243.706 241.938 239.036 241.223 237.989 241.032 C 232.808 239.986 228.342 238.339 224.616 236.043 C 222.734 234.805 220.578 228.987 218.09 218.613 C 217.252 214.878 216.463 211.64 215.722 208.897 C 214.981 206.154 214.289 203.906 213.644 202.153 C 212.999 200.4 212.401 199.141 211.85 198.375 C 211.442 197.763 210.925 197.47 210.306 197.47 C 209.26 197.47 207.544 198.491 205.164 200.583 C 202.778 202.625 201.164 203.76 200.347 204.003 C 197.451 216.227 195.977 222.032 195.977 221.395 C 195.977 226.18 197.323 230.199 200.022 233.529 C 202.715 236.847 205.529 240.063 208.438 243.163 C 211.959 247.106 213.72 250.526 213.72 253.435 C 213.72 255.081 213.21 256.523 212.163 257.786 C 207.806 263.171 200.539 265.876 190.376 265.876 C 178.962 265.876 171.498 264.319 167.982 261.206 C 163.408 257.263 160.505 253.104 159.267 248.778 C 159.063 247.731 158.547 244.618 157.71 239.438 C 157.295 236.312 156.358 234.462 154.922 233.849 C 152.839 233.536 150.502 233.096 147.911 232.527 C 145.319 231.957 142.472 231.258 139.368 230.429 C 138.111 229.6 136.765 227.52 135.31 224.203 C 132.625 217.784 130.646 213.421 129.396 211.137 C 123.162 208.023 113.21 204.514 99.512 200.584 C 99.304 201.001 99.132 201.471 98.996 201.998 C 98.86 202.525 98.76 203.109 98.693 203.75 C 98.627 204.392 98.594 205.093 98.594 205.854 C 100.871 208.763 104.291 213.229 108.859 219.226 C 112.591 224.203 114.461 228.988 114.461 233.542 C 114.461 242.271 108.859 246.609 97.656 246.609 C 94.821 246.609 92.286 246.542 90.051 246.407 C 87.815 246.272 85.879 246.068 84.242 245.794 C 82.605 245.52 81.267 245.175 80.227 244.758 C 75.671 242.896 71.83 238.519 68.717 231.692 C 63.53 220.259 60.627 213.829 60.002 212.387 C 56.678 204.718 54.4 197.956 53.169 192.137 C 53.029 191.448 52.877 190.697 52.714 189.885 C 52.551 189.074 52.377 188.201 52.191 187.267 C 52.006 186.333 51.809 185.338 51.601 184.282 C 51.549 184.018 51.496 183.751 51.442 183.479 C 51.389 183.208 51.335 182.932 51.28 182.653 C 51.225 182.374 51.17 182.091 51.113 181.805 C 51.057 181.518 51 181.228 50.942 180.934 C 50.712 179.757 50.47 178.52 50.217 177.222 C 49.964 175.925 49.7 174.567 49.424 173.15 C 48.7 169.635 47.768 166.5 46.629 163.752 C 45.489 161.005 44.142 158.642 42.585 156.671 C 31.164 141.925 25.87 129.159 26.705 118.377 C 26.705 118.377 26.705 118.377 26.705 118.377 C 27.328 110.015 28.758 101.986 30.994 94.29 C 33.23 86.593 36.273 79.229 40.122 72.197 C 43.971 65.165 48.626 58.464 54.087 52.095 C 72.551 30.519 95.691 19.736 123.488 19.736 C 134.06 19.736 149.767 21.408 170.623 24.712 C 175.837 25.546 180.729 26.274 185.3 26.897 C 189.87 27.519 194.119 28.036 198.046 28.449 C 201.974 28.862 205.581 29.17 208.867 29.376 C 212.153 29.581 215.119 29.683 217.765 29.683"
                    android:valueTo="M 223.174 43.413 C 229.201 43.413 235.048 46.903 240.731 53.875 C 246.401 60.846 249.686 64.336 250.575 64.336 C 253.418 64.336 256.262 64.336 259.105 64.336 C 277.541 64.336 291.822 73.563 301.939 92.016 C 304.605 97.181 308.678 104.766 314.19 114.788 C 314.8 115.903 315.42 116.986 316.053 118.037 C 316.685 119.087 317.328 120.105 317.983 121.091 C 318.637 122.076 319.303 123.029 319.98 123.95 C 320.657 124.871 321.345 125.759 322.044 126.615 C 322.743 127.471 323.453 128.294 324.175 129.085 C 324.896 129.877 325.628 130.635 326.372 131.362 C 327.115 132.088 327.869 132.782 328.635 133.444 C 329.4 134.106 330.176 134.735 330.963 135.332 C 331.75 135.93 332.548 136.494 333.357 137.027 C 337.435 139.692 341.536 141.759 345.659 143.225 C 349.783 144.69 353.928 145.554 358.096 145.813 C 361.993 145.993 366.265 145.279 370.882 143.671 C 374.961 141.887 379.035 140.097 383.111 138.313 C 383.111 138.313 383.111 138.313 385.774 144.222 C 372.65 154.296 360.143 159.491 348.252 159.851 C 335.485 160.206 321.725 157.104 307.009 150.561 C 319.598 165.115 330.43 173.985 339.48 177.164 C 338.771 177.879 338.061 178.594 337.352 179.309 C 329.368 177.889 321.693 175.136 314.329 171.053 C 306.965 166.97 299.912 161.557 293.172 154.818 C 289.623 156.939 286.075 159.06 282.526 161.181 C 282.526 161.895 281.863 162.646 280.531 163.44 C 279.2 164.237 278.613 164.889 278.791 165.423 C 279.505 167.729 283.148 173.395 289.707 182.397 C 296.272 191.431 299.552 196.206 299.552 196.725 C 299.552 198.318 297.508 199.906 293.429 201.502 C 289.352 203.093 287.14 204.864 286.785 206.812 C 286.425 208.405 286.949 210.353 288.379 212.645 C 289.789 214.951 290.503 216.348 290.503 216.896 C 290.503 218.072 290.158 219.101 289.469 219.984 C 288.779 220.867 287.745 221.603 286.367 222.193 C 284.989 222.784 283.266 223.228 281.2 223.526 C 280.122 223.69 276.746 223.788 271.077 223.788 C 269.304 223.788 267.614 223.722 266.008 223.589 C 264.402 223.456 262.88 223.257 261.441 222.992 C 260.002 222.727 258.647 222.396 257.375 221.998 C 256.739 221.799 256.124 221.584 255.53 221.352 C 254.936 221.121 254.363 220.872 253.811 220.608 C 252.707 220.078 251.686 219.482 250.75 218.821 C 249.813 218.16 248.96 217.432 248.191 216.639 C 247.571 215.963 246.972 215.192 246.395 214.329 C 245.819 213.466 245.264 212.509 244.731 211.459 C 243.666 209.359 242.688 206.885 241.8 204.04 C 240.911 201.194 240.112 197.976 239.402 194.386 C 238.688 190.683 237.454 184.056 235.681 174.503 C 226.635 176.809 217.453 178.539 208.137 179.692 C 198.821 180.846 189.37 181.423 179.785 181.423 C 178.72 181.423 177.647 181.416 176.566 181.401 C 175.486 181.387 174.397 181.365 173.3 181.336 C 172.203 181.307 171.098 181.27 169.985 181.226 C 168.872 181.183 167.75 181.131 166.621 181.073 C 165.492 181.015 164.355 180.949 163.21 180.876 C 162.828 180.851 162.445 180.826 162.062 180.8 C 161.678 180.774 161.294 180.747 160.908 180.72 C 160.523 180.692 160.137 180.664 159.75 180.634 C 158.588 180.546 157.419 180.451 156.241 180.348 C 155.064 180.246 153.878 180.136 152.685 180.018 C 151.491 179.901 150.289 179.776 149.08 179.643 C 147.87 179.511 146.652 179.371 145.426 179.224 C 144.2 179.077 142.966 178.922 141.724 178.76 C 144.034 184.62 147.317 194.386 151.589 208.045 C 142.716 206.798 132.062 205.027 119.65 202.719 C 119.038 203.645 118.436 204.517 117.843 205.336 C 117.251 206.154 116.669 206.92 116.096 207.631 C 115.523 208.343 114.961 209.001 114.408 209.605 C 112.75 211.419 111.181 212.75 109.702 213.598 C 108.222 214.446 106.833 214.811 105.533 214.692 C 103.803 214.561 101.884 214.247 99.777 213.75 C 98.723 213.501 97.622 213.207 96.474 212.866 C 95.326 212.526 94.131 212.14 92.889 211.708 C 92.06 211.42 91.211 211.112 90.341 210.783 C 89.471 210.454 88.581 210.105 87.669 209.736 C 86.757 209.367 85.824 208.977 84.871 208.567 C 82.01 207.337 78.961 205.925 75.724 204.329 C 72.527 202.735 70.933 200.332 70.933 197.134 C 70.933 196.072 71.209 194.712 71.762 193.056 C 72.314 191.4 73.143 189.447 74.247 187.199 C 75.352 184.951 76.732 182.408 78.387 179.57 C 80.866 175.315 82.771 171.701 84.101 168.729 C 85.431 165.757 86.186 163.426 86.365 161.737 C 86.723 158.712 85.849 154.559 83.719 149.228 C 81.055 142.305 79.544 137.796 79.189 135.651 C 79.545 135.651 79.902 135.651 80.258 135.651 C 79.548 133.522 78.838 131.392 78.128 129.263 C 69.959 138.133 62.505 144.613 55.763 148.692 C 47.948 153.481 38.721 156.6 28.082 157.997 C 25.954 155.885 24.541 154.818 23.826 154.818 C 36.952 149.132 49.916 140.18 62.682 127.929 C 63.22 127.395 66.581 125.01 72.805 120.734 C 76.344 118.432 78.472 115.701 79.189 112.503 C 83.618 94.765 92.668 82.239 106.33 74.962 C 117.505 69.112 133.216 66.19 153.436 66.19 C 162.664 66.19 171.453 66.807 179.785 68.042 C 183.687 69.112 189.905 70.364 198.418 71.775 C 199.133 64.713 201.619 58.443 205.875 52.967 C 210.669 46.598 216.434 43.413 223.174 43.413 C 223.174 43.413 223.174 43.413 223.174 43.413"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:duration="300"
                    android:valueFrom="#78909c"
                    android:valueTo="#bdbdbd"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="600"
                    android:duration="300"
                    android:valueFrom="M 223.174 43.413 C 229.201 43.413 235.048 46.903 240.731 53.875 C 246.401 60.846 249.686 64.336 250.575 64.336 C 253.418 64.336 256.262 64.336 259.105 64.336 C 277.541 64.336 291.822 73.563 301.939 92.016 C 304.605 97.181 308.678 104.766 314.19 114.788 C 314.8 115.903 315.42 116.986 316.053 118.037 C 316.685 119.087 317.328 120.105 317.983 121.091 C 318.637 122.076 319.303 123.029 319.98 123.95 C 320.657 124.871 321.345 125.759 322.044 126.615 C 322.743 127.471 323.453 128.294 324.175 129.085 C 324.896 129.877 325.628 130.635 326.372 131.362 C 327.115 132.088 327.869 132.782 328.635 133.444 C 329.4 134.106 330.176 134.735 330.963 135.332 C 331.75 135.93 332.548 136.494 333.357 137.027 C 337.435 139.692 341.536 141.759 345.659 143.225 C 349.783 144.69 353.928 145.554 358.096 145.813 C 361.993 145.993 366.265 145.279 370.882 143.671 C 374.961 141.887 379.035 140.097 383.111 138.313 C 383.111 138.313 383.111 138.313 385.774 144.222 C 372.65 154.296 360.143 159.491 348.252 159.851 C 335.485 160.206 321.725 157.104 307.009 150.561 C 319.598 165.115 330.43 173.985 339.48 177.164 C 338.771 177.879 338.061 178.594 337.352 179.309 C 329.368 177.889 321.693 175.136 314.329 171.053 C 306.965 166.97 299.912 161.557 293.172 154.818 C 289.623 156.939 286.075 159.06 282.526 161.181 C 282.526 161.895 281.863 162.646 280.531 163.44 C 279.2 164.237 278.613 164.889 278.791 165.423 C 279.505 167.729 283.148 173.395 289.707 182.397 C 296.272 191.431 299.552 196.206 299.552 196.725 C 299.552 198.318 297.508 199.906 293.429 201.502 C 289.352 203.093 287.14 204.864 286.785 206.812 C 286.425 208.405 286.949 210.353 288.379 212.645 C 289.789 214.951 290.503 216.348 290.503 216.896 C 290.503 218.072 290.158 219.101 289.469 219.984 C 288.779 220.867 287.745 221.603 286.367 222.193 C 284.989 222.784 283.266 223.228 281.2 223.526 C 280.122 223.69 276.746 223.788 271.077 223.788 C 269.304 223.788 267.614 223.722 266.008 223.589 C 264.402 223.456 262.88 223.257 261.441 222.992 C 260.002 222.727 258.647 222.396 257.375 221.998 C 256.739 221.799 256.124 221.584 255.53 221.352 C 254.936 221.121 254.363 220.872 253.811 220.608 C 252.707 220.078 251.686 219.482 250.75 218.821 C 249.813 218.16 248.96 217.432 248.191 216.639 C 247.571 215.963 246.972 215.192 246.395 214.329 C 245.819 213.466 245.264 212.509 244.731 211.459 C 243.666 209.359 242.688 206.885 241.8 204.04 C 240.911 201.194 240.112 197.976 239.402 194.386 C 238.688 190.683 237.454 184.056 235.681 174.503 C 226.635 176.809 217.453 178.539 208.137 179.692 C 198.821 180.846 189.37 181.423 179.785 181.423 C 178.72 181.423 177.647 181.416 176.566 181.401 C 175.486 181.387 174.397 181.365 173.3 181.336 C 172.203 181.307 171.098 181.27 169.985 181.226 C 168.872 181.183 167.75 181.131 166.621 181.073 C 165.492 181.015 164.355 180.949 163.21 180.876 C 162.828 180.851 162.445 180.826 162.062 180.8 C 161.678 180.774 161.294 180.747 160.908 180.72 C 160.523 180.692 160.137 180.664 159.75 180.634 C 158.588 180.546 157.419 180.451 156.241 180.348 C 155.064 180.246 153.878 180.136 152.685 180.018 C 151.491 179.901 150.289 179.776 149.08 179.643 C 147.87 179.511 146.652 179.371 145.426 179.224 C 144.2 179.077 142.966 178.922 141.724 178.76 C 144.034 184.62 147.317 194.386 151.589 208.045 C 142.716 206.798 132.062 205.027 119.65 202.719 C 119.038 203.645 118.436 204.517 117.843 205.336 C 117.251 206.154 116.669 206.92 116.096 207.631 C 115.523 208.343 114.961 209.001 114.408 209.605 C 112.75 211.419 111.181 212.75 109.702 213.598 C 108.222 214.446 106.833 214.811 105.533 214.692 C 103.803 214.561 101.884 214.247 99.777 213.75 C 98.723 213.501 97.622 213.207 96.474 212.866 C 95.326 212.526 94.131 212.14 92.889 211.708 C 92.06 211.42 91.211 211.112 90.341 210.783 C 89.471 210.454 88.581 210.105 87.669 209.736 C 86.757 209.367 85.824 208.977 84.871 208.567 C 82.01 207.337 78.961 205.925 75.724 204.329 C 72.527 202.735 70.933 200.332 70.933 197.134 C 70.933 196.072 71.209 194.712 71.762 193.056 C 72.314 191.4 73.143 189.447 74.247 187.199 C 75.352 184.951 76.732 182.408 78.387 179.57 C 80.866 175.315 82.771 171.701 84.101 168.729 C 85.431 165.757 86.186 163.426 86.365 161.737 C 86.723 158.712 85.849 154.559 83.719 149.228 C 81.055 142.305 79.544 137.796 79.189 135.651 C 79.545 135.651 79.902 135.651 80.258 135.651 C 79.548 133.522 78.838 131.392 78.128 129.263 C 69.959 138.133 62.505 144.613 55.763 148.692 C 47.948 153.481 38.721 156.6 28.082 157.997 C 25.954 155.885 24.541 154.818 23.826 154.818 C 36.952 149.132 49.916 140.18 62.682 127.929 C 63.22 127.395 66.581 125.01 72.805 120.734 C 76.344 118.432 78.472 115.701 79.189 112.503 C 83.618 94.765 92.668 82.239 106.33 74.962 C 117.505 69.112 133.216 66.19 153.436 66.19 C 162.664 66.19 171.453 66.807 179.785 68.042 C 183.687 69.112 189.905 70.364 198.418 71.775 C 199.133 64.713 201.619 58.443 205.875 52.967 C 210.669 46.598 216.434 43.413 223.174 43.413 C 223.174 43.413 223.174 43.413 223.174 43.413"
                    android:valueTo="M 257.626 36.194 C 265.402 36.194 275.248 36.678 287.192 37.616 C 304.062 38.951 314.87 42.093 319.604 47.036 C 322.069 49.519 325.106 54.381 328.703 61.598 C 332.312 69.403 335.343 74.731 337.808 77.576 C 338.849 76.249 339.793 75.135 340.645 74.235 C 341.497 73.335 342.256 72.65 342.926 72.184 C 346.908 69.141 349.834 67.147 351.722 66.214 C 351.722 71.14 352.061 73.933 352.731 74.597 C 353.384 75.25 356.1 75.775 360.834 76.154 C 364.716 76.393 368.114 77.448 371.028 79.32 C 373.941 81.192 376.37 83.882 378.313 87.388 C 380.256 90.894 381.714 95.218 382.686 100.359 C 383.659 105.5 384.145 111.459 384.145 118.235 C 384.145 123.353 383.865 129.136 383.294 135.583 C 382.992 138.992 382.591 142.194 382.09 145.188 C 381.59 148.183 380.99 150.97 380.291 153.549 C 379.593 156.128 378.796 158.499 377.901 160.661 C 377.006 162.824 376.012 164.778 374.921 166.523 C 373.83 168.268 372.642 169.804 371.356 171.131 C 370.207 172.25 367.129 173.433 362.099 174.669 C 357.091 175.899 353.908 177.84 352.591 180.492 C 351.731 182.107 350.877 184.476 350.026 187.605 C 349.175 190.734 348.327 194.622 347.479 199.274 C 345.754 209.89 344.331 216.692 343.207 219.729 C 341.782 217.838 340.358 215.948 338.933 214.057 C 336.473 209.216 334.318 204.999 332.469 201.397 C 330.621 197.796 329.079 194.812 327.846 192.436 C 322.722 183.337 317.61 178.603 312.492 178.219 C 308.895 177.84 303.305 179.175 295.732 182.194 C 290.032 184.666 284.447 187.126 278.95 189.586 C 277.308 190.03 275.665 190.475 274.023 190.919 C 272.38 191.363 270.738 191.808 269.095 192.252 C 267.453 192.696 265.81 193.141 264.168 193.585 C 259.049 195.66 255.546 199.443 253.646 204.946 C 252.894 211.766 253.08 216.983 254.217 220.58 C 254.777 222.282 256.823 224.434 260.326 226.981 C 262.081 228.257 263.398 229.407 264.276 230.427 C 265.155 231.446 265.595 232.335 265.595 233.09 C 265.595 234.801 264.957 236.368 263.678 237.789 C 262.4 239.209 260.481 240.484 257.918 241.612 C 253.733 243.518 249.652 244.457 245.689 244.457 C 239.247 242.761 234.601 241.053 231.745 239.356 C 229.477 238.592 228.353 235.934 228.353 231.394 C 228.353 229.307 228.521 226.276 228.906 222.282 C 229.285 218.324 229.477 215.269 229.477 213.183 C 229.477 210.723 229.285 208.601 228.906 206.8 C 228.522 204.999 226.493 203.71 222.803 202.947 C 219.107 202.201 216.962 201.356 216.408 200.4 C 213.184 194.902 212.042 185.704 212.998 172.821 C 201.058 172.821 189.117 172.821 177.177 172.821 C 165.407 172.617 153.854 168.56 142.493 160.592 C 141.152 162.678 138.499 164.707 134.53 166.718 C 130.537 168.694 128.368 170.175 127.983 171.108 C 127.887 171.582 127.72 172.112 127.483 172.7 C 127.246 173.287 126.938 173.931 126.56 174.63 C 126.181 175.329 125.732 176.085 125.212 176.895 C 124.691 177.705 124.099 178.571 123.436 179.49 C 120.784 183.209 119.362 186.193 119.169 188.444 C 117.659 203.437 128.088 220.581 150.455 239.91 C 142.871 242.947 135.655 244.458 128.834 244.458 C 127.138 244.458 125.412 244.37 123.716 244.184 C 123.716 242.668 123.815 239.741 124.007 235.364 C 124.2 231.773 124.007 229.12 123.436 227.418 C 121.734 222.283 118.131 215.847 112.629 208.065 C 106.572 199.554 102.684 193.299 100.982 189.312 C 101.503 185.899 102.024 182.486 102.544 179.072 C 103.065 175.659 103.586 172.246 104.107 168.833 C 101.833 171.009 99.56 173.186 97.286 175.362 C 93.492 181.611 89.597 187.849 85.628 194.097 C 81.827 201.285 79.659 208.193 79.081 214.803 C 78.703 219.817 80.053 224.996 83.134 230.34 C 86.215 235.684 91.025 241.192 97.566 246.864 C 96.802 246.678 95.491 246.917 93.591 247.581 C 91.696 248.24 90.746 248.846 90.746 249.417 C 87.14 248.806 84.058 248.181 81.501 247.543 C 76.942 246.406 74.052 245.229 72.838 244.019 C 70.372 240.627 68.757 235.608 68 228.98 C 67.802 223.494 67.615 217.998 67.429 212.495 C 67.231 210.035 66.869 205.417 66.292 198.574 C 65.721 192.535 65.447 187.802 65.447 184.386 C 65.447 180.982 67.802 176.294 72.547 170.325 C 77.281 164.356 80.038 160.159 80.807 157.693 C 81.361 155.227 80.323 149.083 77.665 139.231 C 74.43 127.689 72.838 119.727 72.838 115.39 C 72.838 112.732 73.206 110.563 73.958 108.85 C 71.504 126.67 68.186 138.503 64.025 144.385 C 53.78 158.807 43.462 165.989 33.028 165.989 C 29.991 165.989 27.805 165.057 26.488 163.144 C 24.984 160.894 25.118 158.213 26.919 155.182 C 28.709 152.139 34.02 149.434 42.839 147.073 C 51.653 144.701 57.005 142.288 58.905 139.822 C 61.557 136.213 64.023 127.761 66.29 114.487 C 67.337 108.69 68.734 103.897 70.487 100.102 C 72.239 96.308 74.346 93.511 76.812 91.707 C 85.437 85.63 94.273 80.374 103.32 75.938 C 112.368 71.502 121.628 67.886 131.101 65.085 C 150.052 59.482 164.282 55.349 173.759 52.714 C 181.671 49.962 189.352 47.554 196.803 45.49 C 204.253 43.425 211.473 41.704 218.462 40.327 C 225.451 38.95 232.209 37.916 238.737 37.228 C 245.264 36.539 251.56 36.194 257.626 36.194 C 257.626 36.194 257.626 36.194 257.626 36.194"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="600"
                    android:duration="300"
                    android:valueFrom="#bdbdbd"
                    android:valueTo="#795548"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1200"
                    android:duration="300"
                    android:valueFrom="M 257.626 36.194 C 265.402 36.194 275.248 36.678 287.192 37.616 C 304.062 38.951 314.87 42.093 319.604 47.036 C 322.069 49.519 325.106 54.381 328.703 61.598 C 332.312 69.403 335.343 74.731 337.808 77.576 C 338.849 76.249 339.793 75.135 340.645 74.235 C 341.497 73.335 342.256 72.65 342.926 72.184 C 346.908 69.141 349.834 67.147 351.722 66.214 C 351.722 71.14 352.061 73.933 352.731 74.597 C 353.384 75.25 356.1 75.775 360.834 76.154 C 364.716 76.393 368.114 77.448 371.028 79.32 C 373.941 81.192 376.37 83.882 378.313 87.388 C 380.256 90.894 381.714 95.218 382.686 100.359 C 383.659 105.5 384.145 111.459 384.145 118.235 C 384.145 123.353 383.865 129.136 383.294 135.583 C 382.992 138.992 382.591 142.194 382.09 145.188 C 381.59 148.183 380.99 150.97 380.291 153.549 C 379.593 156.128 378.796 158.499 377.901 160.661 C 377.006 162.824 376.012 164.778 374.921 166.523 C 373.83 168.268 372.642 169.804 371.356 171.131 C 370.207 172.25 367.129 173.433 362.099 174.669 C 357.091 175.899 353.908 177.84 352.591 180.492 C 351.731 182.107 350.877 184.476 350.026 187.605 C 349.175 190.734 348.327 194.622 347.479 199.274 C 345.754 209.89 344.331 216.692 343.207 219.729 C 341.782 217.838 340.358 215.948 338.933 214.057 C 336.473 209.216 334.318 204.999 332.469 201.397 C 330.621 197.796 329.079 194.812 327.846 192.436 C 322.722 183.337 317.61 178.603 312.492 178.219 C 308.895 177.84 303.305 179.175 295.732 182.194 C 290.032 184.666 284.447 187.126 278.95 189.586 C 277.308 190.03 275.665 190.475 274.023 190.919 C 272.38 191.363 270.738 191.808 269.095 192.252 C 267.453 192.696 265.81 193.141 264.168 193.585 C 259.049 195.66 255.546 199.443 253.646 204.946 C 252.894 211.766 253.08 216.983 254.217 220.58 C 254.777 222.282 256.823 224.434 260.326 226.981 C 262.081 228.257 263.398 229.407 264.276 230.427 C 265.155 231.446 265.595 232.335 265.595 233.09 C 265.595 234.801 264.957 236.368 263.678 237.789 C 262.4 239.209 260.481 240.484 257.918 241.612 C 253.733 243.518 249.652 244.457 245.689 244.457 C 239.247 242.761 234.601 241.053 231.745 239.356 C 229.477 238.592 228.353 235.934 228.353 231.394 C 228.353 229.307 228.521 226.276 228.906 222.282 C 229.285 218.324 229.477 215.269 229.477 213.183 C 229.477 210.723 229.285 208.601 228.906 206.8 C 228.522 204.999 226.493 203.71 222.803 202.947 C 219.107 202.201 216.962 201.356 216.408 200.4 C 213.184 194.902 212.042 185.704 212.998 172.821 C 201.058 172.821 189.117 172.821 177.177 172.821 C 165.407 172.617 153.854 168.56 142.493 160.592 C 141.152 162.678 138.499 164.707 134.53 166.718 C 130.537 168.694 128.368 170.175 127.983 171.108 C 127.887 171.582 127.72 172.112 127.483 172.7 C 127.246 173.287 126.938 173.931 126.56 174.63 C 126.181 175.329 125.732 176.085 125.212 176.895 C 124.691 177.705 124.099 178.571 123.436 179.49 C 120.784 183.209 119.362 186.193 119.169 188.444 C 117.659 203.437 128.088 220.581 150.455 239.91 C 142.871 242.947 135.655 244.458 128.834 244.458 C 127.138 244.458 125.412 244.37 123.716 244.184 C 123.716 242.668 123.815 239.741 124.007 235.364 C 124.2 231.773 124.007 229.12 123.436 227.418 C 121.734 222.283 118.131 215.847 112.629 208.065 C 106.572 199.554 102.684 193.299 100.982 189.312 C 101.503 185.899 102.024 182.486 102.544 179.072 C 103.065 175.659 103.586 172.246 104.107 168.833 C 101.833 171.009 99.56 173.186 97.286 175.362 C 93.492 181.611 89.597 187.849 85.628 194.097 C 81.827 201.285 79.659 208.193 79.081 214.803 C 78.703 219.817 80.053 224.996 83.134 230.34 C 86.215 235.684 91.025 241.192 97.566 246.864 C 96.802 246.678 95.491 246.917 93.591 247.581 C 91.696 248.24 90.746 248.846 90.746 249.417 C 87.14 248.806 84.058 248.181 81.501 247.543 C 76.942 246.406 74.052 245.229 72.838 244.019 C 70.372 240.627 68.757 235.608 68 228.98 C 67.802 223.494 67.615 217.998 67.429 212.495 C 67.231 210.035 66.869 205.417 66.292 198.574 C 65.721 192.535 65.447 187.802 65.447 184.386 C 65.447 180.982 67.802 176.294 72.547 170.325 C 77.281 164.356 80.038 160.159 80.807 157.693 C 81.361 155.227 80.323 149.083 77.665 139.231 C 74.43 127.689 72.838 119.727 72.838 115.39 C 72.838 112.732 73.206 110.563 73.958 108.85 C 71.504 126.67 68.186 138.503 64.025 144.385 C 53.78 158.807 43.462 165.989 33.028 165.989 C 29.991 165.989 27.805 165.057 26.488 163.144 C 24.984 160.894 25.118 158.213 26.919 155.182 C 28.709 152.139 34.02 149.434 42.839 147.073 C 51.653 144.701 57.005 142.288 58.905 139.822 C 61.557 136.213 64.023 127.761 66.29 114.487 C 67.337 108.69 68.734 103.897 70.487 100.102 C 72.239 96.308 74.346 93.511 76.812 91.707 C 85.437 85.63 94.273 80.374 103.32 75.938 C 112.368 71.502 121.628 67.886 131.101 65.085 C 150.052 59.482 164.282 55.349 173.759 52.714 C 181.671 49.962 189.352 47.554 196.803 45.49 C 204.253 43.425 211.473 41.704 218.462 40.327 C 225.451 38.95 232.209 37.916 238.737 37.228 C 245.264 36.539 251.56 36.194 257.626 36.194 C 257.626 36.194 257.626 36.194 257.626 36.194"
                    android:valueTo="M 217.765 29.683 C 225.855 29.683 235.734 31.193 247.403 34.209 C 259.072 37.224 272.53 41.744 287.779 47.764 C 293.183 49.818 299.71 55.439 307.378 64.555 C 311.735 69.94 318.479 78.055 327.602 88.844 C 329.676 90.305 332.381 92.475 335.705 95.396 C 339.023 98.28 341.3 99.537 342.532 99.122 C 342.952 97.866 343.999 96.117 345.658 93.84 C 346.487 93.004 346.998 92.589 347.202 92.589 C 347.84 93.004 348.452 93.419 349.077 93.84 C 349.696 94.261 349.9 95.492 349.696 97.566 C 349.275 101.304 349.077 102.44 349.077 100.979 C 348.854 103.065 348.561 104.399 348.14 105.043 C 345.441 109.599 344.395 113.133 345.033 115.608 C 345.658 117.879 347.603 121.528 350.934 126.505 C 354.258 131.482 356.115 135.22 356.529 137.708 C 356.325 139.572 356.235 142.57 356.235 146.73 C 355.975 147.377 355.715 148.025 355.455 148.672 C 355.195 149.32 354.935 149.968 354.675 150.615 C 354.416 151.263 354.156 151.91 353.896 152.558 C 353.636 153.205 353.376 153.852 353.116 154.5 C 353.116 155.953 353.537 157.666 354.379 159.639 C 355.222 161.612 356.485 163.844 358.17 166.336 C 361.541 171.32 366.596 177.34 373.34 184.397 C 379.784 187.281 382.981 197.253 382.981 214.249 C 382.981 227.545 371.994 234.167 350.015 234.167 C 347.106 234.167 343.999 234.078 340.675 233.848 C 338.398 233.031 335.074 232.1 330.722 231.066 C 325.542 230.428 322.008 228.68 320.151 225.758 C 316.821 221.012 311.423 216.532 303.959 212.386 C 302.714 211.786 300.896 209.503 298.51 205.547 C 296.118 201.604 293.993 199.116 292.136 198.069 C 290.28 197.048 287.575 196.831 284.04 197.47 C 278.024 198.49 274.7 199.014 274.087 199.014 C 272.627 199.014 270.502 198.605 267.707 197.763 C 266.304 197.348 265.1 197.035 264.09 196.826 C 263.079 196.617 262.263 196.512 261.634 196.512 C 260.191 203.16 259.866 209.591 260.703 215.805 C 260.906 217.477 261.953 218.829 263.816 219.85 C 266.731 221.93 268.276 223.066 268.493 223.296 C 270.349 224.737 272.327 227.123 274.394 230.428 C 274.815 231.691 274.037 233.81 272.059 236.808 C 270.087 239.82 268.493 241.593 267.235 242.091 C 265.997 242.627 263.298 242.895 259.145 242.895 C 253.122 242.895 250.749 242.984 251.999 243.188 C 243.706 241.938 239.036 241.223 237.989 241.032 C 232.808 239.986 228.342 238.339 224.616 236.043 C 222.734 234.805 220.578 228.987 218.09 218.613 C 217.252 214.878 216.463 211.64 215.722 208.897 C 214.981 206.154 214.289 203.906 213.644 202.153 C 212.999 200.4 212.401 199.141 211.85 198.375 C 211.442 197.763 210.925 197.47 210.306 197.47 C 209.26 197.47 207.544 198.491 205.164 200.583 C 202.778 202.625 201.164 203.76 200.347 204.003 C 197.451 216.227 195.977 222.032 195.977 221.395 C 195.977 226.18 197.323 230.199 200.022 233.529 C 202.715 236.847 205.529 240.063 208.438 243.163 C 211.959 247.106 213.72 250.526 213.72 253.435 C 213.72 255.081 213.21 256.523 212.163 257.786 C 207.806 263.171 200.539 265.876 190.376 265.876 C 178.962 265.876 171.498 264.319 167.982 261.206 C 163.408 257.263 160.505 253.104 159.267 248.778 C 159.063 247.731 158.547 244.618 157.71 239.438 C 157.295 236.312 156.358 234.462 154.922 233.849 C 152.839 233.536 150.502 233.096 147.911 232.527 C 145.319 231.957 142.472 231.258 139.368 230.429 C 138.111 229.6 136.765 227.52 135.31 224.203 C 132.625 217.784 130.646 213.421 129.396 211.137 C 123.162 208.023 113.21 204.514 99.512 200.584 C 99.304 201.001 99.132 201.471 98.996 201.998 C 98.86 202.525 98.76 203.109 98.693 203.75 C 98.627 204.392 98.594 205.093 98.594 205.854 C 100.871 208.763 104.291 213.229 108.859 219.226 C 112.591 224.203 114.461 228.988 114.461 233.542 C 114.461 242.271 108.859 246.609 97.656 246.609 C 94.821 246.609 92.286 246.542 90.051 246.407 C 87.815 246.272 85.879 246.068 84.242 245.794 C 82.605 245.52 81.267 245.175 80.227 244.758 C 75.671 242.896 71.83 238.519 68.717 231.692 C 63.53 220.259 60.627 213.829 60.002 212.387 C 56.678 204.718 54.4 197.956 53.169 192.137 C 53.029 191.448 52.877 190.697 52.714 189.885 C 52.551 189.074 52.377 188.201 52.191 187.267 C 52.006 186.333 51.809 185.338 51.601 184.282 C 51.549 184.018 51.496 183.751 51.442 183.479 C 51.389 183.208 51.335 182.932 51.28 182.653 C 51.225 182.374 51.17 182.091 51.113 181.805 C 51.057 181.518 51 181.228 50.942 180.934 C 50.712 179.757 50.47 178.52 50.217 177.222 C 49.964 175.925 49.7 174.567 49.424 173.15 C 48.7 169.635 47.768 166.5 46.629 163.752 C 45.489 161.005 44.142 158.642 42.585 156.671 C 31.164 141.925 25.87 129.159 26.705 118.377 C 26.705 118.377 26.705 118.377 26.705 118.377 C 27.328 110.015 28.758 101.986 30.994 94.29 C 33.23 86.593 36.273 79.229 40.122 72.197 C 43.971 65.165 48.626 58.464 54.087 52.095 C 72.551 30.519 95.691 19.736 123.488 19.736 C 134.06 19.736 149.767 21.408 170.623 24.712 C 175.837 25.546 180.729 26.274 185.3 26.897 C 189.87 27.519 194.119 28.036 198.046 28.449 C 201.974 28.862 205.581 29.17 208.867 29.376 C 212.153 29.581 215.119 29.683 217.765 29.683"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
                <objectAnimator
                    android:propertyName="fillColor"
                    android:startOffset="1200"
                    android:duration="300"
                    android:valueFrom="#795548"
                    android:valueTo="#78909c"
                    android:valueType="colorType"
                    android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Visibility strike]

動(dòng)畫效果如下：

210.gif

代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="visibilitystrike"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="strike_thru_path"
                android:pathData="M 2 4.27 L 3.27 3 L 3.27 3 L 2 4.27 Z"
                android:fillColor="#ff000000"
                android:strokeWidth="1"/>
            <clip-path
                android:name="strike_thru_mask"
                android:pathData="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 3.27 3 L 4.54 1.73 Z"/>
            <path
                android:name="eye_path"
                android:pathData="M 12 4.5 C 7 4.5 2.73 7.61 1 12 C 2.73 16.39 7 19.5 12 19.5 C 17 19.5 21.27 16.39 23 12 C 21.27 7.61 17 4.5 12 4.5 L 12 4.5 Z M 12 17 C 9.24 17 7 14.76 7 12 C 7 9.24 9.24 7 12 7 C 14.76 7 17 9.24 17 12 C 17 14.76 14.76 17 12 17 L 12 17 Z M 12 9 C 10.34 9 9 10.34 9 12 C 9 13.66 10.34 15 12 15 C 13.66 15 15 13.66 15 12 C 15 10.34 13.66 9 12 9 L 12 9 Z"
                android:fillColor="#ff000000"
                android:strokeWidth="1"/>
        </vector>
    </aapt:attr>
    <target android:name="strike_thru_path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="M 2 4.27 L 3.27 3 L 3.27 3 L 2 4.27 Z"
                android:valueTo="M 19.73 22 L 21 20.73 L 3.27 3 L 2 4.27 Z"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="strike_thru_mask">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 3.27 3 L 4.54 1.73 Z"
                android:valueTo="M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 Z M 4.54 1.73 L 3.27 3 L 21 20.73 L 22.27 19.46 Z"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="visibilitystrike">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="alpha"
                android:startOffset="268"
                android:duration="1271"
                android:valueFrom="1"
                android:valueTo="0.333"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

[Demo：Heart break]

動(dòng)畫效果如下：

211.gif

代碼如下：

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="heartbreak"
            android:width="56dp"
            android:height="56dp"
            android:viewportWidth="56"
            android:viewportHeight="56">
            <group
                android:name="broken_heart_left_group"
                android:pivotX="28"
                android:pivotY="37.3">
                <path
                    android:name="broken_heart_left"
                    android:pathData="M 28.031 21.054 C 28.02 21.066 28.01 21.078 28 21.09 C 26.91 19.81 25.24 19 23.5 19 C 20.42 19 18 21.42 18 24.5 C 18 28.28 21.4 31.36 26.55 36.03 L 28 37.35 L 28.002 37.348 L 27.781 36.988 L 28.489 36.073 L 27.506 34.764 L 28.782 33.027 L 26.944 31.008 L 29.149 28.725 L 27.117 27.143 L 29.149 25.018 L 26.488 22.977 L 28.031 21.054 L 28.031 21.054 Z"
                    android:fillColor="#000"/>
            </group>
            <group
                android:name="broken_heart_right_group"
                android:pivotX="28"
                android:pivotY="37.3">
                <path
                    android:name="broken_heart_right"
                    android:pathData="M 28.031 21.054 C 28.169 20.895 28.316 20.743 28.471 20.599 L 28.915 20.226 C 29.926 19.457 31.193 19 32.5 19 C 35.58 19 38 21.42 38 24.5 C 38 28.28 34.6 31.36 29.45 36.04 L 28.002 37.348 L 27.781 36.988 L 28.489 36.073 L 27.506 34.764 L 28.782 33.027 L 26.944 31.008 L 29.149 28.725 L 27.117 27.143 L 29.149 25.018 L 26.488 22.977 L 28.031 21.054 L 28.031 21.054 Z"
                    android:fillColor="#000"/>
            </group>
            <path
                android:name="heart_stroke_left"
                android:pathData="M 28.719 38.296 L 25.669 35.552 C 21.621 31.793 18.016 28.891 18.016 24.845 C 18.016 21.588 20.631 19.965 23.634 19.965 C 24.999 19.965 26.799 21.181 28.644 23.13"
                android:strokeColor="#000"
                android:strokeWidth="2"
                android:trimPathEnd="0"/>
            <path
                android:name="heart_stroke_right"
                android:pathData="M 27.231 38.294 L 30.765 35.2 C 34.834 31.235 37.752 29.118 38.004 25.084 C 38.168 22.459 35.773 20.035 33.379 20.035 C 30.432 20.035 29.672 21.047 27.231 23.133"
                android:strokeColor="#000"
                android:strokeWidth="2"
                android:trimPathEnd="0"/>
            <group android:name="filled">
                <clip-path
                    android:name="clip"
                    android:pathData="M 18 37 L 38 37 L 38 37 L 18 37 Z"/>
                <path
                    android:name="fill"
                    android:pathData="M 28 39 L 26.405 37.567 C 20.74 32.471 17 29.109 17 24.995 C 17 21.632 19.657 19 23.05 19 C 24.964 19 26.801 19.883 28 21.272 C 29.199 19.883 31.036 19 32.95 19 C 36.343 19 39 21.632 39 24.995 C 39 29.109 35.26 32.471 29.595 37.567 L 28 39 L 28 39 Z"
                    android:fillColor="#000000"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="broken_heart_left_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="-20"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_right_group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="20"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_left">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="fillAlpha"
                android:startOffset="100"
                android:duration="300"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="broken_heart_right">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="fillAlpha"
                android:startOffset="100"
                android:duration="300"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/linear_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="heart_stroke_left">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathEnd"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="heart_stroke_right">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="trimPathEnd"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="clip">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1160"
                    android:duration="120"
                    android:valueFrom="M 18 26 C 18 26 21 28 24 28 C 27 28 29 25 32 25 C 35 25 38 26 38 26 L 38 38 L 18 38 L 18 26 Z"
                    android:valueTo="M 18 18 C 18 18 24 18 24 18 C 24 18 32 18 32 18 C 32 18 38 18 38 18 L 38 38 L 18 38 L 18 18 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_linear_in"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1000"
                    android:duration="160"
                    android:valueFrom="M 18 38 C 18 38 24 38 24 38 C 24 38 32 38 32 38 C 32 38 38 38 38 38 L 38 38 L 18 38 L 18 38 Z"
                    android:valueTo="M 18 26 C 18 26 21 28 24 28 C 27 28 29 25 32 25 C 35 25 38 26 38 26 L 38 38 L 18 38 L 18 26 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:interpolator/fast_out_linear_in"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="heartbreak">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="alpha"
                android:startOffset="500"
                android:duration="400"
                android:valueFrom="0.4"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

[本章完...]

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末蜘犁，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子止邮，更是在濱河造成了極大的恐慌这橙，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,402評(píng)論 6贊 499
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件农尖，死亡現(xiàn)場(chǎng)離奇詭異析恋，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)盛卡，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門助隧，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人滑沧，你說我怎么就攤上這事并村。” “怎么了滓技？”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵哩牍，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我令漂，道長(zhǎng)膝昆，這世上最難降的妖魔是什么丸边？ 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮荚孵，結(jié)果婚禮上妹窖，老公的妹妹穿的比我還像新娘。我一直安慰自己收叶，他們只是感情好骄呼，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著判没，像睡著了一般蜓萄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上澄峰，一...
    開封第一講書人閱讀 51,146評(píng)論 1贊 297
  • 城市分裂傳說
    那天嫉沽，我揣著相機(jī)與錄音，去河邊找鬼摊阀。 笑死耻蛇，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的胞此。 我是一名探鬼主播臣咖，決...
    沈念sama閱讀 40,032評(píng)論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼漱牵！你這毒婦竟也來了夺蛇？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,896評(píng)論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤酣胀，失蹤者是張志新（化名）和其女友劉穎刁赦，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闻镶，經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡甚脉，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铆农。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牺氨。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖墩剖，靈堂內(nèi)的尸體忽然破棺而出猴凹，到底是詐尸還是另有隱情，我是刑警寧澤岭皂，帶...
    沈念sama閱讀 35,413評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布郊霎，位于F島的核電站，受9級(jí)特大地震影響爷绘，放射性物質(zhì)發(fā)生泄漏书劝。R本人自食惡果不足惜进倍，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庄撮。 院中可真熱鬧背捌，春花似錦毙籽、人聲如沸洞斯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0贊 22
  • 一樁弒父案坑赡，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)烙如。三九已至，卻和暖如春毅否，著一層夾襖步出監(jiān)牢的瞬間亚铁，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工螟加， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留徘溢，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓捆探，卻偏偏與公主長(zhǎng)得像然爆，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子黍图，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2贊 353

推薦閱讀更多精彩內(nèi)容