mo.js

官网：http://mojs.io/
源码：http://cdn.jsdelivr.net/mojs/latest/mo.min.js
mojs是一个为网页提供动态图形工具的库。

兼容：

• Chrome 4+
• Firefox 4+
• Opera 11.5+
• Safari 4+
• IE 9+

mojs有其内置的一些形状，也可以自定义形状，配合上相关的属性和回调等即可以得到你想要的效果。

内置形状

circle（圆形）
rect（矩形）
polygon（多边形）
line（线）
cross（十字）
equal（等号）
curve（曲线）
zigzag（Z字形）

Modules

上面内置形状可以在mojs的三种模块中使用

1. Shape
   Shape是一个特殊的mojs模块，可以引导视觉效果。我们可以在页面的任何部分画一个你想要的形状，简单、整洁。

   
   

2. ShapeSwirl
   ShapeSwirl模块基本上是一个具有更多功能的Shape，ShapeSwirl自动计算形状的正弦x/y路径，以便通过正弦轨迹发送形状。

   
   

3. Burst
   Burst是更高级的模块，我们可以在页面的任何部分创造复杂的视觉效果，我们可以将Burst视为粒子发射器，它们组合一大堆的ShapeSwirl创建一个粒子圈。

   
   

自定义形状

扩展mojs.CustomShape类覆盖getShape方法以返回不包括svg标签本身的形状标记

            class Heart extends mo.CustomShape {
                getShape() {
                    return '<path d="M92.5939814,7.35914503 C82.6692916,-2.45304834 66.6322927,-2.45304834 56.7076029,7.35914503 L52.3452392,11.6965095 C51.0327802,12.9714696 48.9328458,12.9839693 47.6203869,11.6715103 L47.6203869,11.6715103 L43.2705228,7.35914503 C33.3833318,-2.45304834 17.3213337,-2.45304834 7.43414268,7.35914503 C-2.47804756,17.1963376 -2.47804756,33.12084 7.43414268,42.9205337 L29.7959439,65.11984 C29.7959439,65.1323396 29.8084435,65.1323396 29.8084435,65.1448392 L43.2580232,78.4819224 C46.9704072,82.1818068 52.9952189,82.1818068 56.7076029,78.4819224 L70.1696822,65.1448392 C70.1696822,65.1448392 70.1696822,65.1323396 70.1821818,65.1323396 L92.5939814,42.9205337 C102.468673,33.12084 102.468673,17.1963376 92.5939814,7.35914503 L92.5939814,7.35914503 Z"></path>';
                }
                getLength() {
                    return 200;
                }
            }
            mo.addShape('heart', Heart);
            const heart = new mo.Shape({
                shape: 'heart',
                fill: 'none',
                stroke: 'red',
                scale: { 0: 1 },
                strokeWidth: { 50: 0 },
                y: -20,
                duration: 1000
            });
            heart.play();

class xxx extends xxx 这种写法可参考es6