Android 矢量动画 Android高级动画篇之SVG矢量动画范例
FranzLiszt1847 人气:0想了解Android高级动画篇之SVG矢量动画范例的相关内容吗,FranzLiszt1847在本文为您仔细讲解Android 矢量动画的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Android,矢量动画,Android,SVG,Android,动画,下面大家一起来学习吧。
效果视频
目录结构
SVG常用指令
L :为从当前点绘制到直线给定的点,后面跟着的为x,y坐标
M :为将画笔移动到某一点,但只是移动画笔,并没有绘制过程,所有没有产生绘制动作
A :为绘制一段弧线,允许弧线不闭合
初始化状态
效果图
制作静态SVG图型
首先在drawablw目录中建立一个svg_pic.xml文件夹
分别给两条直线名为Path1和Path2
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportHeight="100" android:viewportWidth="100"> <group> <path android:name="path1" android:pathData=" M 20,80 L 50,80 80,80" android:strokeColor="#cc0099" android:strokeLineCap="round" android:strokeWidth="5"/> <path android:name="path2" android:pathData=" M 20,20 L 50,20 80,20" android:strokeColor="#cc0099" android:strokeLineCap="round" android:strokeWidth="5"/> </group> </vector>
动画变换
在res目录下建立一个anim文件,在anim文件建立两个动画变化文件,分别为cross_anim1.xml和cross_anim2.xml
其中的valueFrom与valueTo属性分别对应了变换的起始坐标
cross_anim1.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially"> <objectAnimator android:duration="500" android:propertyName="pathData" android:valueFrom="M 20,80 L 50,80 80,80" android:valueTo="M 20,80 L 50,50 80,80" android:valueType="pathType" android:interpolator="@android:anim/bounce_interpolator"> </objectAnimator> </set>
cross_anim2.xml
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially"> <objectAnimator android:duration="500" android:interpolator="@android:anim/bounce_interpolator" android:propertyName="pathData" android:valueFrom=" M 20,20 L 50,20 80,20" android:valueTo=" M 20,20 L 50,50 80,20" android:valueType="pathType"/> </set>
动画黏合
最好通过animated-vector进行粘合,在drawable目录下创建link_anim.xml文件
drawable绑定svg静态图型的初始状态
target将两条直线的样式与变换进行绑定
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/svg_pic"> <target android:name="path1" android:animation="@anim/cross_anim1"/> <target android:name="path2" android:animation="@anim/cross_anim2"/> </animated-vector>
引用
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:layout_gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/link_anim" android:onClick="anim"/> </LinearLayout>
public void anim(View view) { ImageView imageView = (ImageView)view; Drawable drawable = imageView.getDrawable(); if (drawable instanceof Animatable){ ((Animatable)drawable).start(); } }
解决低版本异常问题
在build.gradle文件的defaultConfig中添加如下语句
vectorDrawables.useSupportLibrary = true
加载全部内容