图片跟随路径循环运动，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. 【转】网站SEO优化中网站的三大标签指的是什么？

    对于很多刚刚接触SEO的新手朋友来说,会经常听到别人提及网站的三大标签.那么,具体什么是网站的三大标签呢?其实网站的三大标签指的就是title.keywords.description,通俗一点也可以 ...

  2. 路由网关--spring cloud zuul

    路由网关--spring boot Zuul 1.为什么需要Zuul? Zuul Ribbon 以及 Eureka 相结合,可以实现智能路由和负载均衡的功能, Zuul 能够将请求流量按某种策略分发到 ...

  3. 开启.NET Core 3时代，DevExpress v19.2.5带你全新启航

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  4. ecshop前台英文后台中文的设置方法

    ecshop前台英文后台中文的设置方法 这里有两种方法: 第一种方法: 打开 admin/includes/init.php 文件 找到$_CFG = load_config(); 在它下面增加一行代 ...

  5. Yii2数据库操作 事务

    Yii2 DAO http://blog.csdn.net/hzqghost/article/details/44116039

  6. qt中使用sqlite存储数据

    一.sqilte的安装 在Windows上安装SQLite: 请访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-tools-win32-*.zi ...

  7. SQL server 数据库安装

    一.安装 1.点击setup双击 2.选择第一条-安装一个新的SQLserver 3.一路点击next 4.product Key-选择第一个:试用版 5.setup Role-选择所有 6.sell ...

  8. Sqli labs系列-less-3 。。。

    原本想着找个搜索型的注入玩玩,毕竟昨天被实力嘲讽了 = = . 找了好长时间,我才发现,我没有 = = ,网上搜了一个存在搜索型注入的源码,我看了好长时间,楞没看出来从哪里搜索注入了....估计是我太 ...

  9. STM32嵌入式开发学习笔记（五）：中断

    我们过去了解了用循环实现延时,或用系统滴答计时器实现延时,但这两种方法都有一种问题:会阻塞处理器的运行.下面我们学习一种不阻塞处理器运行其他事件的功能:时钟中断. 所谓中断,就是让处理器放下手头的事情 ...

  10. STM32嵌入式开发学习笔记（三）：使用按键控制小灯

    按键和小灯一样,也是通过GPIO外设与主板连接,也是通过GPIO_InitStruct类型结构体控制其工作. 查阅技术手册,按钮连接GPIOA控制下的管脚0. 但与之不同的是,按键是一种输入设备,输入 ...