快速入門Mojs動畫庫：爆炸模組指南

我們透過學習如何使用 mojs 為 HTML 元素新增動畫來開始本系列。在第二個教學中，我們繼續使用 Shape 模組製作內建 SVG 形狀的動畫。第三個教學介紹了使用 ShapeSwirl 和 stagger 模組對 SVG 形狀進行動畫處理的更多方法。

現在，我們將學習如何使用 Burst 模組以突發形式製作不同 SVG 形狀的動畫。本教程將取決於我們在前三個教程中介紹的概念。如果您還沒有閱讀過它們，我建議您先閱讀它們。

創建基本連拍動畫

在創建任何突發動畫之前，我們需要做的第一件事是實例化 Burst 物件。之後，我們可以指定不同屬性的值來控制動畫的播放方式。 Burst 模組中的許多屬性名稱與 Shape 模組中的屬性名稱相同。然而，在這種情況下，這些屬性執行非常不同的任務。

left 和 right 屬性決定突發的初始位置，而不是突發內部的粒子。同樣，x 和 y 屬性決定整個突發的移動而不是單一粒子的移動。

所有爆發粒子形成的圓的半徑由 radius 屬性控制。這與單一形狀的 radius 屬性非常不同，後者決定了這些形狀的大小。在爆發的情況下，半徑決定了其中各個形狀的距離。

可以使用 count 屬性指定單次突發中的形狀或粒子數量。預設情況下，您建立的每個突發中將有五個粒子。所有這些粒子均勻分佈在爆發的圓週上。例如，如果有四個粒子，它們將彼此成 90 度放置。如果有三個粒子，它們將被放置在 120 度處。

如果您不希望爆發粒子覆蓋整個 360 度，您可以使用 Degree 屬性指定應覆寫的部分。任何大於 0 的值對此屬性都有效。指定的度數將均勻分佈在所有粒子之間。如果度數超過 360，形狀可能會重疊。

使用 angle 屬性指定的角度決定了​​整個突發的角度。在這種情況下，單一粒子不是繞著它們自己的中心旋轉，而是繞著爆發的中心旋轉。這與地球繞太陽公轉類似，與地球自轉軸自轉不同。

scale 屬性可縮放突發的所有物理屬性的值，進而縮放各個形狀。就像其他突發屬性一樣，其中的所有形狀都會立即縮放。將突發 scale 設為 3 會將整個突發的半徑以及單一形狀的大小增加 3。

在下面的程式碼片段中，我們將使用剛剛討論的屬性來建立五個不同的突發。

var burstA = new mojs.Burst({
  count: 20
});

var burstB = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: 10
});

var burstC = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstD = new mojs.Burst({
  degree: 180,
  radiusX: 10,
  angle: -90,
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstE = new mojs.Burst({
  count: 20,
  degree: 3600
});

您可以看到 burstA 和 burstE 僅在它們必須覆蓋的度數上有所不同。由於 burstA 中的粒子必須覆蓋 360 度（預設值），因此它們的放置間隔為 360/20 = 18 度。另一方面，burstE 中的粒子以 3600/20 = 180 度數放置。從零開始，第一個粒子放置在 0 度處，下一個粒子放置在 180 度處。

然後將第三個粒子放置在 360 度處，基本上等於 0 度。然後將第四個粒子放置在 540 度處，但這基本上等於 180 度。換句話說，所有奇數粒子都放置在0度處，所有偶數粒子放置在180度處。最後，您只看到兩個粒子，因為所有其他粒子都與前兩個粒子重疊。

請務必記住，您無法直接控制突發動畫的持續時間、延遲或緩動功能。此模組根據正在動畫的不同子項的值自動確定所有這些值。

操縱單一爆發粒子

到目前為止，在本教程中，爆發中的所有粒子都應用了相同的動畫。它們的角度、比例、半徑和位置都改變了相同的值。此外，我們無法控制單一粒子或整個爆發的持續時間和延遲。 mojs Burst 模組沒有一組可以直接變更所有這些值的屬性。但是，我們可以指定單一粒子的動畫值，進而影響爆發動畫。

爆发动画中的所有粒子都被视为原始 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中文網其他相關文章！