第28页

opacity还有一个重要作用——通过与CSS内其他盒子的组合，形成伪淡入效果。例如杜蕾斯订阅号曾经发布的一篇名为《？》的微信文章，就是基于opacity的伪淡入动画设计。请在JZCreative公众号中回复“svg0103”查看案例。

之所以说是伪淡入效果，是因为实际上杜蕾斯这篇微信文章的图文效果是覆盖在字段上的一个白色矩形遮罩渐隐（opacity数值从1到0），因而下方的文字才透出、显现，而不是文字本身有动画。

值得注意的是，这个白色矩形遮罩被设计得特别大，达到了40rem。这是为了确保在任何机型下都能完全强制遮挡

中的文本（如图3-19所示）。

图3-19 白色矩形遮罩渐隐

结合此前你已经学习过的CSS盒模型逻辑，可以得出这篇交互图文有以下这些设计要点。

1.每段文字，单独一个

这样可以确保在每个字段的CSS盒模型中，SVG的遮罩层可以覆盖全部文字，而且在检查代码、复制代码时更方便。更重要的是，它的高度有限，所以其中的SVG尺寸虽然较大，但是上方超出的部分根本不可见。因而不会遮挡已经出现的文字。

2.将

也就是说，盖住文字的整个SVG画布都通过被强制挪动到文本上方。为了强制覆盖文字，SVG的画布高度、矩形的高度等都被设定为40rem。相比之下，文字的字号只有0.875rem。

3.给每个矩形设定不同的淡出时间

虽然每个遮罩的动画类型和参数基本一致，都是透明度从1到0的过程，但是它们的各不相同，因此形成了文字从上往下逐步显示的效果。

d&points

d与points都是基于锚点的补间动画，可以是说SVG动画中制作最复杂的一种动画。目前，这类动画在商业投放中相对少见。一方面，是因为补间动画涉及逐帧式的矢量设计；另一方面，是因为补间的安全距离非常不直观，往往需要反复调试才能完成设置。

补间动画的一个重要前提是“点对点”，对于处于两个关键帧的补间对象，其锚点数量必须是一致的。而对于锚点的两个手柄方向，原则上不应有太大差别。最后，锚点与锚点之间的位置相对要近，否则无法显示过渡效果，将直接跳到设定的下一个数值。

JZCreative在早期示范过一个经典案例，取自《疯狂动物城》中树懒开口大笑的动画表情。请在公众号中回复“svg0104”查看文章中的对应动画。

这个动画中每个路径的补间数量各不相同，对于距离非常远又形变显著的路径，必须补上3～10个中间值，在*Adobe *Illustrator中反复添加修改，才最终形成树懒的每个身体路径缓缓过渡的效果。最终代码量非常惊人。如果你之前已经阅读了相关章节，那么就可以毫不费力地理解补间动画的书写方式。如果你跳读到此处，就请返回前文关于缓动函数中贝塞尔曲线的小节学习。

其实在视频制作中，补间动画是极其常见的。但是由于SVG补间本身的识别能力，所以要在新媒体中呈现着实有较高难度。

stroke类

在描边类动画中，JZ多媒体解决方案给运营者提供了足够的设计方案，包括stroke-width、stroke-dasharray、stroke-dashoffset、stroke-linecap等都支持变化。

stroke-width是描边宽度，书写方式极其简单，在此不做赘述。

stroke-dasharray是对虚线化描边参数的定义。如果你将其设置在任何路径中，那么它可以包含两个参数，分别对应实线宽度和间隔宽度。

stroke-dashoffset的意义更为重大，它代表了虚线的初始偏移量。普通的stroke-dashoffset可以如下书写。

它和stroke-dasharray参数配合，可以形成类似描边的动画效果，因为描边和虚线在本质上没有任何区别，关键在于dasharray的设置。stroke-dasharray可以设置虚线的实线长度和间隔长度。那么如果实线长度为路径的100%，而间隔极其长呢？这时最终可见的会是这条路径。此时，我们以stroke-dashoffset为动画参数，将其偏移量从较大的数值向0回归，它就形成了类似描边的效果。

描边动画的效果意义非凡，我们以滴滴出行的一篇文章《2018，谁是你的刚刚好？》为例，来体验描边动画的效果（如图3-20所示），请在JZCreative公众号中回复“svg0105”查看。

图3-20 描边动画效果

这里不再展开代码，其实如果你已经学过Chrome开发者使用技巧，就应该非常熟悉直接复制一篇微信图文中关键内容代码的方法了。本书会对每一项动画技巧和案例进行解读，但更希望你把我们设计的顶尖案例复制到本地，仔细解读背后的代码框架并尝试复刻一个相同原理、不同创意的设计。因为这对代码的学习有很大帮助。

stroke-linecap动画用于切换路径端点的形状，数值可以为butt、round、square 3种，在视觉上则主要有圆头顶点和方头顶点的差异。