簡單利用vectorDrawable的一個屬性泉褐，就能簡單打造出炫酷的路徑path軌跡顯示效果

效果圖：

效果圖預覽.gif

一唾戚、搜索框vectorDrawable

代碼如下：

• res/drawable/searchbar.xml

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

    <path
        android:name="search"
        android:pathData="M141,17 A9,9 0 1,1 142,16 L149,23"
        android:strokeAlpha="0.8"
        android:strokeColor="#0092ff"
        android:strokeLineCap="round"
        android:strokeWidth="2"/>

    <path
        android:name="bar"
        android:pathData="M0,23 L149,23"
        android:strokeAlpha="0.8"
        android:strokeColor="#0092ff"
        android:strokeLineCap="square"
        android:strokeWidth="2"/>
</vector>

效果圖：

搜索框Vector

二、實現(xiàn)屬性動畫

給放大鏡search設置一個從無到有畫出來的軌跡屬性動畫：

• res/animator/anim_search.xml

<objectAnimator
    xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    androd:propertyName="trimPathEnd"
    androd:valueFrom="0"
    androd:valueTo="1"
    androd:valueType="floatType">
</objectAnimator>

其中最重要的參數(shù)就是trimPathEnd標簽了，同樣還有trimPathStart。

• trimPathEnd——決定了路徑可見部分哪里結束
• trimPathStart——決定了路徑可見部分哪里開始

如下圖所示，trimPathStart為0.27時表示從27%時候炉擅，路徑開始就可見，而trimPathEnd為0.91時候表示阳惹，路徑在91%之后就不可見了谍失。

trim路徑演示圖

同理荒勇，我們想要那個vector里面的bar來一個從有到無的效果柒莉，這次我們使用trimPathStart屬性來變：

• res/animator/anim_bar.xml:

<objectAnimator xmlns:androd="http://schemas.android.com/apk/res/android"
    androd:duration="1000"
    androd:propertyName="trimPathStart"
    androd:valueFrom="0"
    androd:valueTo="1"
    androd:valueType="floatType">
</objectAnimator>

一開始value為0，表示path從0開始沽翔，則表示bar全部顯示兢孝，最后value為1，表示path從100%初顯示仅偎，即不顯示跨蟹。

注：大神表示trimPathStart屬性使用上更優(yōu)，所以我們還是最后把vector里的search的屬性動畫改成trimPathStart變化橘沥。

三窗轩、粘合劑animated-vector

這個就沒什么好講解的了：

• res/drawable/searchbar_anim.xml:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/searchbar">

    <target
        android:animation="@animator/anim_search"
        android:name="search"/>

    <target
        android:animation="@animator/anim_bar"
        android:name="bar"/>

</animated-vector>

四、布局中添加vectorDrawable

• res/layout/acitvity_main.xml:

<ImageView
            android:onClick="anim_vector"
            app:srcCompat="@drawable/searchbar_anim"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

在主代碼的點擊事件中開啟動畫：

• MainActivity.java:

 //點擊事件座咆，開始動畫
    public void anim_vector(View view){
        //獲取圖標實例
        ImageView arrow = (ImageView) view;
       //判斷若是動畫則開始
        Drawable drawable = arrow.getDrawable();
        if(drawable instanceof Animatable){
            ((Animatable)drawable).start();
        }
    }

五痢艺、效果圖與總結

效果圖：

效果圖預覽.gif

其實本身還是使用動態(tài)vectorDrawable動畫，只是簡單利用了trim屬性介陶，就能打造出炫酷的軌跡效果~