Android 制作逐渐显示动画(描边动画、矢量动画VectorDrawble)

传统的Android提供的动画只有平移、缩放、显示等效果，那么怎么才能实现逐渐绘制动画？答案是使用矢量图动画。

一、矢量图支持VectorDrawble

Android 系统从5.0开始支持矢量图，可以通过 Android Studio自带的 Vector Assert 工具将SVG、PSD 转成VectorDrawble。

矢量图兼容5.0以下使用需要v7支持库和以下配置：

compile 'com.android.support:appcompat-v7:23.2.0'

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

如下是Vector Assert 工具的使用方法：

image

转化成的VectorDrable格式如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="root"
    android:height="62dp"
    android:viewportHeight="140.13"
    android:viewportWidth="121.38"
    android:width="53dp">

    <group android:name="all_line">

        <path
            android:name="line1"
            android:pathData="M59.94,3.22
            l-58.9,36.2
            v11
            L59.94,14.22
            l58.9,36.2
            L118.84,39.42
            Z"
            android:strokeColor="@color/splash_logo_stroke"
            android:strokeWidth="1"/>


        <path
            android:name="line2"
            android:pathData="M59.94,24.72
            l58.9,36.2
            v11
            L59.94,35.72
            l-58.9,36.2
            L1.04,60.92
            Z"
            android:strokeColor="@color/splash_logo_stroke"
            android:strokeWidth="1"/>


        <path
            android:name="line3"
            android:pathData="M59.94,45.72
            l-58.9,36.2
            v11
            L59.94,56.72
            l58.9,36.2
            L118.84,81.92
            Z"
            android:strokeColor="@color/splash_logo_stroke"
            android:strokeWidth="1"/>


        <path
            android:name="line4"
            android:pathData="M1.95,103.66
            l7.41,4.54
            L60.09,77.75
            L67.69,81.69
            l-49.15,30.2
            l7.78,4.77
            L77.11,88.07
            l6.83,4.2
            L35.69,123.38
            l7.8,4.78
            l49.5,-30.43
            l6.26,3.85
            L52.55,133.71
            l7.8,4.78
            l58.09,-35.71
            L61.44,66.55
            l-58,35.64
            Z"
            android:strokeColor="@color/splash_logo_stroke"
            android:strokeWidth="1"/>
    </group>


</vector>

它的原图是这张：

image

转化好的VectorDrawble 可以直接设置为ImageView的src属性。

转化好的VectorDrawblew看起来好像挺复杂，是不是完全看不懂。没关系，只要转化的图形没有问题，你不用关心其内部数据。

我们直接进入矢量动画部分。

二、矢量图动画：AnimatedVectorDrawable

矢量动画的实现通过在xml定义<animated-vector>标签（其对应的Java对象是AnimatedVectorDrawable）实现，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/splash_logo_vector">
    <target
        android:name="line1"
        android:animation="@animator/splash_animator_draw"/>

    <target
        android:name="line2"
        android:animation="@animator/splash_animator_draw"/>

    <target
        android:name="line3"
        android:animation="@animator/splash_animator_draw"/>

    <target
        android:name="line4"
        android:animation="@animator/splash_animator_draw"
        />
</animated-vector>

可以看到<animated-vector>标签是主要元素是target，它其实就起到一个桥梁作用，将动画和VectorDraw中的图形联系起来。

比如target1，它将属性动画splash_animator_draw和vectorDrawble对象中name等于line1的对象联系起来，即：动画将生效在line1对象上。

这里给出这个描边的属性动画文件，trimPathEnd代表线段的结束位置，trimPathEnd从0到1，就意味着逐渐描边：

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

    <objectAnimator
        android:duration="1000"
        android:interpolator="@android:interpolator/linear"
        android:propertyName="trimPathEnd"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType"
        >
    </objectAnimator>
</set>

必须说明的是，并不是所有的VectorDrawble属性都可以利用属性动画，以下是可以被“动画”的属性集合：

VectorDrawble 成员	可以被“动画”的属性
<vector>	alpha
<group>	rotation
~	pivotX
~	pivotY
~	scaleX
~	scaleY
~	translateX
~	translateY
<path>	pathData
~	fillColor
~	strokeColor
~	strokeWidth
~	strokeAlpha
~	fillAlpha
~	trimPathStart
~	trimPathEnd
~	trimPathOffset
<clip-path>	pathData

使用矢量动画

将animated-vector 这个xml文件当做图片设置在ImageView的src属性上(为了兼容5.0以下，可以使用srcCompat属性)：

   <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/center_view"
        android:layout_centerHorizontal="true"
        app:srcCompat="@drawable/animated_splash_logo"
        />

在代码里开启动画：

 Drawable drawable = mIvLogo.getDrawable();
//AnimatedVectorDrawable实现了Animatable接口
 if (drawable instanceof Animatable) {
     ((Animatable) drawable).start();
  }

运行效果:

image

三、VectorDrawble进阶

之前展示了由svg图片通过Android Studio Vector Assert工具转换过来的VectorDrawble，里面的实际上svg画图语法，<path>标签里的pathData包含了画图的路径(坐标)和语法

在实际使用过程中有几率遇到这样两个问题(笔者都遇到过)：

Vector Assert 转换的数据不准确，比如线条有点歪。
动画效果是一个组合效果，Vector Assert工具自动转换的画线条的方式不符合你的动画需求。
举一个极端的例子：VectorDrawble画了一条线条(只有一个path标签)，但是你的动画效果需要的是线条的左边波浪抖动，线条的右边颜色闪烁。
那么你需要把这一个线条标签，拆成左右两条线段标签，分别应用不同的动画。

其实以上两个问题都要求你掌握进阶知识，svg画图语法。

官方svg语法解析：https://www.w3.org/TR/SVG/paths.html
不喜欢看英文，去这篇博客：http://www.jianshu.com/p/a3cb1e23c2c4

四、另一个实现描边动画的方法：Lottie动画框架

Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。
Lottie 目前只支持渲染播放 After Effects 动画。
Lottie 使用从 bodymovin (开源的 After Effects 插件)导出的json数据来作为动画数据

对于Android程序员，Lottie的动画使用很简单，步骤如下：

1.接入Lottie

dependencies {  
   //lottie动画库
    compile 'com.airbnb.android:lottie:2.2.1'
}

管视觉设计师要一个After Effects软件中通过bodymovin插件导出的动画json文件。
把动画json文件放入Android的assets文件夹。
在布局文件里使用Lottie动画控件，设置好lottie_fileName

 <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        app:lottie_autoPlay="true"
        app:lottie_fileName="splash_animation.json"
        app:lottie_loop="false"
        />

OK，运行程序，改动画就自动播放起来了(设置了lottie_autoPlay="true")

总结

从动画实现上来说，Lottie动画应该是最简单的方法了。

Lottie的优点很明显：

程序员减少了工作量，不用管动画实现的细节了。
各端的动画能保持统一，不会因为程序员技术实现而有差异。
动画实现能最大程度按照视觉的原始设计，免去了各端联调。

Lottie的缺点：

Lottie对于视觉也是有学习成本的。
增加了视觉设计师的工作。
在实际使用中发现Lottie动画配合属性动画一起使用有卡顿。

好了，如果觉得本文对你有帮助，请关注、留言、点赞我，谢谢！