SVG抽象路径动画及一些自己写的插件介绍
来源：互联网 发布：武汉发展前景知乎 编辑：程序博客网 时间：2024/06/07 18:18
在新公司主要以移动端为主，刚入职不到一个月，根据平常需求写了点组件与插件，以后自己根据工作需要会持续写一些新的组件与插件放到自己的github上分享，先只放2个吧，需要说的在这些插件的文档中都已说明
jquery.toast.js 全局通知插件
一个支持图片压缩与裁剪的vue组件
jq的会持续更新，vue的以后会另起一个仓库专门放vue的组件
想记录 SVG 的知识点的原因很简单，网上关于 SVG 的资料实在太少了。。。自己踩的坑希望别人不要踩了~
路径动画的需求起源于一个运营活动，通过手机摇一摇的频率判断用户的跑动速度快慢，从而使移动产生长短的区别，接口返回的数据会是一个距离，即一个路径的数值，我们将这个数值抽象成一个地图路径的动画即可，通过以上我们总结出完成这个需求需要的几点要求
- 首先我们要先将路径画出来，地图的起点与终点坐标得记录好，地图路径的坐标点必须为了适应设计的路径图纸与屏幕大小动态去计算；
- 要有不同的用户头像去跑动，跑动的线路就是我们设计好的线路；
- 将距离数值抽象为地图上的总路径，每次跑动都有个简单的移动动画；
下面，我会放上一个demo来讲解怎么做，但是这里没有去动态计算地图路径，因为我并不知道你们的路径是怎么的，在看demo之前，请大家尽量先看看为我启蒙的资料来源, 主要看几个属性 offset-distance(目标偏移距离)、stroke-dashoffset(线条偏移距离)
纯CSS实现帅气的SVG路径描边动画效果
使用CSS offset-path让元素沿着不规则路径运动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>svg位移与线条动画-随距离而动</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <style media="screen"> #s1{ border: 1px solid red; stroke: rgb(255, 0, 0); stroke-width: 3px; fill: none; } .run{ border-radius: 50%; transform: rotate(90deg); position: absolute; motion-path: path("M10,10 100,100 200,100, 200,400 500,500"); offset-path: path("M10,10 100,100 200,100, 200,400 500,500"); offset-distance: 0; motion-offset: 0; transition: offset-distance 0.5s linear; } // 下面的这2点我们可以先无视，主要是单纯线条移动时可以采用 stroke-dashoffset 即可 #s1 path{ /*stroke-dashoffset: 843.5069580078125; stroke-dasharray: 843.5069580078125;*/ /*transition: stroke-dashoffset 1s linear;*/ } /*@keyframes move { /* 之前语法 */ 100% { motion-offset: 100%;} /* 当前规范语法 */ 100% { offset-distance: 100%;} }*/ </style> </head> <body> <img class="run" src="./naiyazi.jpg" alt="" width="30px" height="30px"> <img id="img1" src="./naiyazi.jpg" alt="" width="30px" height="30px" style="border-radius: 50%;position: absolute;transition: transform 0.3s" /> <svg id="s1" width="500" height="500"> <path id="path1" d="M10,10 100,100 200,100, 200,400 500,500"></path> </svg> <div> <div> 每执行一次动画的时间-单位(秒): <input id="second" type="number" value="0.5" /> </div> <div> 每执行一次动画移动的距离-单位(%): <input id="percent" type="number" value="10" /> </div> <button id="startAnimate" onclick="animate" type="button" name="button">按设定执行动画</button> <button onclick="reset()" type="button" name="button">重置</button> </div> <div> 根据调整距离动态变化: <input id="distanceChange" min="0" max="100" type="range" value="0"> <span>0</span> </div> </body> <script type="text/javascript"> var path = document.querySelector('#s1 path') // 计算 svg 中 path 的长度 var pathLength = path.getTotalLength() // stroke-dashoffset: 线条移出距离 // stroke-dasharray: 每隔多少距离开始画空白然后再画实现(实现虚线效果) // 为了使后续线条会随着头像移动而增长，我们将路径的 strokeDashoffset 属性设为线条总长度，即将线条完全移出去 // 而这里我们不需要虚线效果所以将路径的 strokeDasharray 设为线条总长即可 function reset () { path.style.strokeDashoffset = pathLength; path.style.strokeDasharray = pathLength; document.querySelector('.run').style['offset-distance'] = '0%'; } // 这里的处理是为了创建一个任务队列令 dom 属性先计算完毕，让动画在路径偏移量为总长后再设置动画，否则会因为偏移量由 0 到总长产生一个动画 setTimeout(function () { path.style.transition = 'stroke-dashoffset 0.5s linear' }) // 由于实际情况我们不可能设死长度，而是依靠屏幕的百分比去计算坐标与距离，所以我们不能在 css 内设死，但可以用来测试 function actions (second, percent) { second = parseFloat(second); percent = parseFloat(percent); // 设置一个定时器模仿距离随时间增长 var distance = 0; // 假设 distance 为到终点的剩余距离， 最高 100% var timeout = setInterval(function () { if (distance >= 100) { clearInterval(timeout); timeout= null; } changeDistance(distance); distance += percent; // 防止下次进入时超过 100 但会执行最后一次移动 if (distance > 100) distance = 100 }, second * 1000) } function changeDistance (distance) { // 头像行驶距离的变化, 这里需要注意的是 html 元素的 offset-distance 属性是可以按照百分比设的，而 path 的偏移量是不行的 document.querySelector('.run').style['offset-distance'] = distance + '%'; // 线条填充距离(strokeDashoffset)的变化 path.style.strokeDashoffset = pathLength * (100 - distance)/100; } // 先初始化 reset(); actions(0.5, 10); document.getElementById('startAnimate').onclick = function () { var s = document.getElementById('second').value, u = document.getElementById('percent').value; reset(); actions(s, u); } document.getElementById('distanceChange').onchange = function (e) { this.nextElementSibling.innerText = e.target.value changeDistance(parseFloat(e.target.value)) } </script>上述是一个简单的demo，其中你可以根据进度条去控制整体路径的跑动百分比，但是offset-distance 有个巨大的问题，那就是“兼容性”，目前它仍属于提案阶段，并未进入w3c标准，所以我们目前只能在chrome中使用。。。。。。为此，我提供的快速解决方案就是使用这个动画引擎，我们这里只需要用它的 TimelineLite 部分即可
GreenSock | TimelineLite
首先我们将我上述注释中说到的2个无视点的注释解开，即 css 的 path 路径动画以及 svg 的 image 标签，路线的偏移动画，我们采用上述说到的 stroke-dashoffset将偏移量由路径总长逐渐变为 0 即可实现，其中弱全部为实线，则我们需要将stroke-dasharray也设为路径总长，记得加上 transition 去变化stroke-dashoffset即可
greenSock 的 TweenMax 我已经在开头用 cdn 引入了，你也可以探访他们的官网去详细看看，以下我放出使用它的一个demo，也是根据距离控制路径的，但是这次没有用change事件去抽象随意查看，你可以自己按需求去抽象，不局限于 svg 内的标签，任何标签都可行，但是定位要改成绝对定位，否则不会脱离文档流，用 progress 仍然有一个缺点，就是当跑动步骤比较少时，由于 progress 是进度条或时间轴的概念，所以它只是到那个点，如果路径够长，但是跑的步骤较少，可能会看到跳跃路径点~这个问题我仍在解决，因为从根本上来说，如果不用框架，我们也是点到点的抽象，要做到路径补全可以做到，但十分困难。。。
<script type="text/javascript"> var distance = 0; // 1. Create a variable var $box = document.getElementById('img1'); // 初始化构造函数及回调监控 var t1 = new TimelineLite( { onStart: function () { this.pause(); }, onUpdate: function () { console.log(this.progress()) }, onComplete: function () { console.log('动画完成') console.log(this.totalProgress()) } }); // 路径的绘制， 参数依次为 目标、运动持续时间、运动的终点，你也可以自行绘制多个时间轴动画 t1.fromTo($box, 1, {x: 10, y: 10}, {x: 85, y: 85}). to($box, 1, {x: 185, y: 85}). to($box, 1, {x: 185, y: 385}). to($box, 1, {x: 485, y: 485}); // 初始化后模拟跑到一半停下来的行为，在视图不停更新时会一直调用 onUpdate 函数，我们根据我们的需求将距离抽象为进度条 progress api var timer = setInterval(function () { distance += 5 t1.progress(distance/100) if (distance >= 100) { t1.progress(1) clearInterval(timer); timer = null; } }, 1000) </script>
