SVG交互图文｜推送里的路径动画是怎么做到的

线条自主移动变化构成画面，这种炫酷的路径动画特效，相信大家都见过。下面从业内首发SVG路径动画交互图文为案例，为大家分析一波。这是由「小编备用」于2019年5月交付于宝马的《你以为这只是一条线》，效果如下：

从推文效果可以明显看出，呈现了图形形状的路径描边动画，利用到的是SVG的一个重要属性「stroke」,中文称之为“描边”，本文动画效果主要是path路径代码上利用「stroke-dashoffset」和「 stroke-dasharray」两兄弟控制实现的。这两兄弟的可选值是一组数值，「 stroke-dasharray」用来设置每段虚线的样式，将实线部分隐藏，空余为全线段长。「stroke-dashoffset」用来设置虚线到起始偏移量，改变虚线的起始数值，看上去有实线部分增加，形成路径移动的效果。此动画效果对象除了路径，简单的折线、线段等同样适合，在拥有图表的推文中常见基于「stroke」属性的SVG描边、路径动画效果。另外，通过控制虚线线段和偏移量的数值实，变化动画对象的颜色、宽度等还能制造更多SVG线条之美。

说完了技术原理，回到交互层级上看，SVG路径动画创建了视觉逻辑路径，用户眼睛跟随动画自主移动匹配界面，会带领用户逐步深入阅读体验。它制造路径动态视效是引导用户阅读的关键，吸引注意力的机制已经不在用户有意识的控制之下，而是跟随路径的演变过程牵引内容，具有强调信息、提升感官刺激的效果，维持一定的阅读注意力的同时还保持了交互体验一致。另外描边动画的可定制性，让基于此效果的交互不易疲乏，这样的效果十分适用呈现时间线性的变化过程和实现深度垂直的内容展示。

总的来说，个性化的定制配合品牌调性的创意内容，才实现了宝马推送中视觉体验一流、阅读效果极佳的作品。如想了解更多精彩案例，持续关注「小编备用」！