從 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 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！