美文网首页
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学习四:路径动画

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