如果您想建立自己的网站，精美的动画可以使其光芒四射。有多种方法可以实现此目的，从简单地从现有电影中制作动画GIF到学习使用Blender或Maya之类的软件从头开始制作自己的影片。
也可以使用创建库以编程方式制作动画。从历史上看，网络程序员使用jQuery来创建简单的动画，但是随着网络的发展和HTML5成为新的标准，出现了新鲜的选择。在新的框架下，用于动画的CSS库变得异常强大，再加上专门为浏览器中的矢量动画设计的JavaScript库。
今天，我们将关注mo.js，mo.js是该领域的新兴孩子之一用于通过代码创建精美的图像。在创建可创建精美图案的用户反应式动画系列之前，我们将介绍一些基本功能。
输入Mo.js
Mo.js是一个用于为以下对象创建运动图形的库轻松上网。它旨在使那些不太懂代码的人可以轻松创建漂亮的东西，同时允许资深程序员发现他们从未有过的艺术方面。顾名思义，它以流行的JavaScript编程语言为基础，尽管它的实现方式使任何人都可以轻松掌握基础知识。
在进一步介绍之前，让我们先看一下我们今天将要创建：
我们将在今天的项目中使用CodePen，因为它允许我们在同一浏览器窗口中处理所有内容。如果您愿意，可以改为使用自己选择的编辑器。如果要跳过分步教程，请参见此处的完整代码。
设置新的Pen，将看到以下屏幕：
之前我们开始使用，您需要进行一些更改。点击右上角的设置图标，然后导航至 JavaScript 标签。
我们将使用 Babel 作为我们的代码预处理器，因此请从下拉菜单中选择它。 Babel使JavaScript易于理解，并为较旧的浏览器提供了ECMAScript 6支持。如果您不知道这是什么意思，不用担心，这将使我们的生活更加轻松。
我们还需要导入mo.js库进入项目。为此，请在添加外部脚本/笔文本提示中搜索 mo.js ，然后选择它。
将这两件事放在适当的位置，点击保存并关闭。我们已经准备好开始！
Mo.js的基本形状
在开始使用图形之前，让我们对视图窗格中令人眼花white乱的白色背景进行一些操作。通过在 CSS 窗格中编写此代码来更改背景颜色属性。
body{ background: rgba(11,11,11,1);}创建形状是一个简单的过程，其背后的概念驱动着整个库。让我们设置一个默认的圆形。在 JS 窗格中输入以下代码：
const redCirc = new mojs.Shape({ isShowStart:true});在这里，我们创建了一个名为 redCirc 的 const 值，并将其分配给 new mojs.Shape 。如果您是编码的新手，请注意此处的括号顺序，不要忘了最后的分号！
到目前为止，除 isShowStart：true <外，我们没有传递任何参数。 / strong>，这意味着即使我们没有为其指定任何动作，它也会出现在屏幕上。您会看到它在屏幕中央放置了一个粉红色的圆圈：
此圆圈是mo.js的默认 Shape 。我们可以通过在代码中添加一行来轻松更改此形状：
const redCirc = new mojs.Shape({ isShowStart:true, shape:'rect'});要向对象添加更多属性，我们使用逗号分隔它。在这里，我们添加了一个 shape 属性，并将其定义为'rect'。保存笔，您会看到默认形状改为正方形。
将值传递到 Shape 对象的过程就是我们自定义它们的过程。现在，我们有一个广场并没有做太多事情。让我们尝试制作动画。
运动的基础
要获得看起来更令人印象深刻的东西，让我们设置一个圆圈，在其周围有一个红色笔触，内部没有填充。
const redCirc = new mojs.Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius:15});如您所见，我们还为笔划分配了 width 值，为圆分配了 radius 。事情已经开始看起来有些不同。如果形状没有更新，请确保您没有错过'红色'或'none'周围的逗号或单引号，并确保您单击了< <页面>
让我们在其中添加动画。在上面的示例中，该红色圆圈出现在用户单击之前的位置，然后向外淡出。我们可以做到这一点的一种方法是随时间更改半径和不透明度。让我们修改代码：
radius: {15:30}, opacity: {1:0}, duration:1000通过更改 radius 属性，并添加 opacity 和 duration 属性，我们已经给出了随时间推移执行的形状指示。这些是 Delta 对象，其中包含这些属性的开始和结束信息。
您会注意到什么都没有发生。这是因为我们没有添加 .play（）函数来告诉它执行我们的说明。将其添加到尾括号和分号之间，您应该会看到圆圈变得生动起来。
现在我们已经到了某个地方，但要使其变得真正与众不同，让我们更深入地看一下
使用Mo.js进行排序和简化
现在，一旦圆圈出现，它就会开始淡出。这可以很好地工作，但是最好有更多的控制权。
我们可以使用 .then（）函数来做到这一点。而不是改变半径或不透明度，让我们将形状保持在它开始的位置，然后在设定的时间后进行更改。
const redCirc = new mojs.Shape({ isShowStart:true, stroke:'red', strokeWidth:5, fill:'none', radius: 15, duration:1000}).then({ //do more stuff here}).play();现在，我们的形状将显示为我们分配的值，请稍等在执行任何操作之前，我们先将 .then（）函数放置1000毫秒。让我们在方括号之间添加一些说明：
//do more stuff here strokeWidth: 0, scale: { 1: 2, easing: 'sin.in' }, duration: 500此代码介绍了动画的另一个重要部分。在指示比例从1更改为2的位置，我们还通过 sin.in 分配了基于正弦波的缓动。 Mo.js内置了各种缓动曲线，高级用户可以添加自己的缓动曲线。在这种情况下，随着时间的推移，比例会根据向上弯曲的正弦波发生。
要直观地观察不同曲线，请查看easings.net。将其与在我们设定的持续时间内将 strokeWidth 更改为0结合使用，您将获得更加动态的消失效果。
形状是Mo.js中所有内容的基础，但是它们只是故事的开始。让我们看一下爆发。
在Mo.js中爆发潜力
Mo.js中的爆发是从中心点发出的形状。我们将以这些为最终动画的基础。您可以像创建形状一样调用默认爆发。让我们发出一些火花：
const sparks = new mojs.Burst({}).play();您可以看到，只需添加一个空的 Burst 对象并告诉它播放，我们就会获得默认的Burst效果。我们可以通过设置脉冲串的半径和 angle 属性来影响脉冲串的大小和旋转：
const sparks = new mojs.Burst({ radius: {0:30, easing:'cubic.out'}, angle:{0: 90,easing:'quad.out'},}).play();已经添加了自定义半径和旋转到我们的爆炸：
为使它们看起来更像火花，让我们更改爆炸使用的形状以及爆炸产生的形状数量。您可以通过处理爆炸的子代的属性来做到这一点。
const 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个形状都具有相同的属性。它开始看起来不错！这是用户单击鼠标时会看到的第一件事。
尽管我们已经看到初始 redCirc 形状的红色笔画停留的时间过长。尝试更改其持续时间，以使两个动画融合在一起。最终应该看起来像这样：
我们的动画还远远没有完成，但是让我们花点时间使其对用户具有反应性。
主事件
我们将使用事件处理程序在用户单击的位置触发动画。在代码块的末尾，添加以下内容：
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（）。重播功能类似于播放功能，尽管它指定了动画应在每次单击时从头开始重新播放。
tune 函数将值传递给我们对象，以便您可以在触发时进行更改。在这种情况下，我们将传递单击鼠标的页面坐标，并相应地分配动画的x和y位置。保存您的代码，然后尝试单击屏幕。您会注意到几个问题。
首先，即使用户没有单击任何内容，我们的初始动画仍会显示在屏幕中间。其次，动画不是在鼠标点触发，而是向下和向右偏移。我们可以很容易地解决这两个问题。
我们的形状和连发在其相应代码块的末尾都有 .play（）。我们不再需要此功能，因为在事件处理程序中正在调用 .replay（）。您可以从两个代码块中删除.play（）。出于同样的原因，您也可以删除 isShowStart：true ，因为我们不再需要在开始时显示它。
要解决定位问题，我们需要设置位置对象的值。您可能会记得我们的第一个形状，默认情况下，mo.js会将它们放在页面的中央。当这些值与鼠标位置结合在一起时，它将创建偏移量。要消除此偏移，只需将这些行添加到 redCirc 和 sparks 对象中：
left: 0,top: 0,现在，我们的对象仅具有位置值是事件侦听器传递的鼠标位置值。现在事情应该会好得多。
此向事件处理程序添加对象的过程就是我们如何触发所有动画的过程，因此请记住从现在开始向其中添加每个新对象！ 现在，我们已经有了基本的功能，让我们添加它们，让我们添加一些更大，更明亮的爆发。
迷幻了
让我们从一些旋转的三角形开始。这里的想法是创建一个催眠频闪效果，设置起来实际上很容易。添加具有以下参数的另一个突发：
const 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之前，我们没有将形状定义为三角形，而是将其称为多边形。
我们还为 fill 功能提供了一组可使用的颜色，每五个三角形将恢复为红色，并且图案将继续。 angle 设置的高值可使爆发旋转足够快，以产生频闪效果。
如果代码对您不起作用，请确保已添加三角形就像我们以前处理对象一样，将其作为事件侦听器类。
很迷幻！让我们添加另一个爆发来跟随它。
跳舞五角大楼
我们可以使用与三角形对象几乎相同的东西来产生跟随它的爆发。这段经过稍微修改的代码会生成鲜艳的重叠旋转的六边形：
const pentagons = 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 }});此处的主要更改是我们添加了500ms的延迟，因此，直到三角形。通过更改一些值，此处的想法是使突发沿与三角形相反的方向旋转。不幸的是，当五边形出现时，三角形的频闪效应使它们看起来像在旋转。
有点随机性
让我们添加一个使使用随机值。创建具有以下属性的连拍：
const 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 为子对象提供了一个起始角度。通过将其随机化，每次点击都会产生完全不同的突发。随机值还用于半径和 delay 函数，以增加混沌效果。
以下是效果本身：
由于我们在此处使用随机值，因此需要在事件处理程序中为该对象添加一个额外的方法：
redSparks .tune({ x: e.pageX, y: e.pageY }) .replay() .generate();generate（）函数可计算新的随机值每次调用事件时的值。如果没有此设置，形状将在首次调用时选择随机值，并在以后的每次调用中继续使用这些值。这将完全破坏效果，因此请确保添加此效果！
您几乎可以对mo.js对象的每个元素使用随机值，并且它们是制作独特动画的简单方法。
随机性不是向动画添加动态运动的唯一方法。让我们看一下 stagger 函数。
交错线
为了展示 stagger 函数的工作原理，我们将做一些像凯瑟琳车轮的东西。使用以下参数创建一个新的脉冲串：
const 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个红色或橙色线条的子代。区别在于，我们为 delay 属性传递了 stagger（10）函数。每个孩子的发射之间会增加10ms的延迟，从而赋予我们我们所寻找的旋转效果。
stagger函数不使用任何随机值，因此您不需要
我们可以轻松地停在这里，但我们只需再添加一个突发来结束该项目即可。
智能广场
对于这最后一次爆发，让我们使用矩形来制作一些东西。将此对象添加到您的代码和事件侦听器中：
const 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 }});该对象不会为我们今天已经研究的内容添加任何新内容，仅用于说明如何通过代码轻松创建复杂的几何图案
在编写本教程的测试阶段创建对象时，这并不是该对象的预期结果。一旦代码运行完，很明显，我偶然发现了比我本可以故意做的漂亮得多的东西！
添加了最后一个对象，我们就完成了。让我们看看整个过程。
Mo.js：强大的Web动画工具
对mo.js的简单介绍涵盖了创建精美动画所需的基本工具。这些工具的使用方式几乎可以创建任何东西，对于许多任务而言，Web库是使用Photoshop，After Effects或其他昂贵软件的简单替代。
标签:
.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5)