还不会svg路径动画？这有个动画神库帮你一键搞定

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

本期给大家介绍一个十分实用且强大的动画库—— mo.js ，虽然是英文文档，但是酒香不怕巷子深，我们还是被他的强大能力所震撼到。它是一个用于 Web 的动态图形工具集，有简单的声明性 API、跨设备兼容性和超过 1500 个单元测试。你可以在 DOME 或 SVG DOME 周围移动你创建的图形或创建唯一的mo.js对象。

我们今天就用它试水一个牛油果svg路径动画，因为经常很多展示型页面都会有大量的路径动画的需求，控制起来又很麻烦。特地安排了这个案例，给大家减轻负担走上人生巅峰~

随着时间流逝，我们一点点的就把牛油果给画出来并填充上色，接下来，我们就去实现它，来了解mo.js的强大之处。

1.基本结构

<style>
	html,body,#app {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #E1F3D0;
    #svg {
        height: 80%;
</style>
    <div id="app">
            <!-- svg path -->
            <!-- ... -->
            <!-- ... -->
            <!-- ... -->
            <!-- svg path -->
        </svg>
    </div>
    <script src="./node_modules/@mojs/core/dist/mo.umd.js"></script>
    <script src="./node_modules/@mojs/player/build/mojs-player.min.js"></script>
    <script src="./app.js"></script>
</body>
结构就是这样。我们等下先找个svg图像，放到主容器app下。另外，我们这边引入了两个库，顾名思义。第一个是mo.js主库，里面包含了mo.js的动画功能。而mojs-playerjs可以理解为播放器的控制台，根据mojs对象视为一个视频来使用，可以调节速度，是否循环，播放位置等操作。
2.挑选svg图像
svg的资源网站很多，这里主要用阿里的iconfont。找到素材把svg源码下载下来，然后放到html中。
这样svg就展示出来了，接下来我们将通过路径动画将其表现出来。
3.路径动画
做路径动画之前，我们先要收集路径下的信息：
/*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数据走走走，走起来~
/*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。我们可以用这两个属性用css3动画也可以实现svg路径动画，但是复杂动画控制起来炒鸡麻烦。所以，我们才会出现这些动画库。
当然，如果想动起来可以用：play方法。
avocado.play();
这样，我们的路径动画就这么简单就完成了，内心是不是无数发问：就这？就这？就这？？
4.动画播放器
我们虽然可以播放了，但是我们在开发当中，也会想看其动画变化清空，为其做一些细节调整。所以，我们就引入了mo.js的动画播放器。在基础机构中我们已经引入了，现在我们先去掉play方法，用播放器去控制他。
// avocado.play()
new MojsPlayer({
    add: avocado,
    isRepeat: false,
    isPlaying: false,
    isSaveState: false
我们这里就完美实现了想要的牛油果路径动画的播放控制，详见mojs-player。
add：添加图形
isRepeat：是否重复
isPlaying：是否播放
isSaveState：是否应该在页面重新加载时保留状态
我们写到这里，要写的已经完成了，炒鸡方便有木有！！在线演示
mo.js做svg只是其能力的冰山一角，他还可以做大量的图形动画和文字动画，还有曲线编辑器和时间线等工具去辅助，可以轻松完成业务场景绝大部分的动画。一起去探索一下吧~