美文网首页
VectorDrawable学习四:路径动画

VectorDrawable学习四:路径动画

作者: WeberLisper | 来源:发表于2017-10-17 11:42 被阅读13次

所谓路径动画是实现这样一种效果,使得我们能够一个图形的从无到有的绘制过程或者是从有到无的擦除过程。比如下面一种效果:

路径动画.gif

这种效果是怎么样实现的呢?path标签提供了两个属性用以实现这种效果:trimPathStart和trimPathEnd。

trimPathStart

官方概念:The fraction of the path to trim from the start, in the range from 0 to 1. Default is 0.
粗糙翻译:此代表从path的开始部分进行截取的比率,范围为0~1。默认为0。

从有到无的擦除一条直线

绘制的直线的pathData是从左到右的。

android:pathData="M0,10,h100"

如开始展现的那个效果图,需要从有到无的对该直线进行擦除。理解trimPathStart的概念,那么应该最开始的时候的值为0,而后该属性值渐渐增大,也就是渐渐的擦除得更多了。原理如下图所示:

image.png

图中的trim部分trimPathStart的属性值,这个属性值从0到1变化也就实现了从左到右的擦除效果。反之,如果该值从1到0则是从右到左进行绘制。

从右到左绘制.gif

trimPathEnd

trimPathEnd刚好和trimPathStart相反,因此也得反着来理解。
官方概念:The fraction of the path to trim from the end, in the range from 0 to 1. Default is 1.
粗糙翻译:此代表从path的尾部进行截取的比率,范围为0~1。默认为1。
同样画一个图在下面就好理解了:

image.png

从图中可以看出,属性值即为1-trim部分的比率。

相关文章

  • VectorDrawable学习四:路径动画

    所谓路径动画是实现这样一种效果,使得我们能够一个图形的从无到有的绘制过程或者是从有到无的擦除过程。比如下面一种效果...

  • Android动画进阶VectorDrawable

    动画进阶 VectorDrawable VectorDrawable是为了让Android支持SVG而诞生的。 从...

  • VectorDrawable 动画

    资源索引svg转xml的工具 安卓的Lollipop -> VectorDrawable SVG pathData...

  • Android动画

    在Android中,动画有帧动画、补间动画、属性动画、VectorDrawable,可以做出各种华丽的效果。那它们...

  • Android5.0之后VectorDrawable 实现超炫酷

    注意:这篇博客重在为大家提供学习vectorDrawable实习动画的基础知识,但是想要实现更加炫酷的效果就要读者...

  • 使用Glide v4加载SVG资源

    Android使用矢量图(SVG, VectorDrawable)实践篇 Android SVG矢量动画机制 先放...

  • VectorDrawable 学习

    注意: 1、在module gradle的 defaultConfig 中添加 vectorDrawables....

  • vector drawable

    1,VectorDrawable简介 VectorDrawable官方的描述如下 A VectorDrawable...

  • Flutter动画学习路径

    设计良好的动画可以使UI感觉更加直观,有助于建立看起来丝滑、感觉起来优雅的APP,并且可以改善用户体验。Flutt...

  • VectorDrawable学习三:对FillColor进行动画

    事实上,除了通常的动画,如平移、旋转等外,还可以对Vector中的任意可进行赋值的属性实现动画效果。以下就path...

网友评论

      本文标题:VectorDrawable学习四:路径动画

      本文链接:https://www.haomeiwen.com/subject/vtaruxtx.html