[0 to 0.5]从零开始学习Android动画知识(下)

[0 to 0.5]从零开始学习Android动画知识(下)

矢量动画(Scalable Vector Graphics)

不同于前面的为控件做动画效果的方法，矢量动画则是为图形做出动画效果

矢量图

矢量图不同于位图是用像素描述图像的，它是用数学曲线描述图形，一张图片就对应一系列的曲线组合。

所以，矢量图既减小了图像体积，又不会随图片放大而失真

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M20.84,4.61a5.5,5.5 0,0 0,-7.78 0L12,5.67l-1.06,-1.06a5.5,5.5 0,0 0,-7.78 7.78l1.06,1.06L12,21.23l7.78,-7.78 1.06,-1.06a5.5,5.5 0,0 0,0 -7.78z"
        android:strokeLineCap="round"
        android:strokeColor="#ED4337"
        android:fillColor="#00000000"
        android:strokeWidth="2"
        android:strokeLineJoin="round"/>
</vector>

用过的矢量图，可以看到这里图片的绘制都是在pathData中，下面讲一下pathData的语法

命令	效果	语法
M	新建起点	Mx,y
L	连接直线	Lx,y
H	纵坐标不变，横向连线	Hx
V	横坐标不变，纵向连线	Vy
Q	二次贝塞尔曲线	Qx1,y1,x2,y2
C	三次贝塞尔曲线	Cx1,y1,x2,y2,x3,y3
Z	连接首尾，闭合曲线	无

看看就好，毕竟画图是Design的事情，我们只需通过Android Studio的Vector Asset Studio工具导入获取一张矢量图,但我们还是要对SVG的属性有一定的了解

名称	标签	效果
strokeAlpha	path	定义路径边框的透明度
strokeWidth	path	定义路径边框的粗细尺寸
strokeColor	path	定义路径边框的颜色
fillColor	path	定义填充路径的颜色
fillAlpha	path	定义填充路径的颜色透明度
pathData	path	定义路径形状，可用来做morphing动效
trimPathStart	path	从路径起始位置截断路径的比率，取值范围从 0 到1
trimPathEnd	path	从路径结束位置截断路径的比率，取值范围从 0 到1
trimPathOffset	path	设置路径截取的范围，取值范围从0到1
rotation	group	定义旋转角度
pivotX	group	定义缩放和旋转时的 X 参考点
pivotY	group	定义缩放和旋转时的 Y 参考点
scaleX	group	定义 X 轴的缩放倍数
scaleY	group	定义 Y 轴的缩放倍数
translateX	group	定义 X 轴方向位移
translateY	group	定义 Y 轴方向位移

将矢量图形动画化

由于本文讲述的是动画，那么如何用矢量图片做出动画效果便是重中之重，当然你可以用逐帧动画的方法，不过这里有更好的animated-vector

我们新建ImageView

<ImageView
    android:id="@+id/Point2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/vector_anim"
    />

再在drawable目录下新建vector_anim.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/key" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
<!--    旋转360度-->
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
<!--    从一个path变换到另一个path-->
</animated-vector>

新建key.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="300dp"
    android:width="300dp"
    android:viewportHeight="70"
    android:viewportWidth="70" >
<!--        通过控制path和group的属性变化来实现动画效果-->
    <group
        android:name="rotationGroup"
        android:pivotX="35"
        android:pivotY="35"
        android:rotation="0.0" >
        <path
            android:name="v"
            android:fillColor="#023040"
            android:pathData="M10,10 L60,10 L60,20 L10,20 Z M10,30 L60,30
                L60,40 L10,40 Z M10,50 L60,50 L60,60 L10,60 Z" />
    </group>
</vector>

anim目录下新建rotation.xml 和 path_morph.xml

<!-- rotation.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <objectAnimator
        android:duration="1500"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

<!-- path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M10,10 L60,10 L60,20 L10,20 Z M10,30 L60,30 L60,40
            L10,40 Z M10,50 L60,50 L60,60 L10,60 Z"
        android:valueTo="M5,35 L40,0 L47.072,7.072 L12.072,42.072 Z M10,30 L60,30 L60,40
            L10,40 Z M12.072,27.928 L47.072,62.928 L40,70 L5,35 Z"
        android:valueType="pathType" />
</set>

valueFrom和valueTo分别指定了变换前的path和变换后的path，它要求前后两个path必须是同形path¹

使用

binding.Point2.setOnClickListener(view -> {
        Drawable drawable = binding.Point2.getDrawable();
        ((Animatable) drawable).start();});
}

效果如下：

[查看图片]

矢量动画虽然可以做出比较炫酷的效果，但其代码量十分冗杂，理解也较为复杂，所以这里我不再讲解更让人难受的animated-selector和trimPath只贴出相关链接Android矢量动画实践

那有没有既炫酷又简单的动画呢？

Lottie

Lottie是Github上一个的动画库,其框架可以通过解析json文件来实现动画效果，而无需开发写太多的代码去控制动画

Lottie支持API 16及以上的版本

我们可以在Free Lottie Animation Files, Tools & Plugins - LottieFiles中获取免费或收费的动画文件

Lottie的使用

首先，我们在build.gradle中添加依赖(截至现在最新版本的lottie是5.0.3)

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

接着添加对应控件,只需将json文件放在src/main/asset目录下

<com.airbnb.lottie.LottieAnimationView
       android:id="@+id/lottie"
       android:layout_width="match_parent"
       android:layout_height="350dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:lottie_fileName="bicycle.json"
       app:lottie_loop="true"

       />

或者Java调用

LottieAnimationView animationView = (LottieAnimationView) binding.lottie;
animationView.setAnimation("bicycle.json");//在assets目录下的动画json文件名。
animationView.loop(true);//设置动画循环播放
animationView.playAnimation();//播放动画

效果如下：

[查看图片]

属性	功能
lottie_fileName	设置播放动画的 json 文件名称
lottie_rawRes	设置播放动画的 json 文件资源
lottie_autoPlay	设置动画是否自动播放(默认为false)
lottie_loop	设置动画是否循环(默认为false)
lottie_repeatMode	设置动画的重复模式(默认为restart)
lottie_repeatCount	设置动画的重复次数(默认为-1)
lottie_cacheStrategy	设置动画的缓存策略(默认为weak)
lottie_colorFilter	设置动画的着色颜色(优先级最低)
lottie_scale	设置动画的比例(默认为1f)
lottie_progress	设置动画的播放进度
lottie_imageAssetsFolder	设置动画依赖的图片资源文件地址

上面是lottieXML中一些属性(推荐使用XML,方便复用)

lottie的其他用法和前面视图动画相似，这里不再细讲，有兴趣的小伙伴可以自己在网上查阅

BYE~

---

1. 拥有相同的命令数，并且对应位置的命令符相同的两个path ↩︎