阅读 740

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

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金

介绍

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

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

VID_20211006_100203.gif

随着时间流逝,我们一点点的就把牛油果给画出来并填充上色,接下来,我们就去实现它,来了解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>

<body>
    <div id="app">
        <svg>
            <!-- 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中。

微信截图_20211006130653.png

微信截图_20211006130737.png

这样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();
复制代码

这样,我们的路径动画就这么简单就完成了,内心是不是无数发问:就这?就这?就这??

微信截图_20211006132940.png

4.动画播放器

我们虽然可以播放了,但是我们在开发当中,也会想看其动画变化清空,为其做一些细节调整。所以,我们就引入了mo.js的动画播放器。在基础机构中我们已经引入了,现在我们先去掉play方法,用播放器去控制他。

// avocado.play()
new MojsPlayer({
    add: avocado,
    isRepeat: false,
    isPlaying: false,
    isSaveState: false
})
复制代码

微信截图_20211006133412.png

我们这里就完美实现了想要的牛油果路径动画的播放控制,详见mojs-player

  • add:添加图形
  • isRepeat:是否重复
  • isPlaying:是否播放
  • isSaveState:是否应该在页面重新加载时保留状态

我们写到这里,要写的已经完成了,炒鸡方便有木有!!在线演示

拓展

mo.js做svg只是其能力的冰山一角,他还可以做大量的图形动画和文字动画,还有曲线编辑器和时间线等工具去辅助,可以轻松完成业务场景绝大部分的动画。一起去探索一下吧~

VID_20211006_134617.gif

文章分类
前端
文章标签