LZ-Says:伙计,一路走来,走散了一些人,留下了最真的人,切勿悲伤,切勿心寒。抬起头,微笑继续向前行~
前言
上一篇,我们了解了SVG以及静态Vector图像使用,坐标地址如下:
Android Study 之 聊聊有关SVG那些事儿
而今天,我们了解一下有关使用动态Vector使用的那点事儿。
PS:
主要注意的是,动态Vector图像只能在Api 21以上使用,So,如果想要低版本也使用的话,必须做兼容,否则直接奔溃了~
So,一起来看本文目标。
本文目标
通过举例说明如何使用动态Vector图像以及如何兼容低版本,从而让你不经意间学会使用要领。
实现效果
Come on,baby~
首先,我们生成一个原图,也就是我们的小星星,我们设置宽高按照400等份平分,其次,设置我们中心点坐标为200,也就是正好一半,而动画的执行也就是从图像的中心点进行运动,而具体动画又可以具体到某个Path,也就是说,假设我们的静态Vector图像是由俩个Path组成,我们可以根据设置不同的name去区别对待(设置不同的动画效果),具体代码如下:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="300px"
android:height="300px"
android:viewportHeight="400"
android:viewportWidth="400">
<group
android:name="star_group"
android:pivotX="200" // 由于宽度按照400等比例平分,设置一半大小也就意味着从中心进行动画效果
android:pivotY="200"
android:scaleX="1.0"
android:scaleY="1.0">
<path
android:name="star"
android:fillColor="#FF00FF"
android:pathData="M 200.30535,69.729172
C 205.21044,69.729172 236.50709,141.52218 240.4754,144.40532
C 244.4437,147.28846 322.39411,154.86809 323.90987,159.53312
C 325.42562,164.19814 266.81761,216.14828 265.30186,220.81331
C 263.7861,225.47833 280.66544,301.9558 276.69714,304.83894
C 272.72883,307.72209 205.21044,268.03603 200.30534,268.03603
C 195.40025,268.03603 127.88185,307.72208 123.91355,304.83894
C 119.94524,301.9558 136.82459,225.47832 135.30883,220.8133
C 133.79307,216.14828 75.185066,164.19813 76.700824,159.53311
C 78.216581,154.86809 156.16699,147.28846 160.13529,144.40532
C 164.1036,141.52218 195.40025,69.729172 200.30535,69.729172 z" />
</group>
</vector>
接下来,我们着手实现我们的动画效果。需要在res下创建animator目录。
我们看效果图,可以很清晰的看到,首先动画的轨迹为:
星星 ---> 勺子 再由 勺子 ---> 星星
也就是切换动画,而这个动画会具有俩个属性:
- 从A到B,从B到A,动画的执行有个先后顺序;
- 仔细观察,变换的过程中,会有一点点加速的效果,考虑添加插值器
具体如下:star_shap.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:ordering="sequentially"
android:shareInterpolator="true">
<!-- 如果俩个SVG进行动画,则俩个节点需要一致 -->
<objectAnimator
android:duration="500"
android:propertyName="pathData"
android:valueFrom="@string/svgStarStr"
android:valueTo="@string/svgFoodStr"
android:valueType="pathType" />
<objectAnimator
android:duration="500"
android:propertyName="pathData"
android:valueFrom="@string/svgFoodStr"
android:valueTo="@string/svgStarStr"
android:valueType="pathType" />
</set>
接下来,在执行的过程中除了俩个图像的交替,其中还掺杂着俩种动画:
- 缩放:x,y轴同时进行;
- 旋转
这里需要注意这俩个动画的执行同样也是有着顺序。
关键代码如下:star_ratate.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<set android:ordering="together">
<objectAnimator
android:duration="300"
android:propertyName="scaleX"
android:valueFrom="0.0"
android:valueTo="1.0" />
<objectAnimator
android:duration="300"
android:propertyName="scaleY"
android:valueFrom="0.0"
android:valueTo="1.0" />
</set>
<objectAnimator
android:duration="500"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</set>
接下来,我们要为我们的星星添加动画,让它动起来~
底图就是我们的星星,还记得我们一开始添加的name么,一个是给path,一个是group,分别设置即可。
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vd_star">
<target
android:name="star_group"
android:animation="@animator/star_rotate" />
<target
android:name="star"
android:animation="@animator/star_shape" />
</animated-vector>
为ImageView直接设置src即可:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:onClick="getAnim"
android:src="@drawable/animate_star" />
最后,在MainActivity中进行如下操作:
public void getAnim(View view){
ImageView imageView=(ImageView)view;
Drawable drawable=imageView.getDrawable();
if(drawable instanceof Animatable){
((Animatable)drawable).start();
}
}
到此动动小手,点击运行瞅瞅~
还记得我们直接创建animated-vector文件时,提示的警告么?我们先一起来看下:
下面将进行详细说明。
兼容性开发怎么玩
上图很easy,提示我们这个东西只能在Android api 21以上使用,也就是5.0,当然你可以直接忽略此警告,直接运行在5.0以上的api毫无问题,当然,最好还是将此文件放置在drawable-v21目录下,但是,如果在5.0一下运行,则会出现不可思议的问题,详情看下图:
报出的异常如下:
那么如何在低版本运行呢?
LZ找了很多的方式,暂时没有找到,希望各位老帖,如有好的解决方案,希望告知下~
GitHub查看地址