前言
之前网上冲浪的时候看canvas、css等渲染元素的花活偶然间看见了一个叫mo.js的框架,在看了看官网文档后觉得这个框架还是很有意思的,于是就写了个小demo,但是期间出现了不少问题,于是就写下这篇文章来分享一下。
准备
准备阶段肯定是下载包了,于是我兴冲冲的开了一个Vue项目并在终端输入了
npm i @mojs/core
安装成功后在home.vue中引入
import mojs from "@mojs/core";
但此时出现了一个问题,编译器提示我@mojs/core模块没找到,由于我用了TS作为开发语言,因此需要declare模块声明。于是我就先把官网文档看了一遍,并没有发现ts支持,又跑到npm上搜了下mo.js和@types/相关内容,也没有任何收获。最后我跑到项目的github主页,终于在issue#109下找到了答案:就作者而言,他有这个打算去做(在做了在做了.jpg),同时也有一个名为ronanbrett的开发者表示自己写了一个declare文件,但由于是17年写的,如果大家要用有些地方可能要手动更改,所以如果ts用的不熟练,建议还是用js写mo.js的项目。
开发
接下来我按官网的例子在home.vue中写了个最简单的动画:
<template>
<div></div>
</template>
<script lang="ts">
import mojs from "@mojs/core";
import Component from "vue-class-component";
import Vue from "vue";
@Component({
name: "home",
})
export default class Home extends Vue {
mounted(): void {
const bouncyCircle = new mojs.Shape({
parent: "#app",
shape: "circle",
fill: { "#F64040": "#FC46AD" },
radius: { 20: 80 },
duration: 2000,
isYoyo: true,
isShowStart: true,
easing: "elastic.inout",
repeat: 20,
});
bouncyCircle.play();
}
}
</script>
<style scoped></style>
其中#app为项目根组件App.vue的根节点id,由于mo.js渲染的svg默认使用position: absolute
绝对定位把自己定位在(50%, 50%)处,因此按上述代码编写出来的动画出现在整个页面的正中间。
而这时又出现了一个问题,看图:
mo.js在使用elastic的过渡的时候,会有回弹的动画,在放大的时候圆半径会超出实际最大半径一些。而mo.js的官网上的例子是正常显示的,因此也没有给出相关例子。我在网页中使用审查元素发现整个构造的dom是这样的:
可以看见它会创造一个div并把这个div作为它的父元素画svg,而且这个div的大小是固定的,就是这个固定的大小造成了回弹动画出问题。但由于svg用了100%的父元素大小,因此靠修改父元素大小是没用的,这时候只需要给svg元素加个padding,并设置overflow为visible即可,在全局css中加上如下代码(虽然可能会污染全局css,但也没办法了):
div[data-name^="mojs-"] > svg {
padding: 10px;
overflow: visible;
}
总结
由于mo.js我也只是有所接触,所以大概暂时就发现这些问题,如果有其他问题可以多去github下项目issue讨论(话说一个17k star的项目为什么issue讨论这么少…)。