Mojs アニメーション ライブラリから始める: HTML コンポーネント

最近の多くの Web サイトでは、ランディング ページをより魅力的にするために、何らかのアニメーションが使用されています。ありがたいことに、最初からすべてを行わなくても、Web ページ上の要素をアニメーション化できるライブラリが数多くあります。このチュートリアルでは、mojs と呼ばれるライブラリの 1 つについて学習します。

このライブラリは、シンプルな宣言型 API であるため、非常に使いやすいです。 mojs を使用して作成できるアニメーションはスムーズで網膜に優しいため、すべてがプロフェッショナルに見えます。

Mojsをインストールする

moj をプロジェクトに組み込む方法はたくさんあります。ライブラリは GitHub リポジトリから取得できます。あるいは、さまざまな CDN からの最新のリポジトリへのリンクをプロジェクトに直接含めることもできます。

リーリー

開発者は、次のコマンドを実行して、npm や Bower などのパッケージ マネージャーを使用して mojs をインストールすることもできます。 リーリー

ライブラリをプロジェクトに含めたら、さまざまなモジュールを使用して興味深いアニメーションの作成を開始できます。

Mojs の HTML モジュール

このチュートリアルでは、mojs ライブラリの HTML モジュールに焦点を当てます。このモジュールを使用すると、Web ページ上のさまざまな HTML 要素をアニメーション化できます。

DOM 要素をアニメーション化するには、最初に mojs

Html オブジェクトを作成する必要があります。このオブジェクト内でアニメーション化する要素とそのプロパティのセレクターを指定できます。

el の値を設定すると、mojs を使用してアニメーション化する要素を識別できます。その値をセレクターまたは DOM ノードに設定できます。

HTML モジュールには、DOM 要素のさまざまな変換関連のプロパティをアニメーション化するために使用できる、いくつかの事前定義されたプロパティがあります。たとえば、#xx

、y、および z プロパティを指定できます。 angleX、angleY、angleZ プロパティを使用して、さまざまな軸に沿って要素を回転することもできます。これは、CSS の対応する rotateX()、rotateY()、および rotateZ() 変換に似ています。 skewX および skewY プロパティを使用して、X 軸または Y 軸に沿って要素を傾斜させることもできます。 スケーリング アニメーションをさまざまな要素に適用するのも同様に簡単です。要素を両方向にスケールしたい場合は、

scale

プロパティの値を設定するだけです。同様に、scaleX プロパティと scaleY プロパティに適切な値を設定することで、さまざまな軸に沿って要素のスケーリングをアニメーション化できます。 アニメーションの初期値と最終値を設定できるこれらすべてのプロパティに加えて、アニメーションの再生を制御するプロパティがいくつかあります。

duration

プロパティを使用して、アニメーションの継続時間を指定できます。指定された値には、アニメーションの継続時間をミリ秒単位で設定する数値が必要です。遅延してからアニメーションを開始する場合は、delay プロパティを使用して遅延値を設定できます。 duration と同様に、delay もその値が数値であることを期待します。

repeat

属性を使用すると、アニメーションを複数回繰り返すことができます。デフォルト値はゼロです。これは、アニメーションが 1 回だけ再生されることを意味します。 1 に設定するとアニメーションが 2 回再生され、2 に設定するとアニメーションが 3 回再生されます。アニメーションが最初の反復を完了すると、要素は初期状態に戻り、アニメーションを再び開始します (repeat 属性の値を設定した場合)。最終状態から初期状態へのこの突然のジャンプは、すべての状況において理想的であるとは限りません。 最終状態に達した後にアニメーションを逆再生したい場合は、

isYoyo

プロパティの値を true に設定します。デフォルト設定は false です。最後に、speed プロパティを使用して、アニメーションの再生速度を設定できます。デフォルト値は 1 です。 2 に設定すると、アニメーションが 2 倍の速度で再生されます。同様に、0.5 に設定すると、アニメーションが半分の速度で再生されます。 作成した mojs

Html

オブジェクトは、それ自体では個々の要素をアニメーション化しません。再生するすべての mojs Html アニメーションで play() メソッドを呼び出す必要があります。これは、今説明したすべてのプロパティを使用して 3 つの異なるボックスをアニメーション化する例です。 リーリー

您不仅限于为元素的变换属性设置动画。 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 中国語 Web サイトの他の関連記事を参照してください。