简单利用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

二、实现属性动画

给放大镜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>

其中最重要的参数就是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属性使用上更优，所以我们还是最后把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

其实本身还是使用动态vectorDrawable动画，只是简单利用了trim属性，就能打造出炫酷的轨迹效果~