VectorDrawable学习四:路径动画

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

路径动画.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,而后该属性值渐渐增大,也就是渐渐的擦除得更多了。原理如下图所示:

VectorDrawable学习四:路径动画_第1张图片
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。
同样画一个图在下面就好理解了:

VectorDrawable学习四:路径动画_第2张图片
image.png

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

你可能感兴趣的:(VectorDrawable学习四:路径动画)