大家好，我是灰色执照~最近我们公众号一直致力于制作一些原创教程。这些教程往往是别人已经实现的效果。我们通过分析+模仿，实现和那些优秀作品类似的效果。
在整个设计的过程中，我们设计师最好还是了解一下你的上下游同事的工作和任务，有利于我们把自己的工作做得更好，和同事交流沟通更加的方便。当然还有另外一个更大的好处：没有人可以忽悠你说实现不了（坏笑）
虽然之前我们的图文教程写的非常详细，但是依旧有基础差的同学对某个具体步骤有疑问，于是此次写教程我特地录制了一份视频。对教程有疑问的同学，可以观看教程顶部的视频。
▲高德开放平台上主页上实现的飞线图效果。（如果不小心侵犯了您的权益，请联系我删除）
▲其他网站Banner上实现的飞线图效果（如果不小心侵犯了您的权益，请联系我删除）
实现飞线动效主要是用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%左右。整个路径就变短了（变成了只有整个路径的十分之一那么长）当然，你也可以根据你的需要，弄成更长一点或者更短一点儿。
现在我们播放一下，看看的效果
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、由于部分路径会遮挡飞机，在做好上面的步骤之后，把三个小飞机图层放置到最顶端即可。
就这样，整个效果就做好了。怎么样，简单吧？
设计部分的教程到这里就结束了，我们接下来教大家如何用代码实现。
不过呢，冰冻三尺非一日之寒，咱先不要着急，编码前，我突然想吟诗一首：
效果做得好，不能落地它始终是飞机稿；
跟着灰哥搞，开发小哥再不说实现不了；
做梦也会笑，平凡人生能遇到灰色执照。
步骤一：绘制好底图和要动的光线图片
在开始代码之前，我们先绘制一个透明背景的插图底图。（我这里用的是PS，你可以根据自己习惯选择需要的软件）
弄好这个底图以后，我们再弄一个光线小图片。它的尺寸是13px×3px。由于这个图片太小，怕你看不清。所以我特意放到一个深色背景上了。实际上是透明背景的。需要注意的是：这个小图片头部是朝着右侧的。因为CSS的这个属性非常神奇，它会自动旋转角度。
这种图片的做法其实非常简单，只是用到了ps的画笔功能而已，打开控制的渐隐即可得到头重脚轻的笔触。
步骤二：编写DOM代码
接下来我们就要开始编写整个页面的Dom结构了。
整个
步骤三：编写动画样式
对于最外层的
接下来就是给图片加上动画了。
加上这个之后，整个动画就完全写完了。可以流畅的动起来了。
整个动画你唯一要学习的就是offset-path这个属性。其中，最难理解的就是M11091L170123这个部分了。如果你玩过拉斐尔JS这样的SVG，或者你对Canvans有一定了解，那就很容易懂其中的原理了。所谓M和L其实就是moveTo和lineTo。他的意思是绘制直线的起点和终点。
这是一个canvans的例子，他使用的就是moveTo和lineTo来绘制一条直线。它的参数为moveTo(x,y)，也就是点的left和top值。
红点距离左侧110px，距离顶部91px。蓝点距离左侧170px距离顶部123px。所以最终得到的offset-path:path('M11091L170123');
就这么简单，只是确定了2个点的位置，动画就自动执行了。令人感到惊讶的是：我们不需要调整图片旋转的角度。
现在你已经学会原理了，利用这个方法，把4张图片的offset-path都设置好。整个动画就完成了。它的效果如下：
需要注意的是：请用chrome或者Edge浏览器打开。不要用Safari这个浏览器。
可能有的同学会问：我用animate样式，控制图片的leftright并且通过CSS调整图片的角度行不行？
当然可以了，但是遇到曲线，你就完蛋了。这也是offset-path的最强大的地方：它可以沿着路径移动。他几乎是把AE里面的自动定向这个功能完全做到了CSS里面。
接下来，我们就来做一个曲线的例子：
步骤一：制作好底图和小飞机图片
▲我们先准备一个这样的背景图。怎么制作，我就不详细再说了。
▲这就是我们用PS制作好的地图背景了。
这是在阿里巴巴iconfont上下载的小飞机图片。下载SVG格式最好。因为矢量的不会失真，还可以随便你修改大小。
步骤二：尝试学习一下原理（但是没学会）
在维基百科里面，都是这种复杂的数学公式，打开这个页面看了不到3秒钟我就差点晕倒了。咱们设计师必须另辟蹊径。寻找更简单，更适合我们的方法。
步骤三：通过设计软件直接获取我们需要的“代码”
那什么是简单的方法呢？咱们有设计软件呀。我们平常使用到的设计软件其实就是那些数学很厉害的人使用代码和公式，把这些曲线给弄成可视化的界面和交互了而已。所以，我们只要利用工具导出SVG，然后用记事本去查看SVG里面的“代码”就可以了。
1、我们先选中第一个曲线，然后右键导出为SVG。
导出的时候，默认只有路径的大小，我们要把他设置成画布大小（图片中因为路径是白色，所有在透明背景上看不太清楚）
2、把导出的SVG用记事本或者VSCode打开，可以看到，整条路径的“代码”了。有了这个“代码”，我们就再也不需要学习研究那些所谓的公式和算法了。
请大家一定要记住此处的path="M131,151s155-95,255-10"因为我们的教程后续还有几个地方都要用到这个玩意。
步骤四：编写网页的DOM结构
网站的DOM结构非常简单，lineDemo2这个DIV放一个背景图。内部放一个小飞机的图片而已（实际上，里面会放3个小飞机）。
步骤五：编写动效CSS
我们还是根上面例子一样，先制作flyRun这个动画样式。它只是单纯的控制offset-distance这个属性，和AE中你对路径偏移K帧是一模一样的。
这里面最难的部分就是offset-path里面对贝塞尔这个曲线的设置了，我们直接从记事本里面copy了这段“代码”进来。等于就直接完成了。我们看看效果：
▲效果还是很不错的，完全符合我的预期。
用同样的办法，把另外两根线条的样式写一下就完事了。
offset-path属性对于制作飞线图来说实在是太方便了。但是这么好的东西，居然有致命的弱点：
拿我们用到的path这个属性来说，safari的浏览器就完全不支持。所以，如果你的网站需要考虑苹果的用户，很明显，利用CSS属性来制作飞线图就变得力不从心了。这时我们可以尝试利用SVG的动画，或者说SVGA来试试这种效果。
比起CSS实现飞线图动画，SVG的animate属性适配则好很多。除了古老的IE浏览器不支持外，其他的浏览器支持得都还比较好。
步骤一：编写DOM结构代码
这次我们的DOM结构代码很简单粗暴，超乎你的想象，因为我们把下载到的SVG直接用VSCode打开，把里面的代码复制出来。
最外层一个
里面的标签看起来很复杂，其实就是我们从iconfont里面下载下来的那个小飞机.svg文件。用VSCode或者用记事本打开后，复制里面的代码过来就可以了。
DOM结构和样式完成后得到的结果是这样：
▲一个背景图，上面飘着一个小飞机
仔细观察你会发现，width=24pxheight=24px好几个地方都是24。这是因为我们的小飞机太小了。他的尺寸就是24×24。他里面的这一段
也就是说：改成694×411。只要你不修改
▲把SVG的画布改大，这样小飞机可以飞的范围就大了
接下来就要给小飞机加上飞线的代码了。也就是
需要注意的是：path="M131,151s155-95,255-10"和我们上一个CSS例子里面的一模一样，就是来自于ps导出的那个SVG路径。原来这些原理都是相通的。（我之前就和大家强调过，我们设计师不需要去研究那些让人头疼的公式）
此处的标签相信你看字面意思也很容易看明白：
但是，加入这个标签后，并不会有任何动画发生，这是因为这个动画标签不知道作用于谁。
你有2种办法让动画标签动起来：
方法1：把
方法2：加上一个
我们随便选取这2种办法中的一种即可。
我采用的是第二种，接下来我们看一下效果：
查看效果你会发现，小飞机居然有一点儿偏移。为什么会这样呢？因为小飞机的宽度和高度都是24px，也就是说，我们在起始点和结束点应该减去宽度和高度的一半，也就是12px，飞机移动的路径就会移动到正中心。
那么
path="M131,151s155-95,255-10"
就要改成：
path="M119,139s155-83,255-22"
经过对点的中心校正后，我们再来看看效果：
一切都非常的完美了。它最终的代码如下：
几乎没有什么CSS，没有JS，只靠着一个
最终效果：
到这里，我们用SVG来开发的方式就已经完全弄好了。接下来我们再尝试尝试用JS完成飞线图。使用JS会有很多种办法，例如Echarts、拉斐尔JS、p5JS或者直接用Canvas动画。我先用Echarts做一个简单的尝试。
步骤一：制作DOM结构
Echarts的DOM结构非常简单，准备一个DIV就可以了。他会自动渲染一个