图片跟随路径循环运动，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. 聊聊动态链接和dl_runtime_resolve

    写在前面 linux下的动态链接相关结构,重新回顾_dl_runtime_resolve的流程以及利用方法 动态链接相关结构 为了高效率的利用内存,多个进程可以共享代码段.程序模块化方便更新维护等,动 ...

  2. Linux设置以root用户开机自动登录桌面

    目录 Ubuntu 18.04系统下设置 Redhat7.6系统下设置 Ubuntu 18.04系统下设置 1. 允许使用root用户登录桌面    Ubuntu默认不允许使用root用户登录桌面的, ...

  3. docker 部署 mysql8 的 docker-compose 文件编写

    version: '3.4' services: mysql: container_name: platform.mysql. deploy: resources: limits: memory: 3 ...

  4. 【读书笔记】剑指offer

    导语 所有的编程练习都在牛客网OJ提交,链接: https://www.nowcoder.com/ta/coding-interviews 九章算法的 lintcode 也有这本书的题目.https: ...

  5. uva658 dijkstra+状态压缩

    题目大意: 假定有n个潜在的bug和m个补丁,每个补丁用长为n的字符串表示.首先输入bug数目以及补丁数目.然后就是对m 个补丁的描述,共有m行.每行首先是一个整数,表明打该补丁所需要的时间.然后是两 ...

  6. 安装配置oh-my-zsh

    1.下载安装iterm:https://www.iterm2.com/ 2.安装zsh 查看系统当前使用的shell $ echo $SHELL /bin/bash 查看系统是否安装了zsh $ ca ...

  7. Tomcat---概述

    1.Tomcat  是  一个  免费.开源  的 web应用服务器: 属于  轻量级  应用服务器,在中小型系统.并发量不大的情况下  被广泛使用: 2.Tomcat 是  Apache下的核心项目 ...

  8. node快速入门

    nodejs是一个方兴未艾的技术,近几年一直活跃在各大论坛.其实nodejs也只是新瓶装旧酒,只是它的一些激进的特性使她显得很神秘.nodejs使用的是JavaScript的语法,所以在学习nodej ...

  9. 揭秘阿里云EB级大数据计算引擎MaxCompute

    日前,全球权威咨询与服务机构Forrester发布了<The Forrester WaveTM: Cloud Data Warehouse, Q4 2018>报告.这是Forrester ...

  10. Yii2 搜索

    搜索的形式: 第一种,点击空白处: <?php $data=['0'=>'已删除','10'=>'正常','1'=>'锁定']; ?> <table style=' ...