Android动画进阶VectorDrawable

动画进阶

VectorDrawable

VectorDrawable是为了让Android支持SVG而诞生的。

1. 从大小上来看 ： VectorDrawable < SVG < PNG ，（压缩应用大小的一个选择方向，虽然现在也有WebP）
2. 加载解析速度上：VectorDrawable 只支持SVG的Path标签，最大的原因就是为了解决SVG解析较慢的问题， 而且Path也是可以绘制所有图形的
3. 导入SVG生成VectorDrawable : File -> New -> Vector Asset
4. VectorDrawable结构如下

 //高等分 
    

5. Gradle的默认配置添加vectorDrawables.useSupportLibrary = true

静态使用

• 无状态的控件使用：如ImageView

  • app:srcCompat="@drawable/vector_test"

• 有状态的控件使用： 如Button

  • 通过设置background为Selector,在Selector中使用Vector
  • 注意！！！要在该页面的Activity或Fragment中设置兼容支持

  static {
  //设置VectorDrawable兼容支持，否则会闪退
     AppCompatDelegate
         .setCompatVectorFromResourcesEnabled(true);
  }
  

动态使用（动画）

VectorDrawable最重点的使用
最后效果预览：

device-2017-03-31-171032.mp4_1490953187.gif

VectorDrawable资源

Vector资源.png

• group 的 name ：路径的标志，做平移，缩放，透明度，旋转这些path不具备的属性动画时要使用
• path 的 name ：路径的标志，做Vector特有的属性动画时要使用，如fillColor，strokeColor，pathData, trimPathStart , trimPathEnd
• viewportHeight : 相当于高度总权重的值，下面的绘制的高度数值也是基于这个值为总量
• viewportWidth : 相当于宽度总权重的值，下面的绘制的宽度数值也是基于这个值为总量
• pathData : 具体绘制图像的路径数据
• fillColor : 填充颜色
• strokeColor : 边框颜色

ObjectAnimator资源

动画的具体操作

• 路径绘制动画：从开始到结束的路径的动画

• 路径转换动画： 从一个图形变成另外一个图形

• 颜色转换动画： 实现颜色的渐变（边框颜色就是fillColor变成strokeColor）

• 上平移动画： ！！值得一提的是，平移的距离是和VectorDrawable的viewportHeight 和 viewWidth 挂钩的， 好比Vector的viewportHeight=100，那么我上一50，就等于移动了图形总面积的50%

• 剩下的缩放，旋转，透明度和普通的属性动画差不多就不贴出了

Animated-vector资源

VectorDrawable 和 ObjectAnimator的 粘合剂
将动画资源作用到Vector资源的核心

• 预览中箭头左移，正方形上移的动画：

• 预览中的红色螺旋绘制动画：

代码启动

1. 首先在布局资源中使用

2. 代码中启动动画：

 public void doClick(View view) {

        /**
         * 这个主要针对pathData路径变化
         * 只支持5.0以上的版本
         */
        if (view.getId() == R.id.tv_path) {
            AnimatedVectorDrawable vectorDrawable = (AnimatedVectorDrawable) getDrawable(R.drawable.anim_square_play);
            ((TextView) view).setCompoundDrawables(null, vectorDrawable, null, null);
            vectorDrawable.start();
        } else {

            /**
             * TextView中获取资源并启动
             */
            if (view instanceof TextView) {
                Drawable[] drawables = ((TextView) view).getCompoundDrawables();
                ((Animatable) drawables[1]).start();
            }

            /**
             * ImageView中获取资源并启动
             */
            if (view instanceof ImageView) {
                ((Animatable) ((ImageView) view).getDrawable()).start();
            }
        }
    }

一些理解

优势：

1. 理解了SVG中的知识，可以根据路径很好的拆分，就像上面的箭头和正方形就是一个svg图形，然后拆分进行动画
2. 路径绘制的优势，UI提供我们需要的SVG路径，我们就可以非常简单的实现路径动画
3. 除了路径转换（注意不是路径绘制） 以外，其他都是支持向下兼容到3.0

劣势：

1. 资源文件过多，根据具体图像的动画资源，动画粘合剂资源会出现十分多，需要规范好UI制作的svg，抽取出完善的ObjectAnimator来相互组合使用
2. 一开始使用会感觉有点繁琐吧，其实我感觉还好，主要看个人吧，如果在自定义View绘制比较弱的话，VectorDrawable提供了很好的解决方案

代码项目Github