1.修剪笔线路径
描边路径的一个鲜为人知的特性是可以对其进行修剪 。 也就是说,在给定路径的情况下,我们可以选择只显示一部分,然后再将其绘制到显示器上。 在Android中,使用以下可设置动画的属性来完成此操作:
名称 | 元素类型 | 值类型 | 最低值 | 最高值 |
---|---|---|---|---|
android:trimPathStart | float | 0 | 1 | |
android:trimPathEnd | float | 0 | 1 | |
android:trimPathOffset | float | 0 | 1 |
trimPathStart
确定路径的可见部分将从何处开始,而trimPathEnd
确定路径的可见部分何处结束。 如果需要,还可以将附加trimPathOffset
附加到起始值和结束值。 https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html演示了这一切的工作原理-更新滑块以查看不同的值如何影响显示在显示屏上的内容! 请注意, trimPathStart大于trimPathEnd是完全可以的。 如果发生这种情况,则路径的可见部分会简单地围绕该段的末尾回绕到起点。
通俗来讲,trimPathStart和trimPathEnd属性,这两个属性表示对路径的截取
trimPathStart 属性表示截掉 从起点到某个位置的部分,保留剩下的部分;
trimPathEnd 属性表示截掉 从某个位置到终点的部分,保留剩下的部分。
这两个属性中一般使用0~1的浮点数作为百分数来描述该位置,轨迹的起点位置是0%,轨迹的终点位置是100%,当然,其实使用大于1的数字也可以。
知道了上面的内容,就能很好理解属性动画的定义产生的不同效果了:
【1】 使用trimPathStart属性,valueFrom:0,valueTo:1
线条从起点缩短到终点,即初始截断部分是0%,从起点开始逐渐扩大到终点,达到100%。
【2】使用trimPathStart属性,valueFrom:1,valueTo:0
线条从终点增长到起点,即初始截断部分是100%,从终点开始逐渐缩小到起点,达到0%。
【3】使用trimPathEnd属性,valueFrom:0,valueTo:1
线条从起点增长到终点,即初始截断部分是100%,从起点开始逐渐缩小到终点,达到0%。
【4】使用trimPathEnd属性,valueFrom:1,valueTo:0
线条从终点缩短到起点,即初始截断部分是0%,从终点开始逐渐扩大到起点,达到100%。
下面分别讲解4个实例
1.1 指纹效果
指纹图标由5条描边路径组成,每条路径的修剪路径起始值和终止值最初分别设置为0和1 。 隐藏后,差异将快速设置为0直到不再显示该图标为止,然后在以后显示该图标时,快速设置为1 。 草书手写图标的行为类似,除了不是立即对各个路径进行动画处理之外,它们都是按顺序进行动画处理的,就好像该单词是手工书写一样。
首先老样子,先画出指纹图。在网上找到一个素材,然后转换成svg,最后分开出几条线。显示和消失的指纹图都使用如下xml
然后我们根据 trimPathStart
和 trimPathEnd
分别做一个消失和显示的动作,请仔细看我在基础上加的注释,可以发现有2条线跟另外3条线 显示消失 的动画方向是不一样,如果不理解,请好好搭配上面说的具体解释食用。
1.2 搜索后退箭头效果
该动画使用修剪路径动画的巧妙组合,以便在搜索图标的柄和向后箭头的柄之间无缝过渡。 在原文
启用“显示修剪路径”复选框,您将看到不断变化的trimPathStart和trimPathEnd值在动画化为新状态时如何影响柄的相对位置。 启用“慢动画”复选框,您还会注意到,柄的可见长度会随时间而变化:它在开始时略微扩展,而在末尾时收缩,从而产生一种微妙的“拉伸”效果,感觉更自然。 创建这种效果实际上非常容易:只需以很小的开始延迟就开始对修剪属性之一进行动画处理,以使其看起来像路径的一端比另一端动画更快。
首先是搜索图标和后退箭头图标:
然后是他们两者之间过渡动画:
接下来很简单的就是把它们组合起来
1.3
该动画十分简单,分开多个路径,然后一个一个路径轮流显示。
首先我们看看Android Design的图片:
然后再看看动画,其实非常简单,都是从100%截剪到恢复0%分别显示所有路径
1.4 Google IO 2016效果
这是一个显示路径如何无限循环的例子,把1和6这两个路径分别划开4部分,然后调用重复性的trimPathOffset的动画即可实现,老样子,看看IO16的怎么组成的路径
然后是动画的实现,分别给予1和6的所有划分的路径动画
1.5 不确定进度圆形
该动画由三个部分组成
包含进度条路径的
在4444ms的过程中从0°旋转到720°。 在1,333ms的过程中,进度条路径偏移从0变为0.25动画。
进度条路径的部分在1,333ms的时间内被修整。 具体来说,它通过以下三个不同动画同时进行动画处理:
时间 | trimPathStart | trimPathEnd | trimPathOffset |
---|---|---|---|
0 | 0 | 0.03 | 0 |
0.5 | 0 | 0.75 | 0.125 |
1 | 0.75 | 0.78 | 0.25 |
在时间T = 0.0的时候,进度条处于最小尺寸(仅可见3%)。 在T = 0.5 ,进度条已拉伸到其最大大小(可见75%)。 在时间T= 1.0 ,进度条将缩小到最小尺寸,就像动画将要重新启动一样。
这里利用插值器来控制动画启动延迟时间,插值器具体可以看看我写这个 番外篇
那么具体代码我都已经写上注释了,也分别弄了两个插值器不同的旋转动画,分解这些动作你可以更加了解的透彻。
那么该章节系列到此结束,以下是6个demo的相关地址
demo6线性进度
demo7指纹
demo8搜索过渡到回退
demo9Android Design文字动画
demo10 IO16文字动画
demo11 圆形进度