从设计到代码实现，落地式教学，杜绝“ 假 大 空”
温馨提醒：
本篇文章大概 9300 字，配图 86 张，约 13 分钟视频教程一个。配合文章制作 1 个示例网页，代码示例 5 个。阅读设计部分需要 10 分钟。阅读代码部分需要 20 分钟。
文章主要大纲：
设计部分
1、用AE来制作飞线图效果。
代码部分
1、CSS 实现飞线图效果。
2、SVG 实现飞线图效果。
3、JS 实现飞线图效果。
————————————————————————————————————————
大家好，我是 灰色执照~
最近我一直致力于制作一些原创教程。这些教程往往是别人已经实现的效果。我们通过 分析+模仿，实现和那些优秀作品类似的效果。
为了能让效果100%落地， 我们教程上半部分教设计，后半部分教代码。
文章结尾会分享给大家一个不错的 Vue 大屏数据展示 组件库。这个组件库里面也有很多飞线的边框让大家可以直接调用。
如果代码部分你没有兴趣，或者感觉自己学不会，那你可以把这个文章发给你们家的前端小哥。在工作中，我们往往只追求最终实现的效果，至于是不是你一个人完成的，其实并不重要。
在整个设计的过程中，我们设计师最好还是了解一下你的上下游同事的工作和任务，有利于我们把自己的工作做得更好，和同事交流沟通更加的方便。当然还有另外一个更大的好处： 没有人可以忽悠你说实现不了（坏笑）
虽然之前我们的图文教程写的非常详细，但是依旧有基础差的同学对某个具体步骤有疑问，于是 此次写教程我特地录制了一份视频。对教程有疑问的同学，可以看这个的视频：
有的同学喜欢用B站看视频，你也可以复制下面网址，去浏览器中打开，跳转到b站去观看这个教学视频：https://www.bilibili.com/video/BV1154y1J7KN
飞线动效在炫酷的数据可视化，网站 banner 等等很多地方，我们都能看到这种效果。
▲ 高德开放平台主页上实现的飞线图效果。（如果不小心侵犯了您的权益，请联系我删除）
网站地址：https://lbs.amap.com/
▲ 高德开放平台上主页上实现的飞线图效果。（如果不小心侵犯了您的权益，请联系我删除）
▲ 其他网站 Banner 上实现的飞线图效果（如果不小心侵犯了您的权益，请联系我删除）
▲ github 主页上的飞线图效果（如果不小心侵犯了您的权益，请联系我删除）网站地址：https://github.com/
————————————————————————————————————————
设计部分
《用AE实现飞线图效果》
实现飞线动效主要是用 AE 这个软件。
步骤一：制作地图底图
为了让我们的飞线图看起来效果好一点儿，我们先弄一个 地图作为底图。制作地图的话，你可以使用《拉框助手》这款插件，它有 Ps / Xd / Sketch / Figma 版本的。你可以根据你的需要，选择版本。我这里使用的是《Figma拉框助手》。
▲ 这是拉框助手的界面，3个步骤即可绘制好矢量地图。
你拉框的区域是多大，绘制的地图就是多大。简单 3 步，四川省的地图就做好了。接下来，我们把它导出一个透明背景的 png 图片。留着后续放到 AE 里面去使用。
步骤二：制作立体感的地图
1、打开AE，我们 新建一个合成。设置高度和宽度为： 800 * 600。当然，你也可以根据你的需要来设置尺寸。我这里随便弄了一个小一点儿的。
2、新建一个 固态层，作为整个界面的背景色，我们暂时用黑色。
3、 把地图导入 AE，并且拖进合成里面去。
4、打开 3d 图层功能。这样地图就可以「平躺」下去了。
5、调整它的 x 轴。我这里设置成了 -55°，地图就倒下去了，有了透视感。当然你想做平面的飞线图就不弄这个步骤就行了。
到这里，我们的地图地图部分就做好了。接下来就要绘制飞线图的线条了。
步骤三：绘制飞线
新建一个形状层，然后用 钢笔工具绘制几条曲线即可。
▲ 由于教程主要是教学，我不可能每个市都画一根线条。所以我这里随便画了 3 根线条做示范，大家学会方法即可。
我绘制了 3 根 暗橙色飞线，分别命名为飞线1、飞线3、飞线5。
需要注意的是，我又把飞线1、3、5这3个图层分别 复制了一份。分别叫做飞线2、飞线4、飞线6。由于飞线1和飞线2一模一样，所以看起来还是只有 3 根。
▲我们把飞线2、飞线4、飞线6 这 3 个图层线条颜色改成 浅黄色，它们将会是流动的线条。造成一种在深色线条背景下流动的感觉。
步骤四：制作飞线的动画效果
1、点开 飞线2 的图层前面的 小三角，找到 目录后面的 添加那个 小三角形。点击后选择 修整路径（有的汉化包也会把这个名字叫做 修剪路径）
2、把修整路径的 结束改成 10% 左右。整个路径就变短了（变成了只有整个路径的 十分之一那么长）当然，你也可以根据你的需要，弄成更长一点或者更短一点儿。
3、在修整路径的偏移里面对 第一帧 k帧（也就是点一下码表）。然后拖动时间轴，根据你的需要比如 1秒钟 后，把偏移改成 322°。这样就相当于对偏移这个属性K好了关键帧。
现在我们播放一下，看看的效果
4、用同样的办法，把另外两个图层的飞线效果做好。
我们再次预览一下效果
效果其实还可以，但是我觉得颜色有点丑。于是把他们改成了蓝色。
这就是最终的设计完成稿了。
————————————————————————————————————————
《制作加强版飞线效果》
其实刚刚我们已经完成了设计部分，但是我希望在这个基础效果上，尝试改成用一个光点或者小飞机来表示让效果更加炫酷或者有趣。
步骤一：准备小飞机素材
1、下载飞机素材。打开阿里巴巴的 iconfont 网站，搜索飞机这个关键词，我下载的是第一个飞机的 SVG 矢量格式。
左下角第一个 SVG下载 按钮就是了。
2、把之前 飞线2、 飞线4、 飞线6 那几个做好动画的图层都删掉。
▲这是删除后的效果，只剩下背景地图和三根深色曲线了。
3、新建一个 形状图层，用 钢笔工具随便绘制任何一个形状，我这里随便画了一个不规则图形。为了方便看清楚，我还特意用了大红色。
4、用 AI 打开小飞机这个 SVG 图片。 Ctrl+C 复制整个路径。
下一步非常关键，一旦弄错了，你就复制成一个“遮罩”，而不是“形状”了。所以，你一定要看仔细。
5、在刚才绘制的那个形状图层里面，点开图层前面的 小三角 > 目录 > 形状1 > 路径1 > 路径 （选中这个路径）然后 Ctrl+V 粘贴。这样小飞机就复制到了 AE 里面，并且是 形状 不是 遮罩 。之前绘制的不规则红色形状会被粘贴的图形替换掉。
点击一下空白处，发现小飞机已经复制好了。
6、把小飞机改成自己想要的颜色，并且复制 3 个，分别把图层命名为 小飞机1、 小飞机2、 小飞机3。
顺便把他们放到对应的位置。
现在小飞机都准备好了，接下来就要制作动画，让小飞机动起来了。
步骤二：让小飞机沿着路径飞行
点开飞线1图层左侧的“小三角”，一直展开 目录 > 形状1 > 路径1 > 路径。选中路径，然后复制它。
选择 小飞机1 这个图层，然后按一下键盘上的 字母P,也就是 position，调出他的位置属性。选中位置属性，Ctrl+V 把刚才复制的路径粘贴到位置属性上。
就这样，小飞机便会沿着路径动起来了。我们试一试目前的效果。
▲效果倒是很不错，只可惜飞线很生硬，机头的方向，没有沿着路径实时的变化。
步骤三：摆正机头
1、右键小飞机1这个图层，然后选择 变换 > 自动定向
选择后，会弹出一个确定框。我们选择 “沿路径方向设置”。
可以看到，飞机的头部已经摆正了，会随着路径变化。一切都很完美。
2、用同样的办法，把另外两个小飞机都弄好就可以了。
3、由于部分路径会遮挡飞机，在做好上面的步骤之后，把三个小飞机图层 放置到最顶端即可。
就这样，整个效果就做好了。怎么样，简单吧？
学会了这些方法，我们自然可以制作文章开头的飞线效果了~
设计部分的教程到这里就结束了，我们接下来教大家如何用代码实现。
————————————————————————————————————————
不过呢，冰冻三尺非一日之寒，咱先不要着急，编码前，我突然想吟诗一首：
效果做得好，不能落地它始终是飞机稿；
跟着灰哥搞，开发小哥再不说实现不了；
关注公众号，设计和代码咱一起全都教；
做梦也会笑，平凡人生能遇到灰色执照。
代码部分
1、CSS实现飞线图效果
步骤一：绘制好底图和要动的光线图片
在开始代码之前，我们先绘制一个透明背景的 插图底图。（我这里用的是 PS，你可以根据自己习惯选择需要的软件）
弄好这个底图以后，我们再弄一个光线小图片。它的尺寸是13px × 3px。 由于这个图片太小，怕你看不清。所以我特意放到一个深色背景上了。实际上是透明背景的。 需要注意的是：这个小图片 头部是朝着右侧的。因为 CSS 的这个属性非常神奇，它会自动旋转角度。
这种图片的做法其实非常简单，只是用到了 ps 的画笔功能而已，打开控制的 渐隐 即可得到头重脚轻的笔触。
步骤二：编写DOM代码
接下来我们就要开始编写整个页面的 Dom 结构了。
整个 <body /> 标签内非常简单，只有一个 <div /> 包含着 4 个图片标签。由于每个图片动画位置和方向不一致。所以我们给每个图片一个不同名称的样式。
步骤三：编写动画样式
对于最外层的 <div class="lineDemo1" /> 标签，其实样式也非常简单。
接下来就是给图片加上动画了。
我们先定义了一个动画名称，改变 offset-distance 属性。然后对图片1，应用这个动画， 1.5 秒的时间播放完毕。
加上这个之后，整个动画就完全写完了。可以流畅的动起来了。
整个动画你唯一要学习的就是 offset-path 这个属性。其中，最难理解的就是M110 91 L170 123这个部分了。如果你玩过拉斐尔JS这样的 SVG，或者你对 Canvans 有一定了解，那就很容易懂其中的原理了。所谓M和L 其实就是 moveTo 和 lineTo。他的意思是绘制直线的起点和终点。
这是一个 canvans 的例子，他使用的就是 moveTo 和 lineTo 来绘制一条直线。它的参数为 moveTo(x, y) ，也就是点的 left 和 top 值。
红点距离左侧 110px ，距离顶部 91px。蓝点距离左侧 170px 距离顶部 123px。所以最终得到的 offset-path: path('M110 91 L170 123');
就这么简单，只是确定了2个点的位置，动画就自动执行了。令人感到惊讶的是：我们不需要调整图片旋转的角度。
现在你已经学会原理了，利用这个方法，把 4 张图片的 offset-path 都设置好。整个动画就完成了。它的效果如下：
查看我制作好的 完整效果，请点击这里：
https://pslkzs.com/demo/line/lineDemo1.php
需要注意的是：请用chrome或者Edge浏览器打开。不要用Safari这个浏览器。
可能有的同学会问：我用 animate 样式，控制图片的 left right 并且通过 CSS调整图片的角度行不行？
当然可以了，但是遇到曲线，你就完蛋了。这也是 offset-path 的最强大的地方： 它可以沿着路径移动。他几乎是把 AE 里面的 自动定向 这个功能完全做到了 CSS 里面。
接下来，我们就来做一个 曲线的例子：
步骤一：制作好底图和小飞机图片
▲我们先准备一个这样的背景图。怎么制作，我就不详细再说了。
▲这就是我们用PS制作好的地图背景了。
这是在阿里巴巴iconfont上下载的小飞机图片。
下载 SVG 格式最好。因为矢量的不会失真，还可以随便你修改大小。
这次还是和设计教程一样，我打算只绘制 3 根线条。学会了制作一根的方法，你就可以无限复制，活学活用了。
步骤二：尝试学习一下原理（但是没学会）
用代码绘制这种 贝塞尔曲线 看起来很难，它的基础知识你可以看看维基百科：
https://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
在维基百科里面，都是这种复杂的数学公式，打开这个页面看了不到3秒钟我就差点晕倒了。咱们设计师必须另辟蹊径。寻找更简单，更适合我们的方法。
步骤三：通过设计软件直接获取我们需要的“代码”
那什么是简单的方法呢？咱们有设计软件呀。我们平常使用到的设计软件其实就是那些数学很厉害的人使用代码和公式，把这些曲线给弄成可视化的界面和交互了而已。所以，我们只要利用工具导出 SVG，然后用记事本去查看 SVG 里面的“代码”就可以了。
1、我们先选中第一个曲线，然后右键导出为 SVG。
导出的时候，默认只有路径的大小，我们要把他设置成画布大小（图片中因为路径是白色，所有在透明背景上看不太清楚）
2、把导出的 SVG 用记事本或者 VS Code 打开，可以看到，整条路径的“ 代码”了。有了这个“代码”，我们就再也不需要学习研究那些所谓的公式和算法了。
请大家一定要记住此处的 path="M131,151s155-95,255-10" 因为我们的教程 后续还有几个地方都要用到这个玩意。
步骤四：编写网页的DOM结构
网站的 DOM 结构非常简单，lineDemo2 这个 DIV 放一个背景图。内部放一个小飞机的图片而已（实际上，里面会放3个小飞机）。
步骤五：编写动效CSS
我们还是根上面例子一样，先制作 flyRun 这个动画样式。它只是单纯的控制 offset-distance 这个属性，和AE中你对路径偏移K帧是一模一样的。
这里面最难的部分就是 offset-path 里面对 贝塞尔这个曲线的设置了，我们直接从记事本里面 copy 了这段“代码”进来。等于就直接完成了。我们看看效果：
▲效果还是很不错的，完全符合我的预期。
用同样的办法，把另外两根线条的样式写一下就完事了。
最终效果，你可以在这个网站看到：
https://pslkzs.com/demo/line/lineDemo1.php
需要注意的是：请用chrome或者Edge浏览器打开。不要用Safari这个浏览器。
offset-path 属性对于制作飞线图来说实在是太方便了。但是这么好的东西，居然有致命的弱点：
拿我们用到的 path 这个属性来说，safari 的浏览器就完全不支持。所以，如果你的网站需要考虑苹果的用户，很明显，利用 CSS 属性来制作飞线图就变得力不从心了。这时我们可以尝试利用 SVG 的动画，或者说 SVGA 来试试这种效果。
————————————————————————————————————————
2、SVGA实现飞线图效果
比起 CSS 实现飞线图动画，SVG 的 animate 属性适配则好很多。除了古老的IE浏览器不支持外，其他的浏览器支持得都还比较好。
步骤一：编写DOM结构代码
这次我们的 DOM 结构代码很简单粗暴，超乎你的想象，因为我们把下载到的 SVG 直接用 VS Code 打开，把里面的代码复制出来。
最外层一个<div class="lineDemo2" /> 它的样式和上一个例子一模一样。就是设置一下大小，然后给一个背景图而已。
里面的 <svg /> 标签看起来很复杂，其实就是我们从 iconfont 里面下载下来的那个小飞机.svg文件。用 VS Code 或者用记事本打开后，复制里面的代码过来就可以了。
DOM结构和样式完成后得到的结果是这样：
▲一个背景图，上面飘着一个小飞机
仔细观察你会发现，width=24px height=24px 好几个地方都是 24 。这是因为我们的小飞机太小了。他的尺寸就是 24 × 24。他里面的这一段<path />是无法飞到超过 24px 的地方的。所以，我们手动改一下， 把他改成和画布一样大小。
也就是说：改成 694 × 411。只要你不修改 <path /> 里面的东西，小飞机并不会变大。只是放置 小飞机的画布变大了而已。
▲把SVG的画布改大，这样小飞机可以飞的范围就大了
接下来就要给小飞机加上 飞线的代码了。也就是 <animateMotion /> 标签
需要注意的是： path="M131,151s155-95,255-10" 和我们上一个 CSS 例子里面的一模一样，就是来自于ps导出的那个 SVG 路径。原来这些原理都是相通的。（我之前就和大家强调过，我们设计师不需要去研究那些让人头疼的公式）
此处的标签相信你看字面意思也很容易看明白：
begin 就是什么时候开始（用于设置延迟）
dur 就是动画持续时间（我设置了2秒钟）
rotate 就是设置飞机头是否和路径一致（相当于AE中的自动定向）
但是，加入这个标签后，并不会有任何动画发生，这是因为这个动画标签不知道作用于谁。
你有 2 种办法让动画标签动起来：
方法1：让 <animateMotion /> 出于 <path/> 里面。
方法2：加上一个 <g /> 标签，代表父节点增加了一个“组”。
我们随便选取这 2 种办法中的一种即可。
我采用的是第二种，接下来我们看一下效果：
查看效果你会发现，小飞机居然有一点儿偏移。为什么会这样呢？因为小飞机的宽度和高度都是 24px，也就是说，我们在起始点和结束点应该减去宽度和高度的一半，也就是 12px，飞机移动的路径就会移动到正中心。
那么
path="M131,151s155-95,255-10"
就要改成：
path="M119,139s155-83,255-22"
经过对点的中心校正后，我们再来看看效果：
一切都非常的完美了。它最终的代码如下：
几乎没有什么 CSS，没有 JS ，只靠着一个 <animateMotion /> 标签就搞定了这一切。这真的是一个非常棒的方案。现在你已经学会了制作 SVGA 的动画了，利用这个方法，把另外 2 个小飞机搞定即可。
最终效果：
最终效果，你可以在这个网站看到：
https://pslkzs.com/demo/line/lineDemo1.php
到这里，我们用 SVG 来开发的方式就已经完全弄好了。接下来我们再尝试尝试用 JS 完成飞线图。使用 JS 会有很多种办法，例如 Echarts、拉斐尔JS、p5JS 或者直接用 Canvas 动画。我先用Echarts做一个简单的尝试。
————————————————————————————————————————
3、Echarts实现飞线图效果
步骤一：制作DOM结构
Echarts 的 DOM 结构非常简单，准备一个 DIV 就可以了。他会自动渲染一个<canvans /> 画布到浏览器上，Echarts就是在这个画布上不停的写入和擦除。如果刷新频率比较快，我们看起来便是动画了。
<div id="main" style="width: 694px;height:411px; margin:0 auto;"></div>
上面就是他的所有 DOM 结构了。我们的背景图片大小是 649×411，所以 DIV 的大小也弄成一样。
步骤二：引入Echarts封装好的脚本
<script crossorigin="anonymous"
integrity="sha512-ppWbHq6q2f7HAwS481w6qikuC0XEeBnmkRg6KWnWg3zSIbJwWWBgsCD
MAxzSB7SVqXzWwSYQ2s8TSJKjnaikMg=="
src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
我们直接从 CDN 里面复制一下就可以了。这样做的好处是：如果大家都从 cdn引用，你的浏览器就有缓存了，加载起来更快。
cdn 引用的地址为：
https://cdn.baomitu.com/echarts
步骤三：设置飞线的起点和终点
设置起点和终点很容易理解，就是从什么地方，飞到另一个地方。
很遗憾的是，Echarts 中如果把点设置到一起，他们只能按照一种弯曲程度飞行。类似于下图：
但是，如果你把飞线路径的 弯曲 设置成 负数，又是下面这种情况了：
因此，我们还不得不把线条分开，我们这里分成了 2 组。实际上如果每个小飞机需要不同的速度，你还得分成 3 组。
以下就是 Echarts 用到的全部代码了：
最终的效果如下：
通过简单的尝试 echarts，发现：
1、和CSS或SVG的角度不同，飞机的头部必须朝向顶部（CSS和SVG方式则是朝向右侧）。
2、只需要输入起始点和终止点。这一切就都完成了。是目前方案里面最轻松的一个。
3、配置项参数多，可以设置成飞机带不带拖影，影子持续长度。可以调整飞机飞过路径弧度大小。
当然，echarts 似乎还有一个地方达不到我们的要求： 飞机并不能按照我们绘制的路径飞行（你画一个S形状曲线似乎不能实现）。飞行的路径是靠调整 curveness 这个属性。也就是线条的曲度。虽然我没有仔细去研究这个属性，但是凭直觉它应该是下图中这种规律：
看了我这么多代码方面的示例，各位设计师应该明白： 做为程序员，他学习数学，研究公式完成一条曲线的飞行，成本很大。他们也很难知道从 ps 或者其他设计软件里面去把路径代码给弄出来直接用。所以直接使用 echarts 或类似的方案是他们最优的选择。我们做此类教程的核心就是： 教会大家打通设计和前端开发之间的屏障，让我们的工作可以更好的开展。
以上就是 Echarts 实现飞线图的全部过程了，接下来，我们再试试其他的 JS 方案。
————————————————————————————————————————
4 、 Raphaël JS 实现飞线 图效果
Rapheal.js 是一个矢量图绘图库。你手写 SVG 实现那些动画啥的会很困难也难以理解。直接使用 Raphael 则轻松很多。你可以去 github 上下载和获取相关的信息。
我们这次的曲线就不使用PS绘制了，我们直接用代码画。
步骤一：准备DOM结构
DOM 结构很简单，就是弄一个 DIV 用来放置 Raphael JS 生成的 SVG 即可。当然我们也把那个地图的背景当做背景图。
步骤二：引入Raphael JS
步骤三：绘制画布、曲线、飞机
曲线和小飞机的的路径，都是从 SVG 里面复制出来的。这些代码看起来很恐怖，其实都是 Photoshop 的功劳。
步骤四：编写动画和交互
拉斐尔这个库真的好神奇，它既有 animate() 这样的方法直接做动画，又有 getPointAtLength 这样的方法直接获取路径上某个点的坐标和角度。SVG 加上它之后，似乎是孙悟空拿到了金箍棒。简直太轻松了，不得不佩服写出这种库的作者。
以下就是这个例子的 全部JS代码：
和之前的例子不太一样，为了增加一点趣味性，我在界面上加上了一个 透明的红色方块，你点解界面即可控制飞机开始飞行。你再次点击，飞机则会掉头飞行。你甚至可以在飞机飞到一半的时候，就让他掉头往回飞。
我们来看下最终效果：
最终效果，你可以在这个网站看到：
https://pslkzs.com/demo/line/lineDemo1.php
————————————————————————————————————————
好了，今天的教程就到这里了。
本来还想用最近流行的 p5.js 实现一下效果，并且用 three.js 实现 github 上的那种 旋转立体地球的飞线图。但是这篇教程实在是写的太长了，目前的内容应该需要大家花一点儿时间去消化它。说到底，你搞清楚了这个基础的贝塞尔曲线，换成 canvans 也好，p5.js 也好，我相信都不会有任何问题。在做本期教程的时候，我并没有事先做任何准备，上手就直接写代码和文章。
因为我知道： 贝塞尔曲线基础学得好，制作飞线图效果没烦恼。
教程的最后， 留个大家一个作业，并且分享给大家一个不错的 Vue 大屏数据展示 组件库。这个组件库里面也有很多飞线的边框让大家可以直接调用（仔细观察你会发现，它就是用到我们教的 SVG 加上 <animate /> 标签实现的）
本期作业：
文章开头高德开放平台那种线条从长到短的飞线用 AE 如何制作？
仔细看这些流动的曲线，他们是变长后，再变短。用 AE 如何完成？（小提示：不仅仅是对路径偏移k帧，还要对开始和结束K帧）
本期分享：《DataV》 一个Vue大屏数据展示组件库
这是它组件里面的边框：
分享的地址就是：
http://datav.jiaminghi.com/
每一篇教程的制作都非常不容易，如果你觉文章内容实在，对你有帮助，记得点个 赞 ～ 或者 转发收藏
我的主页还有更多干货～记得去看看
Powered by Froala Editor
76
作品
645
粉丝
33
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册