此前在测验考试制作时，我给与 Nike+ 官网效果为模板仿制。目前 Nike+ 已经升级，看不了之前版本的样式及动态效果，暂且看看样式区别不大的 Nike+ Run Club App 舆图，动画部分依然以此前 Nike+ 官网效果为准。
分析一下，想要仿制跑步路线图，此中有两个难点，第一个是画线动态效果，第二个是路线的渐变效果。画线动画是跑步过程的表示，渐变效果则是实时配速的表示。
光看都能觉得到渐变效果对照难，故这边就先不仿照它，搞定画线动画先。之前在 Nike+ 网页端，还在终点显示了跑步路程，画线动画进行的同时显示已跑的距离。
实现过程网页端显示不比 App，尤其是还想嵌入在文章中的。一般是加载后，再给个点击事件激勾当画效果。
添加折线首先，把跑步折线显示出来，并显示起终点。在高德舆图 API 文档中看到，可以使用 HTML 代码显示点符号的内容，，这样一来，起终点以及距离都直接写 HTML，样式直接用 CSS 写就行。也便利后续画线动画时实时显示已跑的距离。
// 坐标集 var lineArr = [ [116.81333,23.48132], [116.81333,23.48132], [116.81333,23.48132], [116.81352,23.48133], [116.81353,23.48124], ... ]; // 坐标总数，起终点坐标 var count = lineArr.length; var first = lineArr[0]; var last = lineArr[count - 1]; // 结构舆图东西 var map = new AMap.Map(‘map‘); // 跑步路线折线 var polyline = new AMap.Polyline({ map: map, path: lineArr, lineJoin: ‘round‘, strokeColor: "#52EE06", strokeOpacity: 1, strokeWeight: 3, strokeStyle: "solid" }); // 舆图自适应 map.setFitView(); // 起点 new AMap.Marker({ map: map, position: first, zIndex: 11, offset: new AMap.Pixel(-8, -8), content: ‘<div></div>‘ }); // 终点 new AMap.Marker({ map: map, position: last, zIndex: 11, offset: new AMap.Pixel(-8, -8), content: ‘<div></div>‘ }); // 距离 var distance = new AMap.Marker({ map: map, position: last, zIndex: 10, offset: new AMap.Pixel(-64, -12), // 给与 Polyline 类的 getLength() 要领直接获取折线长度 content: ‘<div><span>‘ + (polyline.getLength()/1000).toFixed(1) + ‘</span>公里</div>‘ });
到这里，CSS 稍微修饰一翻，便可正常显示出跑步的路线、起终点坐标以及跑步距离。
添加动画接下来是庞大一点的画线动画，先阐动员画需要显示的：
画线效果为不停加长的折线
有个实时移动的点符号，刚开始是不显示的
画线同时，跑步路线底层为透明效果的黑色折线
画线同时，跑步距离文字跟着动画效果而变革
此中：
折线可操作高德舆图 API Polyline 类的 setPath() 要领来实现
点符号则是用 setPosition() 要领
底层的透明折线则可将上面显示的折线直接拿过来用，要领为 setOptions()
点符号的 setContent()要领
于是将画线效果封装成函数，给与 setTimeout() 要领做延时，为了看到的是效果流畅，将 delay 设置为 40（即 40 毫秒，每秒 25 帧），自增变量并循环执行。
// 变革的折线 var runPolyline = new AMap.Polyline({ map: map, lineJoin: ‘round‘, strokeColor: "#52EE06", strokeOpacity: 1, strokeWeight: 3, strokeStyle: "solid", }); // 移动的点符号 var current = new AMap.Marker({ map: map, zIndex: 12, visible: false, offset: new AMap.Pixel(-8, -8), content: ‘<div></div>‘ }); // 点击舆图事件 map.on(‘click‘, function() { // 将上面上面折线改为黑色透明作为底层 polyline.setOptions({ strokeColor: ‘#000000‘, strokeOpacity: 0.2 }); // 显示画线点符号 current.show(); i = 0; drawline(); }); // 画线动画 function drawline() { if ( i < count ) { current.setPosition(lineArr[i]); runPolyline.setPath(lineArr.slice(0, i+1)); distance.setContent(‘<div><span>‘ + (runPolyline.getLength()/1000).toFixed(1) + ‘</span>公里</div>‘); i++; } else { current.hide(); return; } setTimeout(drawline, 40) }
完善动画