Mojs初尝试

前言

之前网上冲浪的时候看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讨论这么少…）。