图片跟随路径循环运动，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. KiCAD输出生产文件

    KiCAD输出生产文件 本文包括PCB生产制造的所有文件的输出方法,包括:BOM.坐标.锡膏层.GERBER.钻孔.丝印和装配图 一.KiCAD导出BOM KiCAD导出BOM有以下几种办法: 注意: ...

  2. sysprep

    今天做虚拟机模板,以及克隆.单纯的克隆会造成很多冲突问题的产生,所以在这里,windows自带的sysprep功能很好的解决了这一点. 路径位于:C:\Windows\System32\Sysprep ...

  3. MYSQL-连续出现的数字

    编写一个 SQL 查询,查找所有至少连续出现三次的数字. +----+-----+| Id | Num |+----+-----+| 1 | 1 || 2 | 1 || 3 | 1 || 4 | 2 ...

  4. Hibernate与Mybatis的简单区别

    数据库连接创建.释放频繁造成系统的资源浪费从而影响系统性能,可以使用数据库连接池解决此问题,之前的java应用程序sql语句也是写在java代码中造成系统可维护性差,实际应用的sql变化较大,sql变 ...

  5. 图像元数据编辑软件：MetaImage使用流程讲解

    MetaImage是唯一的macOS工具,允许在处理所有类型的标签格式时编辑,读取和写入元数据.在时尚的界面中导航,您可以更改图像元数据的所有内容,并对数百张相似的照片进行相同的编辑. https:/ ...

  6. 【时间】Unix时间戳

    UNIX时间戳:Unix时间戳(英文为Unix epoch, Unix time, POSIX time 或 Unix timestamp) 是从1970年1月1日(UTC/GMT的午夜)开始所经过的 ...

  7. PHP FILTER_VALIDATE_REGEXP 过滤器

    定义和用法 FILTER_VALIDATE_REGEXP 过滤器根据兼容 Perl 的正则表达式来验证值. Name: "validate_regexp" ID-number: 2 ...

  8. Android中怎么破解游戏之修改金币数

    我们在玩游戏的时候总是会遇到一些东东需要进行购买的,但是我们可能又舍不得花钱,那么我们该怎么办呢?那就是用游戏外挂吧!我们这里说的是Android中的游戏,在网上搜索一下移动端游戏外挂,可能会找到一款 ...

  9. git stash 保存和恢复进度

    1. stash当前修改 git stash会把所有未提交的修改(包括暂存的和非暂存的)都保存起来,用于后续恢复当前工作目录. 比如下面的中间状态,通过git stash命令推送一个新的储藏,当前的工 ...

  10. Ext 消息框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...