svg Vector 章节(3):修剪笔线路径

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 指纹效果

指纹效果.gif

指纹图标由5条描边路径组成,每条路径的修剪路径起始值和终止值最初分别设置为0和1 。 隐藏后,差异将快速设置为0直到不再显示该图标为止,然后在以后显示该图标时,快速设置为1 。 草书手写图标的行为类似,除了不是立即对各个路径进行动画处理之外,它们都是按顺序进行动画处理的,就好像该单词是手工书写一样。

首先老样子,先画出指纹图。在网上找到一个素材,然后转换成svg,最后分开出几条线。显示和消失的指纹图都使用如下xml



  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  


然后我们根据 trimPathStarttrimPathEnd 分别做一个消失和显示的动作,请仔细看我在基础上加的注释,可以发现有2条线跟另外3条线 显示消失 的动画方向是不一样,如果不理解,请好好搭配上面说的具体解释食用。



    
    
        
            
                
                
            
        
    
    
    
        
            
                
                
            
        
    
    
    
        
            
        
    
    
    
        
            
        
    
    
    
        
            
                
                
            
        
    



    
    
        
            
                
                
            
        
    
    
    
        
            
                
                
            
        
    
    
    
        
            
                
                
            
        
    
    
    
        
            
                
                
            
        
    
    
    
        
            
                
                
            
        
    

1.2 搜索后退箭头效果

搜索后退箭头效果.gif

该动画使用修剪路径动画的巧妙组合,以便在搜索图标的柄和向后箭头的柄之间无缝过渡。 在原文
启用“显示修剪路径”复选框,您将看到不断变化的trimPathStart和trimPathEnd值在动画化为新状态时如何影响柄的相对位置。 启用“慢动画”复选框,您还会注意到,柄的可见长度会随时间而变化:它在开始时略微扩展,而在末尾时收缩,从而产生一种微妙的“拉伸”效果,感觉更自然。 创建这种效果实际上非常容易:只需以很小的开始延迟就开始对修剪属性之一进行动画处理,以使其看起来像路径的一端比另一端动画更快。

首先是搜索图标和后退箭头图标:




  
  

  
  

  
  
    
    

    
    
  




  
  
  

  
  

  
  
    
    

    
    
  

然后是他们两者之间过渡动画:




    
    
        
            
            
                
                

                
                
                
            
        
    

    
    
        
            
        
    

    
    
        
            
                
                

                
                
            
        

    

    
    

        
            
                
                

                
                
            
        

    

    
    
    
    
    
        
            
                
                

                
                
            
        
    





    
    
        
            
                
                

                
                
            
        
    

    
    
        
            
                
                

                
                
            
        
    

    
    
        
            
            
        

    

    
    
        
            
            
        

    

    
    
        
            
                
                

                
                
            
        
    


接下来很简单的就是把它们组合起来




    

    

    

    


1.3

AndroidDesign手写动画.gif

该动画十分简单,分开多个路径,然后一个一个路径轮流显示。

首先我们看看Android Design的图片:





  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  



然后再看看动画,其实非常简单,都是从100%截剪到恢复0%分别显示所有路径



    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    

    
    
        
            
        
    


1.4 Google IO 2016效果

Google IO 2016效果

这是一个显示路径如何无限循环的例子,把1和6这两个路径分别划开4部分,然后调用重复性的trimPathOffset的动画即可实现,老样子,看看IO16的怎么组成的路径




  

  

  

  

  
  

  

  

  

  
  

  

  

  


然后是动画的实现,分别给予1和6的所有划分的路径动画




  

  

  

  

  

  

  

  




  
    
      
      
        
        
      
    
  

  
    
      
        
          
            
          
        
        
          
            
          
        
        
      
    
  

  
  
    
      
    
  





    


1.5 不确定进度圆形

不确定进度圆形.gif

该动画由三个部分组成

  1. 包含进度条路径的在4444ms的过程中从0°旋转到720°。

  2. 在1,333ms的过程中,进度条路径偏移从0变为0.25动画。

  3. 进度条路径的部分在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 圆形进度

你可能感兴趣的:(svg Vector 章节(3):修剪笔线路径)