线条自主移动改动构成画面，这种炫酷的途径动画特效，信任我们都见过。下面从业界首发SVG途径动画交互图文为事例，为我们剖析一波。这是由「小编备用」于2019年5月交给于宝马的《你认为这仅仅一条线》，传送链接如下：

  从推文作用能够显着看出，出现了图形形状的途径描边动画，使用到的是SVG的一个重要特点「stroke」,中文称之为“描边”，本文动画作用主要是path途径代码上使用「stroke-dashoffset」和「 stroke-dasharray」两兄弟操控完成的。这两兄弟的可选值是一组数值，「 stroke-dasharray」用来设置每段虚线的款式，将实线部分躲藏，空余为全线段长。「stroke-dashoffset」用来设置虚线到开始偏移量，改动虚线的开始数值，看上去有实线部分添加，构成途径移动的作用。此动画作用目标除了途径，简略的折线、线段等相同合适，在具有图表的推文中常见根据「stroke」特点的SVG描边、途径动画作用。别的，经过操控虚线线段和偏移量的数值实，改动动画目标的色彩、宽度等还能制作更多SVG线条之美。

  说完了技能原理，回到交互层级上看，SVG途径动画创建了视觉逻辑途径，用户眼睛跟从动画自主移动匹配界面，会带领用户逐渐深化阅览体会。它制作途径动态视效是引导用户阅览的要害，招引注意力的机制现已不在用户有意识的操控之下，而是跟从途径的演化进程牵引内容，具有着重信息、提高感官影响的作用，坚持必定的阅览注意力的一起还坚持了交互体会共同。别的描边动画的可定制性，让根据此作用的交互不易疲倦，这样的作用非常适用出现时刻线性的改动进程和完成深度笔直的内容展现。

  总的来说，个性化的定制合著作牌调性的构思内容，才完成了宝马推送中视觉体会一流、阅览作用极佳的著作。如想了解更多精彩事例，继续重视「小编备用」！