圖片跟隨路徑循環運動，dom也跟着路徑運動(利用實時獲取坐標位置的方法，改變transform)
1，准備路徑
a,自己腦補路徑
b,在ps上畫好，然后在保存成png-24圖片，背景透明，在網站https://www.vectorizer.io/上生成path路徑
2，以下是完整代碼及注釋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #con { width: 500px; height: 500px; background: #146257; position: relative; } </style> </head> <body> <div id="con"> <svg id="svg"></svg> </div> </body> <script src="../libs/d3.js"></script> <script src="../libs/jquery.js"></script> <script> var con = $('#con');//dom容器 var svg = d3.selectAll('#svg')//d3操作的svg對象和jq對象不一樣 .attr('width','500')//d3操作的對象px屬性都不能帶單位 .attr('height','500') .attr("display","inline-block") .attr('viewBox','0 0 5000 5000');//通過png-svg轉換的把實際坐標放大了10倍 svg.append('path')//插入路徑 .attr("id","motionPath") .attr("stroke","rgba(0,0,0,1)") .attr("fill","none") .attr("stroke-miterlimit","10") .attr("d","M1240 2976 l-245 -22 -155 -72 c-85 -41 -160 -79 -167 -85 -27 -28 -223 -632 -223 -687 0 -13 30 -138 66 -279 64 -248 68 -260 142 -399 83 -158 72 -146 281 -292 148 -102 301 -177 841 -413 l285 -124 165 -26 c91 -15 215 -29 275 -32 61 -4 229 -25 375 -47 170 -25 318 -42 411 -45 143 -5 148 -5 255 26 89 27 164 62 413 194 274 146 311 169 381 234 74 70 77 74 103 162 15 49 27 99 27 111 0 12 -21 94 -47 183 l-48 161 -126 136 -126 135 -329 49 c-312 46 -508 64 -736 65 l-78 1 -118 143 c-106 127 -128 160 -207 315 l-88 173 -176 167 -177 167 -305 63 c-204 42 -324 62 -364 61 -33 -1 -170 -11 -305 -23z"); svg.append('image')//插入圖片 .attr("id","img") .attr("xlink:href",'../imgs/2.png') .attr("x","-130") .attr("y","-390") .attr("width","260") .attr("height","390"); svg.append('animateMotion')//插入動畫圖片運動動畫 .attr("id","animimg") .attr("xlink:href","#img") .attr("dur","100s") .attr("begin","0s") .attr("fill","freeze") .attr("cy","0") .attr("repeatCount","indefinite"); d3.selectAll($("#animimg")).append('mpath')//讓上面的動畫關聯運動路徑 .attr("xlink:href","#motionPath"); creatDom();//創建提示dom move1({//讓提示dom跟着路徑運動 id: '#motionPath',//路徑id class:'.con1'//dom的class }); function move1(obj){ var path = $(obj.id)[0];//獲取路徑dom對象 var tol = path.getTotalLength();//獲取路徑總長 var start = path.getPointAtLength(0);//獲取路徑上開始點的坐標 var time = 1000;// var interval = time /10;//運動幀數 運動幀數 * time為運動總時間 var i = 0; var per = tol / time; var ttn = +new Date(); var then = +new Date(),now,delta; function move(){ requestAnimationFrame(move);//循環調用move函數 調用間隔取決於瀏覽器繪制時間 now = Date.now(); delta = now - then; if (delta > interval) {//當時間間隔大於運動幀數的時候調用繪制動畫函數 then = now - (delta % interval);//更新時間 draw(); } } var x = start.x/10 + 30 + 'px'; var y = start.y/10 - 50 + 'px'; $(obj.class).css({ transform: 'translate(' + x + ',' + y+')' }); move(); function draw(){ i++; start = path.getPointAtLength(i*per); x = start.x/10 + 30 + 'px'; y = start.y/10 - 50 + 'px'; $(obj.class).css({ transform: 'translate(' + x + ',' + y+')' }); i === time && (i = 0); } } function creatDom(){ var dom1 = $('<div class="con1"><div class="cartips1"></div></div>').css({ width:194, height: 95, boxShadow: '1px 0px 5px #ddb16a,0px 1px 5px #ddb16a,-1px 0px 5px #ddb16a,0px -1px 5px #ddb16a', position:'absolute', left: 0, top: 0 }); con.append(dom1); var p1 = '<p>狀態: 道路擁堵<br>信息: 預計擁堵10分鍾<br>擁堵長度: 2公里<br>時間: <span class="settipsTime1"></span></p>'; var $p1 = $(p1).css({ color: '#ffffff', fontSize: 14, paddingLeft: 12, paddingTop: -5, textAlign: 'left' }); $('.cartips1').append($p1); $('.settipsTime1').text(getTime()); function getTime(){ var data = new Date(), year = data.getFullYear(), mon = data.getMonth() + 1, day = data.getDate(), hour = data.getHours(), minu = data.getMinutes(); mon < 10 && (mon = '0' + mon); day < 10 && (day = '0' + day); hour < 10 && (hour = '0' + hour); minu < 10 && (minu = '0' + minu); return year + '-' + mon + '-' + day + ' ' + hour + ":" + minu; } } </script> </html>