Mojs动画库入门：HTML模块

最新推荐文章于 2024-08-12 08:32:13 发布

cunjie3951

最新推荐文章于 2024-08-12 08:32:13 发布

阅读量1.2k

点赞数

文章标签： javascript css ajax php vue ViewUI

现在，许多网站都使用某种动画来使目标网页更具吸引力。值得庆幸的是，有许多库可让您为网页上的元素设置动画，而无需从头开始。在本教程中，您将学习一个名为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属性的开始和结束值来控制元素沿x，y和z轴的平移动画。您还可以使用angleX ， angleY和angleZ属性沿不同的轴旋转任何元素。这类似于相应rotateX() rotateY()和rotateZ()在CSS变换。您还可以借助skewX和skewY属性沿X或Y轴倾斜元素。

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

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

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

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

您创建的Mojs Html对象本身不会为各个元素设置动画。您将必须在要play()每个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 Html对象内设置初始值和最终值时，删除连字符并将属性名称转换为camelCase 。这意味着您可以通过为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 scale:2到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应用sin.out缓动。如果要使用其他缓动功能使动画播放继续进行，可以使用easing属性指定其值。默认情况下，当向后播放动画时，也会使用为easing指定的值。如果要对后向动画应用其他缓动，则可以为backwardEasing属性设置一个值。

mojs库具有11种不同的内置缓动函数。它们是linear ， ease ， sin ， quad ， cubic ， quart ， quint ， expo ， circ ， back和elastic 。线性缓动只有一个名为linear.none变体。这是有道理的，因为动画将在不同的阶段以相同的速度进行。所有其他缓动函数具有三个不同的变体， out附加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模块。