图片跟随路径循环运动，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. vue provide/inject 父组件如何给孙子组件传值

    一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 injec ...

  2. JS window对象 返回下一个浏览的页面 forward()方法，加载 history 列表中的下一个 URL。

    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...

  3. matlab 生成.exe文件 转

    本文链接:https://blog.csdn.net/qq_20823641/article/details/51863737 如何将MATLAB程序编译成独立可执行的程序?如何将编译好的独立可执行程 ...

  4. mutable and immutable

    employees = ['Corey', 'John', 'Rick', 'Steve', 'Carl', 'Adam'] output = '<ul>\n' for employee ...

  5. 【文件分层】/var/run

    /var/run是干什么用的 根据linux的文件系统分层结构标准(FHS)中的定义: /var/run 目录中存放的是自系统启动以来描述系统信息的文件. 比较常见的用途是daemon进程将自己的pi ...

  6. vue基础五

    条件渲染 1.v-if 1.1<template>中v-if条件组 因为 v-if 是一个指令,需要将它添加到一个元素上.但是如果我们想切换多个元素呢?此时我们可以把一个<templ ...

  7. 最常用的C++序列化方案：protobuf

    参考链接:最常用的两种C++序列化方案的使用心得(protobuf和boost serialization) [c++] Google Protobuf库1. 什么是序列化?程序员在编写应用程序的时候 ...

  8. NX二次开发-BlockUI的Tree树控件

    关于BlockUI的Tree树控件只要研究UGOPEN里西门子官方的那个例子在结合去查NXOPEN的帮助基本就可以了.[不过我是看唐工的视频学会的,没办法自己领悟性不太强] //=========== ...

  9. CF 1097D - Hello 2019 D题: Makoto and a Blackboard

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门  Portal  原题目描述在最下面.  给一个数n ...

  10. div + css 边框 虚线

    div + css 边框 虚线 dotted:[点线|有点的|点线式边框|点虚线] .introduce { border:1px dotted gray; margin:8px 5px 8px 10 ...