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
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
使用矢量动画
  1. 将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"
        />
  1. 在代码里开启动画:
 Drawable drawable = mIvLogo.getDrawable();
//AnimatedVectorDrawable实现了Animatable接口
 if (drawable instanceof Animatable) {
     ((Animatable) drawable).start();
  }
  1. 运行效果:


    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'
}
  1. 管视觉设计师要一个After Effects软件中通过bodymovin插件导出的动画json文件。

  2. 把动画json文件放入Android的assets文件夹。

  3. 在布局文件里使用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"
        />

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

总结

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

Lottie的优点很明显:

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

Lottie的缺点:

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

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

推荐阅读更多精彩内容