图片跟随路径循环运动，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>

d3操作svg路径动画，及dom移动的更多相关文章

  1. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  2. SVG路径动画解密

    原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...

  3. svg路径动画心得

    svg动画,随着路线运动,项目中需要用到,接触的时候感觉很高级,但是不会-无从下手呀!于是在网上找相关资料,先借鉴再修改成自己的. <svg width="500" heig ...

  4. svg路径蒙版动画

    svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...

  5. 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...

  6. 使用snapjs实现svg路径描边动画

    一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然 ...

  7. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  8. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  9. css3 svg路径蒙版动画

    css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...

随机推荐

  1. 8、服务发现&服务消费者Feign

    spring cloud的Netflix中提供了两个组件实现软负载均衡调用,分别是Ribbon和Feign.上一篇和大家一起学习了Ribbon. Ribbon :Spring Cloud Ribbon ...

  2. 【JS学习】慕课网2-7 练习题：制作新按钮，“新窗口打开网站” ，点击打开新窗口。

    要求: 1.新窗口打开时弹出确认框,是否打开 提示: 使用 if 判断确认框是否点击了确定,如点击弹出输入对话框,否则没有任何操作. 2.通过输入对话框,确定打开的网址,默认为 http://www. ...

  3. 在AndroidStudio2.3.2下JNI开发的详细步骤(转)

    转自:http://blog.csdn.net/luhaoying1111/article/details/72468867 安装NDK 在工具栏点击File->Settings->App ...

  4. php操作redis--列表篇

    常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...

  5. vscode开发vue项目保存时自动执行lint进行修复

    vscode下载eslint插件 vscode进行设置 找到settings.json 在里面写入如下内容进行保存 {     "eslint.autoFixOnSave": tr ...

  6. 排序+模拟+优先队列——cf1248E

    其实是个模拟题.. /* 每个人都有一个口渴时间,如果口渴时,其前面没有人在排队,那么其就去排队接水,反之一直等到前面没有人排队 问每个人接完水的时间 每个没轮到的人都在位置上等前面的人接完水,然后他 ...

  7. 线段树维护线性基并——17西安icpc a

    #include<bits/stdc++.h> using namespace std; #define N 10005 int a[N],n,k,q; struct LB{ ]; LB( ...

  8. 构造——cf1213E

    分情况讨论,构造很简单 #include<bits/stdc++.h> using namespace std; #define N 200005 ],t[]; int n,s1,s2,t ...

  9. Linux环境下安装PHP的gd库

    当前使用的安装包版本: freetype-2.4.0.tar.bz2 jpegsrc.v9.tar.gz libpng-1.6.28.tar.gz 1.安装freetype tar jxvf free ...

  10. BZOJ 2005: [Noi2010]能量采集(容斥+数论)

    传送门 解题思路 首先题目要求的其实就是\(\sum\limits_{i=1}^n \sum\limits_{j=1}^m [(gcd(i,j)-1)*2+1)]\),然后变形可得\(-n*m+2\s ...