如何使用mo.js制作漂亮的编码网页动画

想用令人惊叹的动画刺激你网站的访问者吗？一种方法是使用mo.js，这是一个运动图形库，您可以使用JavaScript在CodePen中操作它。...

如果你想建立自己的网站，漂亮的动画可以让它发光。有多种方法可以实现这一点，从简单地从现有电影**动画GIF，到学习使用Blender或Maya等软件从头开始**自己的GIF。

还有一些库可用于以编程方式创建动画。历史上，web编码人员使用jQuery创建简单的动画，但随着web的发展和HTML5成为新标准，出现了新的选项。在新的框架下，CSS动画库变得非常强大，同时还有专门为浏览器中的矢量动画设计的JavaScript库。

今天，我们将关注mo.js，这是一个从代码中创建美丽图像的新手。在创建一个创建漂亮图案的用户反应动画系列之前，我们将介绍一些基本功能。

输入mo.js

js是一个用于轻松创建web运动图形的库。它的设计目的是让那些不太懂代码的人能够简单地创建美丽的东西，同时让经验丰富的程序员发现他们从未意识到的艺术方面。顾名思义，它基于流行的JavaScript编程语言，尽管它的实现方式让任何人都可以轻松掌握基础知识。

在我们进一步讨论之前，让我们来看看我们今天要创造什么：

我们将在今天的项目中使用CodePen，因为它允许我们在同一个浏览器窗口中处理所有内容。如果您愿意，您可以在自己选择的编辑器中工作。如果您想跳过分步教程，这里提供了完整的代码。

设置一支新笔，您将看到以下屏幕：

在我们开始之前，您需要做一些更改。单击右上角的设置图标，然后导航到JavaScript选项卡。

我们将使用Babel作为我们的代码预处理器，所以从下拉菜单中选择它。Babel使JavaScript更容易理解，同时为旧浏览器提供了ECMAScript 6支持。如果你不知道这意味着什么，别担心，这会让我们的生活更轻松。

我们还需要将mo.js库导入到项目中。通过在AddExternalScripts/Pens文本提示符中搜索mo.js并选择它来完成此操作。

这两件事就绪后，单击“保存并关闭”。我们准备好开始了！

使用mo.js的基本形状

在开始使用图形之前，让我们对视图窗格中的白色背景进行一些处理。通过在CSS窗格中编写此代码来更改背景色属性。

body{ background: rgba(11,11,11,1);}

创建形状是一个简单的过程，它背后的概念驱动着整个库。让我们设置一个默认的圆形状。在JS窗格中输入以下代码：

c***t redCirc = new mojs.Shape({ isShowStart:true});

在这里，我们创建了一个名为redCirc的c***t值，并将其分配给一个新的mojs.Shape。如果您对编码一无所知，请注意此处的括号顺序，不要忘记结尾处的分号！

到目前为止，我们没有传递任何参数，除了isShowStart:true，这意味着它将在我们指定任何运动之前出现在屏幕上。您将看到它在屏幕中央放置了一个粉红色的圆圈：

此圆是mo.js的默认形状。我们可以通过在代码中添加一行来轻松更改此形状：

c***t redCirc = new mojs.Shape({ isShowStart:true, shape:'rect'});

要向对象添加更多属性，我们使用逗号将其分隔。在这里，我们添加了一个shape属性，并将其定义为“rect”。保存笔，您将看到默认形状改为正方形。

将值传递给形状对象的过程就是我们自定义它们的方式。现在我们有一个正方形，它实际上没有什么用处。让我们尝试设置一些动画。

运动基础

为了得到更令人印象深刻的东西，让我们画一个圆圈，周围有一个红色的笔划，里面没有填充物。

c***t redCirc = new mojs.Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius:15});

如您所见，我们还为笔划指定了宽度值，并为圆指定了半径。事情已经开始有点不同了。如果形状未更新，请确保“红色”或“无”周围没有遗漏任何逗号或单引号，并确保已单击页面顶部的“保存”。

让我们为其添加一个动画。在上面的例子中，这个红色圆圈出现在用户单击的位置，然后向外淡出。我们可以通过改变半径和不透明度来实现这一点。让我们修改代码：

radius: {15:30}, opacity: {1:0}, duration:1000

通过更改“半径”属性，并添加“不透明度”和“持续时间”属性，我们提供了随时间执行的形状说明。这些是增量对象，包含这些属性的开始和结束信息。

你会注意到什么都没有发生。这是因为我们没有添加.play（）函数来告诉它执行我们的指令。把它加在括号和分号之间，你会看到你的圆圈变得栩栩如生。

现在我们正在取得进展，但为了让它真正与众不同，让我们来看一些更深入的可能性。

使用mo.js进行订购和放松

现在，一旦圆圈出现，它就开始淡出。这将非常好地工作，但如果能有更多的控制，那就太好了。

我们可以使用.then（）函数来实现这一点。与其改变半径或不透明度，不如让形状保持在起始位置，然后在设定的时间量后改变。

c***t redCirc = new mojs.Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius: 15, duration:1000}).then({ //do more stuff here}).play();

现在，我们的形状将显示为我们指定的值，等待1000毫秒，然后再执行我们在.then（）函数中输入的任何内容。让我们在括号之间添加一些说明：

//do more stuff here strokeWidth: 0, scale: { 1: 2, easing: 'sin.in' }, duration: 500

这段代码介绍了动画的另一个重要部分。在我们指示量表从1变为2的地方，我们还指定了sin.in的基于正弦波的放松。js内置了多种缓和曲线，高级用户可以添加自己的缓和曲线。在这种情况下，随着时间的推移，标度根据向上弯曲的正弦波发生。

要查看不同曲线的外观，请访问easings.net。再加上strokeWidth在我们设定的持续时间内变为0，你会有一个更加动态的消失效果。

形状是Mo.js中所有内容的基础，但它们只是故事的开始。让我们看看爆发。

在mo.js中充满了潜力

Mo.js中的突发是从中心点发出的形状集合。我们将把这些作为我们完成动画的基础。可以使用与处理形状相同的方法调用默认突发。让我们**一些火花：

c***t sparks = new mojs.Burst({}).play();

您可以看到，只需添加一个空的突发对象并告诉它播放，我们就可以得到默认的突发效果。我们可以通过设置突发的半径和角度属性的动画来影响突发的大小和旋转：

c***t sparks = new mojs.Burst({ radius: {0:30, easing:'cubic.out'}, angle:{0: 90,easing:'quad.out'},}).play();

我们已经在爆破中添加了自定义半径和旋转：

为了让它们看起来更像火花，让我们更改burst使用的形状，以及burst生成的形状。您可以通过寻址突发子对象的属性来实现这一点。

c***t sparks = new mojs.Burst({ radius: {0:30, easing:'cubic.out'}, angle:{0: 90,easing:'quad.out'}, count:50, children:{ shape: 'cross', stroke: 'white', points: 12, radius:10, fill:'none', angle:{0:360}, duration:300 }}).play();

您将注意到，子属性与我们已经处理过的形状属性相同。这次我们选择了一个十字架作为形状。所有50个形状现在都具有相同的属性。开始看起来不错了！这是用户单击鼠标时看到的第一件事。

虽然我们已经可以看到我们最初的红圈形状的红色笔划停留的时间太长了。尝试更改其持续时间，以使两个动画配合在一起。结果应该是这样的：

我们的动画还远远没有完成，但是让我们花一点时间让用户反应。

主要事件

我们将使用事件处理程序在用户单击的位置触发动画。在代码块的末尾，添加以下内容：

document.addEventListener( 'click', function(e) {});

这段代码监听鼠标点击，并为我们执行括号中的任何指令。我们可以将redCirc和sparks对象添加到此侦听器。

document.addEventListener( 'click', function(e) { redCirc .tune({ x: e.pageX, y: e.pageY, }) .replay(); sparks .tune({ x: e.pageX, y: e.pageY }) .replay();});

我们在这里调用的两个函数是.tune（）和.replay（）。replay函数与play函数类似，但它指定动画应在每次单击时从头开始重新开始。

tune函数将值传递给我们的对象，以便您可以在触发时进行更改。在本例中，我们传入鼠标单击的页面坐标，并相应地指定动画的x和y位置。保存代码，然后尝试单击屏幕。你会注意到几个问题。

首先，我们的初始动画仍然显示在屏幕中间，即使用户没有点击任何东西。其次，动画不会在鼠标点触发，而是向下向右偏移。我们可以很容易地解决这两个问题。

我们的shape和burst在各自的代码块末尾有.play（）。在事件处理程序中调用.replay（）时，我们不再需要它了。您可以从两个代码块中删除.play（）。出于同样的原因，您也可以删除isShowStart:true，因为我们不再需要它在开始时显示。

要解决定位问题，我们需要为对象设置位置值。从我们的第一个形状中，您会记得，默认情况下，mo.js将它们放在页面的中心。当这些值与鼠标位置组合时，将创建偏移。要消除此偏移，只需将这些线添加到redCirc和sparks对象：

left: 0,top: 0,

现在，对象所采用的唯一位置值是事件侦听器传入的鼠标位置值。现在情况应该会好得多。

将对象添加到事件处理程序中的过程就是我们触发所有动画的方式，因此请记住从现在开始将每个新对象添加到事件处理程序中！现在，我们已经有了基本的工作方式，我们想要他们，让我们添加一些更大和更明亮的爆发。

***

让我们从旋转的三角形开始。这里的想法是创造一个催眠频闪效应，而设置这个其实很容易。使用以下参数添加另一个突发：

c***t triangles = new mojs.Burst({ radius: { 0 : 1000,easing: 'cubic.out'}, angle: {1080 : 0,easing: 'quad.out'}, left: 0, top: 0, count: 20, children : { shape: 'polygon', points: 3, radius: { 10 : 100 }, fill: ['red','yellow','blue','green'], duration: 3000 }});

到目前为止，这里的一切都应该相当熟悉了，尽管有一些新的观点。您会注意到，在将形状的点数指定为3之前，我们将其称为多边形，而不是将其定义为三角形。

我们还为填充函数提供了一组颜色，每五个三角形将恢复为红色，图案将继续。角度设置的高值使脉冲群旋转足够快，以产生频闪效应。

如果代码不适用于您，请确保您已将triangles对象添加到事件侦听器类中，就像我们对前面的对象所做的那样。

太迷幻了！让我们添加另一个突发事件来跟踪它。

舞动的五边形

我们可以使用与三角形对象几乎相同的东西来产生跟随它的爆发。这段稍加修改的代码生成颜色鲜艳的重叠旋转六边形：

c***t pentag*** = new mojs.Burst({ radius: { 0 : 1000,easing: 'cubic.out'}, angle: {0 : 720,easing: 'quad.out'}, left: 0, top: 0, count: 20, children : { shape: 'polygon', radius: { 1 : 300 }, points: 5, fill: ['purple','pink','yellow','green'], delay:500, duration: 3000 }});

这里的主要变化是我们增加了500毫秒的延迟，这样直到三角形之后才开始爆发。通过改变一些值，这里的想法是使脉冲群以与三角形相反的方向旋转。幸运的是，当五边形出现时，三角形的频闪效应使它们看起来像是在一起旋转。

有点随意

让我们添加一个使用随机值的效果。创建具有以下属性的突发事件：

c***t redSparks = new mojs.Burst({ left: 0, top: 0, count:8, radius: { 150: 350 }, angle: {0:90 ,easing:'cubic.out'}, children: { shape: 'line', stroke: {'red':'transparent'}, strokeWidth: 5, scaleX: {0.5:0}, degreeShift: 'rand(-90, 90)', radius: 'rand(20, 300)', duration: 500, delay: 'rand(0, 150)', }});

这一突发将创建线开始红色和褪色的透明度，随着时间的推移缩小。这个组件的有趣之处在于，随机值用于确定其某些属性。

degreeShift为子对象提供起始角度。通过随机化，每次点击都会产生完全不同的爆发。半径和延迟函数也使用随机值来增加混沌效应。

以下是效果本身：

因为我们在这里使用的是随机值，所以需要为对象的事件处理程序添加一个额外的方法：

redSparks .tune({ x: e.pageX, y: e.pageY }) .replay() .generate();

每次调用事件时，generate（）函数都计算新的随机值。如果不这样做，形状将在第一次调用时选择随机值，并在以后的每次调用中继续使用这些值。这会完全破坏效果，所以一定要添加这个！

几乎可以对mo.js对象的每个元素使用随机值，这是**独特动画的简单方法。

然而，随机性并不是向动画添加动态运动的唯一方法。让我们看看交错函数。

交错的线条

为了展示参差函数是如何工作的，我们将**一些类似凯瑟琳车轮的东西。使用以下参数创建新的突发：

c***t lines = new mojs.Burst({ radius: { 0 : 1000,easing: 'cubic.out'}, angle: {0 : 1440,easing: 'cubic.out'}, left: 0, top: 0, count: 50, children : { shape: 'line', radius: { 1 : 100,easing:'elastic.out' }, fill: 'none', stroke: ['red','orange'], delay:'stagger(10)', duration: 1000 }});

现在这里的一切都很熟悉了，一次爆发产生了50个红色或橙色线条的孩子。这里的区别是我们将延迟属性传递给参差（10）函数。这在每个孩子的发射之间增加了10毫秒的延迟，给它带来了我们期待的旋转效果。

交错函数不使用任何随机值，因此这次不需要事件处理程序中的generate函数。让我们看看目前为止我们所做的一切：

我们可以很容易地停在这里，但让我们再增加一个突发事件来结束这个项目。

智能广场

对于最后一次爆发，让我们使用矩形**一些东西。将此对象添加到代码和事件侦听器：

c***t redSquares = new mojs.Burst({ radius: { 0 : 1000,easing: 'cubic.out'}, angle: {360 : 0,easing: 'quad.out'}, left: 0, top: 0, count: 20, children : { shape: 'rect', radiusX: { 1 : 1000 }, radiusY:50, points: 5, fill: 'none', stroke: {'red':'orange'}, strokeWidth:{5:15}, delay:1000, duration: 3000 }});

这个对象并没有给我们今天已经完成的工作添加任**的内容，它只是用来展示如何通过代码轻松创建复杂的几何图案。

在编写本教程的测试阶段创建该对象时，这不是该对象的预期结果。一旦代码运行，我就明白了，我无意中发现了一件远比我故意做的漂亮得多的东西！

添加了最后一个对象后，我们就完成了。让我们看看整个事情的实际情况。