**本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。** ## 介绍本期给大家介绍一个十分实用且强大的动画库——[mo.js](https://mojs.github.io/)，虽然是英文文档，但是酒香不怕巷子深，我们还是被他的强大能力所震撼到。它是一个用于 Web 的动态图形工具集，有简单的声明性 API、跨设备兼容性和超过 1500 个单元测试。你可以在 DOME 或 SVG DOME 周围移动你创建的图形或创建唯一的mo.js对象。我们今天就用它试水一个牛油果svg路径动画，因为经常很多展示型页面都会有大量的路径动画的需求，控制起来又很麻烦。特地安排了这个案例，给大家减轻负担走上人生巅峰~ ![VID_20211006_100203.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f681766a2c6f4edfa3a67a2304158a75~tplv-k3u1fbpfcp-watermark.image?) 随着时间流逝，我们一点点的就把牛油果给画出来并填充上色，接下来，我们就去实现它，来了解mo.js的强大之处。 ## 正文 ### 1.基本结构 ```html

``` 结构就是这样。我们等下先找个svg图像，放到主容器app下。另外，我们这边引入了两个库，顾名思义。第一个是mo.js主库，里面包含了mo.js的动画功能。而mojs-playerjs可以理解为播放器的控制台，根据mojs对象视为一个视频来使用，可以调节速度，是否循环，播放位置等操作。 ### 2.挑选svg图像 svg的资源网站很多，这里主要用阿里的[iconfont](https://www.iconfont.cn/)。找到素材把svg源码下载下来，然后放到html中。 ![微信截图_20211006130653.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/281585254c0f4faf817c46c6c883507e~tplv-k3u1fbpfcp-watermark.image?) ![微信截图_20211006130737.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e40ff28def8245e080ea5a5cedeeb0b5~tplv-k3u1fbpfcp-watermark.image?) 这样svg就展示出来了，接下来我们将通过路径动画将其表现出来。 ### 3.路径动画做路径动画之前，我们先要收集路径下的信息： ```js /*app.js*/ let whiteColor = "white"; let path = document.querySelectorAll('path'); let fillData = []; let strokeColorData = []; let strokeWidthData = []; Array.from(path).forEach(item => { let fillColor = item.getAttribute("fill") fillData.push({ "none": fillColor|| whiteColor }) strokeWidthData.push(fillColor ? 0.5: 1) strokeColorData.push(fillColor|| whiteColor) }); ``` 我们获取svg下所有的path，在path上获取到填充色。同时，我们存储填充色过渡数据fillData，线段宽度数据strokeWidthData，线段颜色数据strokeColorData。接下来，我们用mo.js来让svg根据path数据走走走，走起来~ ```js /*app.js*/ const HtmlStagger = mojs.stagger(mojs.Html); let avocado = new HtmlStagger({ el: path, fill: fillData, stroke: strokeColorData, strokeWidth: strokeWidthData, strokeDasharray: '3000', strokeDashoffset: { '3000': '0' }, duration: 8000, delay: 'stagger(500)', }); ``` 我们实例化一个HtmlStagger对象，就是这个牛油果图形。将刚才获取到的数据对应上放上去。然后设置strokeDasharray和strokeDashoffset过渡，其实就是设置svg的划线，详见[stroke-dasharray](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray)。我们可以用这两个属性用css3动画也可以实现svg路径动画，但是复杂动画控制起来炒鸡麻烦。所以，我们才会出现这些动画库。当然，如果想动起来可以用：play方法。 ```js avocado.play(); ``` 这样，我们的路径动画就这么简单就完成了，内心是不是无数发问：就这？就这？就这？？ ![微信截图_20211006132940.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e010ed95dbf749c6aba2a91c7cbe17ab~tplv-k3u1fbpfcp-watermark.image?) ### 4.动画播放器我们虽然可以播放了，但是我们在开发当中，也会想看其动画变化清空，为其做一些细节调整。所以，我们就引入了mo.js的动画播放器。在基础机构中我们已经引入了，现在我们先去掉play方法，用播放器去控制他。 ```js // avocado.play() new MojsPlayer({ add: avocado, isRepeat: false, isPlaying: false, isSaveState: false }) ``` ![微信截图_20211006133412.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40d1ceab4e7f4875b8fe60f0b3655a0d~tplv-k3u1fbpfcp-watermark.image?) 我们这里就完美实现了想要的牛油果路径动画的播放控制，详见[mojs-player](https://github.com/mojs/mojs-player)。 + add：添加图形 + isRepeat：是否重复 + isPlaying：是否播放 + isSaveState：是否应该在页面重新加载时保留状态 ___ 我们写到这里，要写的已经完成了，炒鸡方便有木有！！[在线演示](https://codepen.io/jsmask/full/powXaba) ## 拓展 [mo.js](https://mojs.github.io/)做svg只是其能力的冰山一角，他还可以做大量的图形动画和文字动画，还有曲线编辑器和时间线等工具去辅助，可以轻松完成业务场景绝大部分的动画。一起去探索一下吧~ ![VID_20211006_134617.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab4e21456bb40c990f7b9940dd84cd5~tplv-k3u1fbpfcp-watermark.image?)