一根会飞的线会分为三种方式实现：css， svg animate , d3; 由于每一部分的篇幅的都比较大，所以会分成三篇文章来写。

我们经常在一些电商监控大屏上看到这样的效果用于展示商品的迁移路径：

2765040-8a606cf418ec3eec.gif

这样的效果图上最关键的部分就是那根会飞的线。

接下来我们就通过最简单的方式：CSS ，来实现这样的效果。

贝塞尔曲线

由图上可以看到，线都是沿着一条曲线运动的，这条曲线是通过两点确定的。在 svg 路径中，绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。弧形的绘制比较复杂，所以我们通过在两点直接绘制一条二次贝塞尔曲线来确定运动路径。

贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。

二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

  1.  Q x1 y1, x y (or q dx1 dy1, dx dy)
  1. <svg width="190px" height="160px">
  2.   <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
  3. </svg>

2.png

介绍完概念，接下来，我们就自己来花一根贝塞尔曲线来约定线的运动轨迹：

  1. <svg wdth="500px" height="300px">
  2.     <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 290 Q 250 0 490 290" />
  3. </svg>

这样在页面上可以看到这样一条贝塞尔曲线：

1.jpg

等待起飞

有了运动规则，我们加下来加上运动的主角：

  1. <div class="line"></div>
  1. .line {
  2.    position: absolute;
  3.    top: 10px;
  4.    left: 10px;
  5.    width: 100px;
  6.    height: 5px;
  7.    border-radius: 15%;
  8.    background-image: linear-gradient(to right,
  9.         rgba(37, 216, 253, 0) 0%,
  10.         rgba(37, 216, 253, .1) 40%,
  11.         rgba(37, 216, 253, .3) 70%,
  12.         rgba(37, 216, 253, 1) 100%);
  13.     offset-path: path('M10 290 Q 250 100 490 290');
  14.     offset-distance: 0%;
  15. }

其中样式 offset-path 表示了这个色块的运动轨迹。这样子我们就得到了一个等待起飞的线了：

3.jpg

动画效果

CSS 变换和动画都允许选择要为动画使用的缓动类型。您可以使用影响相关动画的缓动（或有时称为 timing）的关键字。还可以完全自定义你的缓动，借此方式更自由地表达应用的个性。

以下是可在 CSS 中使用的一些关键字：

  • linear
  • ease-out
  • ease-in
  • ease-in-out

线性动画 - linear

没有任何缓动的动画称为线性动画。线性变换的图形看起来像这样：

4.png

随着时间推移，其值以等量增加。采用线性运动时，动画内容往往显得很僵硬，不自然，让用户觉得不协调。一般来说，应避免线性运动。

缓出动画 - ease-out

缓出使动画在开头处比线性动画更快，还会在结尾处减速。

5.png

缓出一般最适合界面，因为开头时快速使动画有反应快的感觉，同时在结尾仍允许有一点自然的减速。

缓入动画 - ease-in

缓入动画开头慢结尾快，与缓出动画正好相反。

这种动画像沉重的石头掉落一样，开始时很慢，然后快速地重重撞击地面，突然沉寂下来。

6.png

缓入缓出动画 - ease-in-out

缓入并缓出与汽车加速和减速相似，使用得当时，可以实现比单纯缓出更生动的效果。

7.png

在这个示例中我选择的动画效果是缓入缓出动画，你也可以根据自己的需求调整动画效果：

  1. .line {
  2.   ...
  3.   animation: flyline 2s ease-in-out;
  4. }
  6. @keyframes flyline {
  7.   from {
  8.      offset-distance: 0%;
  9.   }
  10.    to {
  11.      offset-distance: 100%;
  12.   }
  13. }

这样子线条就可以动起来啦：

8.gif

小结

以上就是使用 css 画一根飞线的内容，相对于使用 svg animate 和 d3 方式画线，css 的实现方式还是比较简单，但是功能也没有后面两者强大，接下来我会介绍怎么使用 svg animate 和 d3 来画这根线 ～