Mojs动画库入门：HTML模块

许多网站现在使用某种动画来使他们的登录页面更具吸引力。值得庆幸的是，有许多库允许您在webp时代为元素制作动画，而无需从头开始做所有事情。在本教程中，您将了解一个名为mojs的此类库。

该库非常易于使用，因为它具有简单的声明性api。您可以使用 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元素设置动画，您需要做的第一件事是创建一个 mojsHtml对象。您可以指定要在此对象内设置动画的元素的选择器及其属性。

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

HTML 模块具有一些预定义的属性，可用于为 DOM 元素的不同变换相关属性设置动画。例如，您可以通过指定x, y和z属性的开始和结束值来控制元素沿 x、y 和 z 轴的平移动画。angleX您还可以使用,angleY和angleZ属性沿不同的轴旋转任何元素。这类似于相应的rotateX(),rotateY()和cssrotateZ()中的转换。您还可以借助 和属性沿 X 或 Y 轴倾斜元素。skewXskewY

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

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

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

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

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

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 属性包含连字符，您可以camelCase在 mojsHtml对象内设置初始值和最终值时删除连字符并将属性名称转换为。这意味着您可以通过为属性border-radius设置有效值来设置动画。borderRadius下面的例子应该让一切都清楚：

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时间相同scale:2。 

这可能不是一个理想的行为，因为您可能想要delay一些属性的动画并控制它们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直接访问缓动函数。在嵌入式 CodePen 演示中，我在每个条形上应用了不同的缓动函数，因此它的宽度将以不同的速度变化。这将使您了解动画速度与每个缓动有何不同。mojs.easingmojs.easing.elastic.inout

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 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;
});

在下面的演示中，当前动画播放速度显示在左下角的黑框内。单击Faster将使当前速度增加 1，单击Slower 将使当前速度减半。

最后的想法

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