VectorDrawable – 第四章
来源:互联网 发布:linux服务器更换硬盘 编辑:程序博客网 时间:2024/05/29 04:41
原文出处:泡在网上的日子.
前几篇文章中,我们知道了如何创建VectorDrawable以及制作path group的动画,也知道了如何渲染出路径的绘制效果。但是还有更多的动画方式,那就是修改SVG的path数据本身。这篇文章将讲解是如何做到的。
为了修改SVG的path数据,我们需要先了解一点SVG path的格式。这里不会详细的讲解,因为文档可以在这里找到:here。让我看看如何绘制一个简单的正方形:
res/drawable/square.xml
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<vector xmlns:android=
"http://schemas.android.com/apk/res/android"
android:viewportWidth=
"500"
android:viewportHeight=
"500"
android:width=
"500px"
android:height=
"500px"
>
<path android:name=
"square"
android:fillColor=
"@color/sa_green"
android:pathData=
"M100,100 L400,100 L400,400 L100,400 z"
/>
</vector>
大部分代码看起来都很熟悉,不过我们还是来分析下path元素下面的pathData
属性。首先记住viewport是500 x 500(像素单位),因此我们的工作将在这个区域中进行。pathData
有5个参数(为了便于阅读,我在不同的参数之间用空格分割,但是空格并不是必须的,注意逗号不是参数分割符)。第一个参数值是M100,100
,表示将当前的绘制点移动到100, 100的位置(大写字母M表示我们使用的是绝对坐标,我们可以使用小写字母m来表示相对坐标,这个规则适用于所有参数)。这将当前的位置定位到了正方形绘制区域的左上角。
接下来的三个参数:L400,100 L400,400 L100,400
将会绘制一条依次从左上角-右上角-右下角-左下角的线条。同样我们依然使用绝对坐标。
最后一个参数z是将这条线条闭合。总的来说就是,当前的位置是在左下角,闭合意味着从当前位置绘制一条连接起始点的直线。
而填充色绿色,在Android Studio的预览中看起来如下:
SVG path可以做更多的东西,但是这里一个简单的方形就满足我们的要求了。
下面我们需要像前面几篇文章中那样定义一个简单的AnimatedVectorDrawable来将属性动画(Animator)赋予这个path元素:
res/drawable/animated_square.xml
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<animated-vector xmlns:android=
"http://schemas.android.com/apk/res/android"
android:drawable=
"@drawable/square"
>
<target
android:animation=
"@animator/to_triangle"
android:name=
"square"
/>
</animated-vector>
现在到了关键部分-Animator自身。我们要实现将正方形向三角形动画过度。实现的方法是将开始值和结束值定义成两个不同的path。起始path是正方形(上面已经定义),结束path是三角形。
必须记住起始和结束path的参数个数要相等,同时这些参数的类型要匹配。我们的正方形path是由move命令(M开头表示move)开始,然后是3个line命令,和最后的关闭命令组成的,因此三角形也必须符合这个模式。但是三角形只需要三条线,而正方形是四条线,因此我们需要一点技巧。我们将正方形上边的中点作为顶点,并且在这个点绘制两次。
然后设置android:valueType="pathType",属性动画将按照一定的插值播放动画:
res/animator/to_triangle.xml
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<objectAnimator xmlns:android=
"http://schemas.android.com/apk/res/android"
android:duration=
"1000"
android:interpolator=
"@android:interpolator/decelerate_cubic"
android:repeatMode=
"reverse"
android:repeatCount=
"1"
android:propertyName=
"pathData"
android:valueType=
"pathType"
android:valueFrom=
"M100,100L400,100L400,400L100,400z"
android:valueTo=
"M250,100L250,100L400,400L100,400z"
/>
别慌,为啥不顺带改变下颜色呢?也很简单,给AnimatedVectorDrawable再增加一个target就是了:
res/drawable/animated_square.xml
<?xml version=
"1.0"
encoding=
"utf-8"
?>
<animated-vector xmlns:android=
"http://schemas.android.com/apk/res/android"
android:drawable=
"@drawable/square"
>
<target
android:animation=
"@animator/to_triangle"
android:name=
"square"
/>
<target
android:animation=
"@animator/colour"
android:name=
"square"
/>
</animated-vector>
接下来创建一个ObjectAnimator将颜色从绿色变为黄色:
res/animator/colour.xml
?xml version=
"1.0"
encoding=
"utf-8"
?>
<objectAnimator xmlns:android=
"http://schemas.android.com/apk/res/android"
android:duration=
"1000"
android:propertyName=
"fillColor"
android:valueType=
"intType"
android:repeatCount=
"1"
android:repeatMode=
"reverse"
android:interpolator=
"@android:interpolator/decelerate_cubic"
android:valueFrom=
"@color/sa_green"
android:valueTo=
"@color/vivid_yellow"
/>
完美的实现了将绿色正方形动画过度到黄色三角形的动画:
值得再次提出的是,除了调用动画的代码外,我们没有使用任何java代码。
到此关于VectorDrawable的总结就完了,我们祈祷VectorDrawable的兼容包尽快出现。
这篇文章的代码在这里可以获得: here。
英文原文: VectorDrawables – Part 4
- VectorDrawable – 第四章
- VectorDrawable-第二章
- VectorDrawable-第三章
- VectorDrawable-第二章
- VectorDrawable-第三章
- VectorDrawable
- VectorDrawable
- VectorDrawable-第一章
- VectorDrawable入门
- VectorDrawable 详解
- VectorDrawable-第一章
- VectorDrawable-第一章
- VectorDrawable(矢量图)
- VectorDrawable 详解
- 矢量图VectorDrawable
- VectorDrawable矢量图
- VectorDrawable基础知识
- 第四章第四题
- 详解IP地址后面斜杠加具体数字
- 敏捷开发Scrum 学习笔记,适于移动开发
- 解决request中文乱码的问题
- 4.18、C++文件包含处理
- myeclipse tomcat 7.0 启动报错 java.lang.ClassNotFoundException: org.apache.juli.logging.LogFactory
- VectorDrawable – 第四章
- xcode常用插件
- iOS音频播放 (五):AudioQueue
- sublime packagecontrol 插件的安装
- 使用Java socket 实现 HTTP 协议
- LuaInterface简介
- 提升磁盘IO性能的几个技巧
- [LeetCode] 029. Divide Two Integers (Medium) (C++/Python)
- C++几个常用类型转换