Mojs アニメーション ライブラリのクイック スタート: 爆発モジュールのガイド

このシリーズは、mojs を使用して HTML 要素をアニメーション化する方法を学ぶことから始めます。この 2 番目のチュートリアルでは、引き続き Shape モジュールを使用して組み込みの SVG シェイプをアニメーション化します。 3 番目のチュートリアルでは、ShapeSwirl モジュールと stagger モジュールを使用して SVG シェイプをアニメーション化するその他の方法を示します。

ここでは、Burst モジュールを使用して、さまざまな SVG 形状をバーストでアニメーション化する方法を学びます。このチュートリアルは、前の 3 つのチュートリアルで紹介した概念に基づいています。まだ読んでいない場合は、まず読むことをお勧めします。

基本的なバースト アニメーションを作成する

バースト アニメーションを作成する前に、最初に行う必要があるのは、Burst オブジェクトをインスタンス化することです。その後、さまざまなプロパティの値を指定して、アニメーションの再生方法を制御できます。 Burst モジュールの多くのプロパティは、Shape モジュールのプロパティと同じ名前です。ただし、この場合、これらのプロパティはまったく異なるタスクを実行します。

left プロパティと right プロパティは、バースト内のパーティクルではなく、バーストの初期位置を決定します。同様に、#xx プロパティと y プロパティは、個々のパーティクルの動きではなく、バースト全体の動きを決定します。

すべてのバースト パーティクルによって形成される円の半径は、

radius プロパティによって制御されます。これは、形状のサイズを決定する個々の形状の radius プロパティとは大きく異なります。バーストの場合、半径によってその中の個々のシェイプ間の距離が決まります。

count プロパティを使用して、単一バースト内のシェイプまたはパーティクルの数を指定できます。デフォルトでは、作成する各バーストには 5 つのパーティクルが含まれます。これらの粒子はすべて、バーストの周囲に均等に分散されます。たとえば、パーティクルが 4 つある場合、それらは互いに 90 度で配置されます。パーティクルが 3 つある場合、それらは 120 度に配置されます。

バースト パーティクルで 360 度全体をカバーしたくない場合は、

Degree プロパティを使用してカバーする部分を指定できます。このプロパティには 0 より大きい値が有効です。指定した次数がすべてのパーティクルに均等に分散されます。次数が 360 を超えると、形状が重なる可能性があります。

angle 属性を使用して指定された角度によって、バースト全体の角度が決まります。この場合、個々の粒子はそれ自体の中心の周りを回転しているのではなく、バーストの中心の周りを回転しています。これは、地球が太陽の周りを公転することに似ていますが、地球が地軸を中心に回転することとは異なります。

scale このプロパティは、バーストのすべての物理プロパティの値、したがって個々の形状をスケールします。他のバースト プロパティと同様に、その中のすべてのシェイプはすぐに拡大縮小されます。バースト scale を 3 に設定すると、バースト全体の半径と個々のシェイプのサイズが 3 増加します。

以下のコード スニペットでは、今説明したプロパティを使用して 5 つの異なるバーストを作成します。

リーリー

#burstA

と burstE は、カバーする度数が異なるだけであることがわかります。 burstA のパーティクルは 360 度 (デフォルト) をカバーする必要があるため、360/20 = 18 度離れて配置されます。一方、burstE のパーティクルは 3600/20 = 180 度に配置されます。ゼロから開始して、最初のパーティクルは 0 度に配置され、次のパーティクルは 180 度に配置されます。 次に、3 番目のパーティクルを 360 度 (基本的には 0 度に等しい) に配置します。次に 4 番目のパーティクルを 540 度に配置しますが、これは基本的に 180 度に等しいです。言い換えれば、すべての奇数のパーティクルは 0 度に配置され、すべての偶数のパーティクルは 180 度に配置されます。他のすべてのパーティクルが最初の 2 つのパーティクルと重なるため、最終的には 2 つのパーティクルだけが表示されます。

バースト アニメーションの継続時間、遅延、またはイージング機能を直接制御できないことを覚えておくことが重要です。モジュールは、アニメーション化されているさまざまな子の値に基づいて、これらすべての値を自動的に決定します。

単一のバースト パーティクルを操作する

このチュートリアルではこれまで、バースト内のすべてのパーティクルに同じアニメーションが適用されてきました。角度、スケール、半径、位置はすべて同じ値で変化します。さらに、個々のパーティクルまたはバースト全体の継続時間と遅延を制御することはできません。 mojs

Burst

モジュールには、これらの値すべてを直接変更できる一連のプロパティがありません。ただし、個々のパーティクルのアニメーション値を指定することができ、それがバースト アニメーションに影響します。 <p>爆发动画中的所有粒子都被视为原始 <code class="inline">Burst 对象的子级。因此，mojs 允许我们使用 children 属性来控制单个爆发粒子的动画，该属性接受一个对象作为其值。您可以在子对象内使用除 x 和 y 之外的所有 ShapeSwirl 属性。这是有道理的，因为爆发动画中的单个粒子必须出现在某些位置，并且允许我们随机更改单个粒子的位置将改变配置。

您未指定的任何子属性值都将设置为 ShapeSwirl 模块提供的默认值。在下面的示例中，我们对突发动画的 20 条不同线进行动画处理。这次，angle 属性已设置在单个粒子上，而不是 Burst 对象上，这样只有线绕其中心旋转，而不是整个对象。正如我们在上一篇教程中了解到的，所有 ShapeSwirl 对象默认情况下都会从 1 缩小到 0。这就是动画中线条长度从 40 变为 0 的原因。

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

正如我之前提到的，我们可以为连拍动画中的所有 ShapeSwirl 属性设置动画。动画中的每个子项都可以有自己的一组属性。如果仅提供一个值，它将应用于所有子粒子。如果这些值以数组形式提供，它们将按顺序应用，一次一个粒子。

下面是使用我们迄今为止学到的所有概念创建五种不同的突发动画的 JavaScript 代码。

var burstA = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    stroke: "black",
    radius: 20,
    angle: {
      0: 360
    },
    duration: 4000
  }
});

var burstB = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    fill: ["yellow", "cyan", "orange"],
    stroke: "black",
    radius: 20,
    scale: {
      1: 2
    },
    duration: 2000
  },
  isShowEnd: false
});

var burstC = new mojs.Burst({
  count: 20,
  angle: {
    0: -180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "black", "blue"],
    radius: {
      10: "stagger(5, 1)"
    }
  }
});

var burstD = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    scale: {
      1: "rand(1, 10)"
    }
  },
  isShowEnd: false
});

var burstE = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    stroke: "black",
    scale: {
      1: "rand(1, 10)"
    }
  }
}).then({
  angle: {
    0: 360
  },
  radius: {
    100: 0
  },
  scale: {
    1: 0
  }
});

在第一个突发动画中，直接应用于 Burst 对象的 angle 会围绕突发对象的中心旋转整个组。然而，在children属性中应用的angle会围绕它们自己的中心旋转所有三角形。我们还通过将所有子级的动画持续时间更改为 4000 毫秒来减慢突发动画的速度。

在第二个连拍动画中，所有三角形的颜色均取自传递给 fill 属性的数组。我们只指定了三种填充颜色，但三角形的总数为 20。在这种情况下，mojs 会不断循环数组元素，并一次又一次地用相同的三种颜色填充三角形。

在第四个动画中，我们使用在上一个教程中了解的 rand 字符串来为所有子粒子随机选择一个比例值。我们还将 isShowEnd 属性的值设置为 false 以隐藏动画结束时的粒子。

在第五个动画中，我们使用 Shape 模块教程中的 then() 方法在第一个动画序列完成后播放另一个动画序列。

最终想法

本系列的目的是让您熟悉 mojs 动画库的基础知识。每个教程都侧重于单个模块以及如何使用该模块中的属性来创建基本动画。

最后一个教程使用了之前教程中的概念来创建稍微复杂的动画。 Mojs 是一个非常强大的动画库，您获得的最终结果取决于您对所有属性的创意程度，因此请不断尝试。

如果您希望我在本教程中澄清任何内容，请在评论中告诉我。

以上がMojs アニメーション ライブラリのクイック スタート: 爆発モジュールのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。