svg Vector 章节（5）：修剪paths

修剪paths

我们将介绍的最后一种技术涉及为的边界设置动画。 剪切路径限制了可以在画布上应用绘画的区域-位于剪切路径所限制区域之外的任何内容都不会被绘制。 通过设置这些区域的边界动画，我们可以创建一些很酷的效果，下面我们会展示。

物业名称	类型	值类型
android:pathData		string

可以通过动画化的边界来动画其路径命令的动画，该动画由其android:pathData属性指定，从而通过路径变形进行动画处理。 看一下图9中的示例，以更好地了解这些动画的工作方式。 启用“显示剪辑路径”复选框，将显示一个红色的覆盖蒙版，代表当前活动的的边界，这又指示了将要绘制的同级的部分。 剪切路径对于动画化“填充”效果特别有用，如下面的沙漏和心脏填充/断开示例所示。

1 沙漏效果

沙漏效果.gif

1. 我们先从材料网站下载到空的沙漏和满的沙漏的路径

2. 我们可以看到这个沙漏也是需要用到旋转的效果，在前面我们知道，要将该图片以中心围绕旋转的话，我们需要将图片迁移到左上角，那么如何识别图片中心呢，很简单，以图片的xy的中间节点为参考即可，如图1所示

   
   
   图1.这样用来控制旋转的角度，以xy的中间为准

3. 因为沙漏效果是在每次倒转时候，从沙漏的上半部分迁移到下半部分，所以沙漏需要划分出上下两部分，具体如何修改在上个章节已经详细解释过。

4. 接下来是解析如何画出这个沙漏，它先用一个group封装空沙漏划分成上下两部分，再用另外一个group封装填充的沙漏，然后利用clip-path剪切留下下半部分

5. 然后是动画部分

2 切换可见效果

切换可见效果.gif

1. 我们先从材料网站下载到可视化的眼睛和蒙面的眼睛的路径，但是这节用于斜杠的处理、阴影的处理我们不能从素材中抽取了，只能自己画了，后面会讲到为什么自己画了，而这三个素材在大部分的切换可见场景也是可以直接拿来用的，分别是

M3.27,4.27 L19.74,20.74

M2,4.27 L2,4.27 L4.54,1.73 L4.54,1.73 L4.54,1 L23,1 L23,23 L1,23 L1,4.27 Z

M 2 4.27 L 19.73 22 L 22.27 19.46 L 4.54 1.73 L 4.54 1 L 23 1 L 23 23 L 1 23 L 1 4.27 Z

2. 这个跟上个一样，也是通过clip-path剪切来做一些动画。
3. 这里着重讲讲为什么是自己画而不通过素材截取，我们就拿斜杠来说，如图1所示
   图1
   
   我们可以发现就两个节点，那如果是通过素材截取的斜杠，如图2所示
   图2
   
   会发现4个节点，如果我们需要用到类似这种斜杠根据路径慢慢显示或者消失的话，它的动画效果是根据节点顺序来，如果是图2那种从1-4这样显示，肯定是不可能的，所以就需要自己画，达到图1那种效果。

4. 动画转变过程分别由图3和图4两个图片过渡
   图3
   图4
   
   

   主要是靠这两段代码进行转换

然后单独处理图5这个斜杠的渐显动画即可

图5

3 爱心