从 Mojs 动画库开始：HTML 组件

现在许多网站都使用某种动画来使其着陆页更具吸引力。值得庆幸的是，有许多库允许您为网页上的元素添加动画效果，而无需从头开始执行所有操作。在本教程中，您将了解一个名为 mojs 的此类库。

由于其简单的声明式 API，该库非常易于使用。您可以使用 mojs 创建的动画将非常流畅且适合视网膜，因此一切看起来都很专业。

安装 Mojs

有很多方法可以将 mojs 包含在您的项目中。您可以从 GitHub 存储库获取该库。或者，您可以直接在项目中包含来自不同 CDN 的最新版本库的链接。

<script src="//cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

开发人员还可以通过运行以下命令，使用 npm 和 Bower 等包管理器安装 mojs：

npm install mo-js

bower install mojs

将库包含到项目中后，您就可以开始使用不同的模块来创建有趣的动画。

Mojs 中的 HTML 模块

本教程将重点介绍 mojs 库中的 HTML 模块。该模块可用于为网页上的不同 HTML 元素添加动画效果。

为了对 DOM 元素进行动画处理，您需要做的第一件事是创建一个 mojs Html 对象。您可以指定要在该对象内设置动画的元素及其属性的选择器。

为 el 设置一个值可以让您识别要使用 mojs 设置动画的元素。您可以将其值设置为选择器或 DOM 节点。

HTML 模块有一些预定义的属性，可用于为 DOM 元素的不同变换相关属性设置动画。例如，您可以通过指定 x、y 和 z 属性。您还可以使用 angleX、angleY 和 angleZ 属性沿不同轴旋转任何元素。这类似于 CSS 中相应的 rotateX()、rotateY() 和 rotateZ() 转换。您还可以借助 skewX 和 skewY 属性沿 X 或 Y 轴倾斜元素。

在不同元素上应用缩放动画也同样简单。如果要在两个方向上缩放元素，只需为 scale 属性设置一个值即可。同样，您可以通过为 scaleX 和 scaleY 属性设置适当的值，为元素沿不同轴的缩放设置动画。

除了允许您设置动画的初始值和最终值的所有这些属性之外，还有一些其他属性可以控制动画播放。您可以使用 duration 属性指定动画的持续时间。提供的值需要一个数字，它将设置动画持续时间（以毫秒为单位）。如果您想在延迟一段时间后开始动画，可以使用 delay 属性设置延迟值。就像 duration 一样，delay 也期望它的值是一个数字。

借助 repeat 属性，可以多次重复动画。它的默认值为零，这意味着动画只会播放一次。设置为1将播放动画两次，设置为2将播放动画3次。动画完成第一次迭代后，元素将返回到其初始状态并再次开始动画（如果您已为 repeat 属性设置了值）。这种从最终状态到初始状态的突然跳跃可能并不在所有情况下都是理想的。

如果您希望动画在达到最终状态后向后播放，可以将 isYoyo 属性的值设置为 true。默认设置为 false 。最后，您可以使用 speed 属性设置动画播放的速度。它的默认值为 1。将其设置为 2 将使动画播放速度提高两倍。同样，将其设置为 0.5 将以一半的速度播放动画。

您创建的 mojs Html 对象不会自行为各个元素设置动画。您必须在要播放的每个 mojs Html 动画上调用 play() 方法。下面是一个示例，它使用我们刚刚讨论的所有属性来为三个不同的框设置动画：

var htmlA = new mojs.Html({
  el: ".a",
  x: {
    0: 400
  },
  angleZ: {
    0: 720
  },
  duration: 1000,
  repeat: 4,
  isYoyo: true
});

var htmlB = new mojs.Html({
  el: ".b",
  x: {
    400: 0
  },
  angleY: {
    0: 360
  },
  angleZ: {
    0: 720
  },
  duration: 1000,
  repeat: 4
});

var htmlC = new mojs.Html({
  el: ".c",
  x: {
    0: 400
  },
  angleY: {
    0: 360
  },
  scaleZ: {
    1: 2
  },
  skewX: {
    0: 30
  },
  duration: 1000,
  repeat: 4,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
  htmlB.play();
  htmlC.play();
});

您不仅限于为元素的变换属性设置动画。 mojs 动画库还允许您对所有其他可动画化的 CSS 属性进行动画处理。您只需确保为它们提供有效的初始值和最终值即可。例如，您可以通过为 background 指定有效值来设置元素的背景颜色动画。

如果要设置动画的 CSS 属性包含连字符，则在 mojs camelCase >Html 对象。这意味着您可以通过为 borderRadius 属性设置有效值来对 border-radius 进行动画处理。下面的例子应该可以让一切变得清晰：

var htmlA = new mojs.Html({
  el: ".a",
  x: { 
    0: 400
  },
  angleZ: {
    0: 360
  },
  background: {
    red: 'black'
  },
  borderWidth: {
    10: 20
  },
  borderColor: {
    'black': 'red'
  },
  borderRadius: {
    0: '50%'
  },
  duration: 2000,
  repeat: 4,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});

在上面的示例中，边框颜色从黑色变为红色，同时边框半径从 0 变化到 50%。您应该注意，无单位的数字将被视为像素值，而带单位的数字应指定为“50%”等字符串。

到目前为止，我们已经使用了一组补间属性来控制不同动画的播放。这意味着一个元素从 x:0 移动到 x:200 所需的时间与从 scale 进行缩放所需的时间相同： 1 到 规模：2。

这可能不是一个理想的行为，因为您可能希望延迟 延迟 某些属性的动画并控制它们的 duration 。在这种情况下，您可以在属性对象本身内部指定每个属性的动画播放参数。

var htmlA = new mojs.Html({
  el: ".a",
  x: { 
    0: 400,
    duration: 1000,
    repeat: 8,
    isYoyo: true
  },
  angleY: {
    0: 360,
    delay: 500,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  },
  angleZ: {
    0: 720,
    delay: 1000,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  }
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});

Mojs 中可用的缓动功能

默认情况下，您创建的每个动画都会应用 sin.out 缓动。如果您希望使用不同的缓动函数进行动画播放，可以使用 easing 属性指定其值。默认情况下，当动画向后播放时，也会使用为 easing 指定的值。如果您想对向后动画应用不同的缓动，可以为 backwardEasing 属性设置一个值。

mojs 库有 11 种不同的内置缓动函数。这些是 linear、ease、sin、quad、cubic、quart、quint、expo、circ、back 和 elastic。线性缓动只有一种变体，名为 linear.none。这是有道理的，因为动画在不同阶段将以相同的速度进行。所有其他缓动函数都具有三种不同的变体，其中 in、out 和 inout 添加在末尾。

有两种方法可以指定动画的缓动函数。您可以使用 elastic.in 这样的字符串，也可以使用 mojs.easing 对象直接访问缓动函数，例如 mojs.easing。 elastic.inout。在嵌入式 CodePen 演示中，我在每个条形上应用了不同的缓动函数，因此其宽度将以不同的速度变化。这将使您了解每次缓动时动画速度有何不同。

var allBoxes = document.querySelectorAll(".box");

var animations = new Array();

var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in', 'back.in', 'elastic.in'];

allBoxes.forEach(function(box, index) {
  var animation = new mojs.Html({
    el: box,
    width: {
      0: 550,
      duration: 4000,
      repeat: 8,
      isYoyo: true,
      easing: easings[index]
    }
  });
  animations.push(animation);
});

document.querySelector(".play").addEventListener("click", function() {
  animations.forEach(function(anim) {
    anim.play();
  });
});

由于我们只想更改应用于每个框的缓动函数，因此我创建了一个循环来迭代它们，然后应用从 easings 数组中选取的缓动函数。这可以防止不必要的代码重复。您可以使用相同的技术为多个元素设置动画，其中属性值根据模式而变化。

控制动画播放

Mojs 提供了很多方法，允许我们在动画开始后控制不同元素的动画播放。您可以随时通过调用 pause() 方法暂停动画。同样，您可以通过调用 resume() 方法来恢复任何暂停的动画。

使用 pause() 暂停的动画将始终从您调用 pause() 的位置恢复。如果您希望动画在暂停后从头开始，您应该使用 stop() 方法。

您还可以使用 playBackward() 方法向后播放动画。之前，我们使用 speed 属性来控制 mojs 播放动画的速度。 Mojs 还有一个 setSpeed() 方法，可以在动画仍在进行时设置动画速度。在下面的示例中，我使用了所有这些方法来控制基于按钮点击的动画播放。

var speed = 1;

var htmlA = new mojs.Html({
  el: ".a",
  angleZ: {
    0: 720
  },
  borderRadius: {
    0: '50%'
  },
  borderWidth: {
    10: 100
  },
  duration: 2000,
  repeat: 9999,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});

document.querySelector(".pause").addEventListener("click", function() {
  htmlA.pause();
});

document.querySelector(".stop").addEventListener("click", function() {
  htmlA.stop();
});

document.querySelector(".faster").addEventListener("click", function() {
  speed = speed + 1;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});

document.querySelector(".slower").addEventListener("click", function() {
  speed = speed/2;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});

在下面的演示中，当前动画播放速度显示在左下角的黑框中。点击更快会将当前速度提高 1，点击更慢会将当前速度减半。

最终想法

在本教程中，我们学习了如何使用 mojs 中的 HTML 模块为网页上的不同 DOM 元素设置动画。我们可以使用选择器或 DOM 节点指定要设置动画的元素。该库允许您使用 mojs Html 对象的内置属性对不同的变换属性和任何元素的不透明度进行动画处理。但是，您还可以通过使用 camelCase 表示法指定名称来对其他 CSS 属性进行动画处理。

JavaScript 并非没有学习曲线，而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您希望我在本教程中澄清任何内容，请告诉我。我们将在下一个教程中介绍 mojs 库中的 Shape 模块。

以上就是从 Mojs 动画库开始：HTML 组件的详细内容，更多请关注双恒网络其它相关文章！