Bermula dengan perpustakaan animasi Mojs: Komponen HTML

Banyak tapak web hari ini menggunakan beberapa jenis animasi untuk menjadikan halaman pendaratan mereka lebih menarik. Syukurlah, terdapat banyak perpustakaan yang membolehkan anda menghidupkan elemen pada halaman web anda tanpa perlu melakukan segala-galanya dari awal. Dalam tutorial ini, anda akan belajar tentang satu perpustakaan yang dipanggil mojs.

Pustaka ini sangat mudah digunakan kerana API pengisytiharannya yang ringkas. Animasi yang anda boleh buat menggunakan mojs akan lancar dan mesra retina supaya semuanya kelihatan profesional.

Pasang Mojs

Terdapat banyak cara untuk memasukkan moj dalam projek anda. Anda boleh mendapatkan perpustakaan daripada repositori GitHub. Sebagai alternatif, anda boleh memasukkan pautan ke repositori terkini daripada CDN yang berbeza secara terus dalam projek anda.

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

Pembangun juga boleh memasang mojs menggunakan pengurus pakej seperti npm dan Bower dengan menjalankan arahan berikut:

npm install mo-js

bower install mojs

Setelah anda memasukkan perpustakaan ke dalam projek anda, anda boleh mula menggunakan modul yang berbeza untuk mencipta animasi yang menarik.

Modul HTML dalam Mojs

Tutorial ini akan memfokuskan pada modul HTML dalam perpustakaan mojs. Modul ini boleh digunakan untuk menghidupkan elemen HTML yang berbeza pada halaman web.

Untuk menghidupkan elemen DOM, perkara pertama yang anda perlu lakukan ialah mencipta objek Html mojs. Anda boleh menentukan pemilih untuk elemen dan sifatnya yang anda mahu animasikan dalam objek ini. 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()

Menetapkan nilai untuk el membolehkan anda mengenal pasti elemen yang anda ingin animasikan menggunakan mojs. Anda boleh menetapkan nilainya kepada pemilih atau nod DOM.

Menggunakan animasi penskalaan pada elemen berbeza adalah sama mudah. Jika anda ingin menskalakan elemen dalam kedua-dua arah, cuma tetapkan nilai untuk atribut scale. Begitu juga, anda boleh menghidupkan penskalaan elemen di sepanjang paksi yang berbeza dengan menetapkan nilai yang sesuai untuk sifat scaleX dan scaleY. 🎜 🎜Sebagai tambahan kepada semua sifat ini yang membolehkan anda menetapkan nilai awal dan akhir animasi, terdapat beberapa sifat lain yang mengawal main balik animasi. Anda boleh menentukan tempoh animasi menggunakan atribut duration. Nilai yang diberikan menjangkakan nombor yang akan menetapkan tempoh animasi dalam milisaat. Jika anda ingin memulakan animasi selepas kelewatan, anda boleh menetapkan nilai kelewatan menggunakan atribut delay. Sama seperti tempoh, delay juga menjangkakan nilainya sebagai nombor. 🎜 🎜Animasi boleh diulang beberapa kali dengan bantuan atribut repeat. Nilai lalainya ialah sifar, yang bermaksud animasi hanya akan dimainkan sekali. Tetapan 1 akan memainkan animasi dua kali, tetapan 2 akan memainkan animasi 3 kali. Selepas animasi melengkapkan lelaran pertamanya, elemen kembali kepada keadaan asalnya dan memulakan animasi semula (jika anda telah menetapkan nilai untuk atribut repeat). Lompatan mengejut ini dari keadaan akhir ke keadaan awal mungkin tidak sesuai dalam semua situasi. 🎜 🎜Jika anda mahu animasi dimainkan ke belakang selepas mencapai keadaan akhir, anda boleh menetapkan nilai atribut isYoyo kepada true . Tetapan lalai ialah false . Akhir sekali, anda boleh menetapkan kelajuan animasi dimainkan menggunakan atribut speed. Nilai lalainya ialah 1. Menetapkannya kepada 2 akan membuatkan animasi dimainkan dua kali lebih pantas. Begitu juga, menetapkannya kepada 0.5 akan memainkan animasi pada separuh kelajuan. 🎜 🎜Objek Html mojs yang anda buat tidak akan menghidupkan elemen individu dengan sendirinya. Anda mesti memanggil kaedah play() pada setiap animasi Html moj yang anda mahu mainkan. Berikut ialah contoh yang menggunakan semua sifat yang baru kita bincangkan untuk menghidupkan tiga kotak berbeza: 🎜

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 模块。

Atas ialah kandungan terperinci Bermula dengan perpustakaan animasi Mojs: Komponen HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!