矢量图在安卓Lollipop中已经实现,相关的类就是VectorDrawable。目前以兼容全版本的安卓系统VectorDrawable未出现之前我们需要把图片资源放在不同分辨率的文件夹中,现在只要是适合用矢量图描述的,如图标,目前只用一个VectorDrawable替代就可以了。
- SVG:在前端中使用,是一套语法规范
- Vector:在Android中使用,Vector只实现了SVG语法的Path标签(Android通过Path标签描述图片)
Vector的常用语法:
- M: move to 移动绘制点
- L:line to 直线
- Z:close 闭合
- C:cubic bezier 三次贝塞尔曲线
- Q:quatratic bezier 二次贝塞尔曲线
- A:ellipse 圆弧
PNG、SVG、Vector三种格式之间的比较:
(显示效果相同,Vector占用的内存最小)
可以使用AndroidStudio中使用Google提供的一些无版权的图标,也可以从一些设计网站上下载SVG格式的图片,使用自带工具转换成Vector使用即可:
创建好的Vector文件:
VectorDrawable的兼容性:
Gradle Plugin 1.5 增加了对sdk21一下设备的兼容性:
设备版本>=21 使用原生的Vector
设备版本<21 将Vector转换成PNG
AppCompat23.2几乎可以兼容大部分的使用场景
在项目中使用VectorDrawable:
在bulid.gradle添加:
同时保证appcompat的版本在23.2以上
Vector的使用:
实现如下的动画效果:
实现的步骤很简单,需要书写的代码也不多,基本上都是通过xml实现:
1.准备Vector格式的图片 ,将arrow的左右箭头分别放置在标签,分别命名。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group android:name="arrow_left">
<path
android:fillColor="#FF000000"
android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3z" />
</group>
<group android:name="arrow_right">
<path
android:fillColor="#FF000000"
android:pathData="M21,9l-3.99,-4v3H10v2h7.01v3L21,9z" />
</group>
</vector>
2.创建左右箭头运动的属性动画:
左:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:valueFrom="0"
android:valueTo="10"
android:duration="1000"
android:repeatMode="reverse"
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatCount="infinite"
android:valueType="floatType" />
右:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:valueFrom="0"
android:valueTo="-10"
android:duration="1000"
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:valueType="floatType" />
3.配置动画粘合剂——animated-vector
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/arrow"
>
<target
android:animation="@animator/arrow_left"
android:name="arrow_left"
/>
<target
android:animation="@animator/arrow_right"
android:name="arrow_right"/>
</animated-vector>
4.将Vector图片设置到ImageView,点击ImageView开始动画
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.studyimoocanimation.MainActivity">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
app:srcCompat="@drawable/arrow_animated_vector" <!--设置imageview-->
android:onClick="imageview"
/>
</LinearLayout>
MainActivity.java
public void imageview(View view){
ImageView img = (ImageView)view;
Drawable drawable = img.getDrawable();
if(drawable instanceof Animatable){
((Animatable)drawable).start();
}
}
整个流程下来的实现还是比较简单的,注意的是动画效果的实现实在一张图片的基础上完成的,突然觉得VectorDrawable太强大了。