Android开罐头———VectorDrawable实现轨迹动画

简单利用vectorDrawable的一个属性，就能简单打造出炫酷的路径path轨迹显示效果

效果图：

效果图预览.gif

一、搜索框vectorDrawable

代码如下：

• res/drawable/searchbar.xml

效果图：

搜索框Vector

二、实现属性动画

给放大镜search设置一个从无到有画出来的轨迹属性动画：

• res/animator/anim_search.xml

其中最重要的参数就是trimPathEnd标签了，同样还有trimPathStart。

• trimPathEnd——决定了路径可见部分哪里结束
• trimPathStart——决定了路径可见部分哪里开始

如下图所示，trimPathStart为0.27时表示从27%时候，路径开始就可见，而trimPathEnd为0.91时候表示，路径在91%之后就不可见了。

trim路径演示图

所以，我们想用 trimPathEnd标签打造从无到有的动画，value值一开始就是0，表示路径到0%结束，后面都不可见，value最后值为1，表示最后路径到100%才结束。

同理，我们想要那个vector里面的bar来一个从有到无的效果，这次我们使用trimPathStart属性来变：

• res/animator/anim_bar.xml:

一开始value为0，表示path从0开始，则表示bar全部显示，最后value为1，表示path从100%初显示，即不显示。

---

注：大神表示trimPathStart属性使用上更优，所以我们还是最后把vector里的search的属性动画改成trimPathStart变化。

三、粘合剂animated-vector

这个就没什么好讲解的了：

• res/drawable/searchbar_anim.xml:

四、布局中添加vectorDrawable

• res/layout/acitvity_main.xml:

在主代码的点击事件中开启动画：

• 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属性，就能打造出炫酷的轨迹效果~