Mojs 애니메이션 라이브러리 빠른 시작: 폭발 모듈 가이드

mojs를 사용하여 HTML 요소에 애니메이션을 적용하는 방법을 배우는 것으로 이 시리즈를 시작합니다. 이 두 번째 튜토리얼에서는 Shape 模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl 和 stagger 모듈을 사용하여 SVG 모양에 애니메이션을 적용하는 더 많은 방법을 계속 설명합니다.

이제 Burst 모듈을 사용하여 버스트에서 다양한 SVG 모양에 애니메이션을 적용하는 방법을 알아봅니다. 이 튜토리얼은 처음 세 튜토리얼에서 다룬 개념에 따라 달라집니다. 아직 읽어보지 않으셨다면 먼저 읽어보시길 권합니다.

기본 버스트 애니메이션 만들기

버스트 애니메이션을 만들기 전에 가장 먼저 해야 할 일은 Burst 对象。之后，我们可以指定不同属性的值来控制动画的播放方式。 Burst 模块中的许多属性名称与 Shape 개체를 인스턴스화하는 것입니다. 그런 다음 다양한 속성에 대한 값을 지정하여 애니메이션 재생 방법을 제어할 수 있습니다.

모듈의 많은 속성은 Shape 모듈의 속성과 동일한 이름을 갖습니다. 그러나 이 경우 이러한 속성은 매우 다른 작업을 수행합니다.

left 和 right 属性决定突发的初始位置，而不是突发内部的粒子。同样，x 和 y

속성은 개별 입자의 움직임보다는 전체 버스트의 움직임을 결정합니다.

radius 属性控制。这与单个形状的 radius모든 폭발 입자로 형성된 원의 반경은 이러한 모양의 크기를 결정하는

속성에 따라 매우 다릅니다. 버스트의 경우 반경은 그 안에 있는 개별 모양의 거리를 결정합니다.

count

속성을 사용하여 단일 버스트의 모양이나 입자 수를 지정할 수 있습니다. 기본적으로 생성하는 각 버스트에는 5개의 입자가 있습니다. 이 모든 입자는 버스트 둘레에 고르게 분포됩니다. 예를 들어, 4개의 입자가 있는 경우 서로 90도 각도로 배치됩니다. 세 개의 입자가 있는 경우 120도에 배치됩니다.

Degree파티클이 360도 전체를 덮는 것을 원하지 않는 경우

속성을 사용하여 덮어야 할 부분을 지정할 수 있습니다. 이 속성에는 0보다 큰 모든 값이 유효합니다. 지정된 정도는 모든 입자에 고르게 분포됩니다. 360도를 초과하면 모양이 겹칠 수 있습니다.

angle

속성을 사용하여 지정한 각도에 따라 전체 버스트의 각도가 결정됩니다. 이 경우 개별 입자는 자체 중심을 중심으로 회전하지 않고 버스트 중심을 중심으로 회전합니다. 이것은 태양 주위를 도는 지구의 공전과 유사하며, 지구의 자전과는 다릅니다.

scale 属性可缩放突发的所有物理属性的值，进而缩放各个形状。就像其他突发属性一样，其中的所有形状都会立即缩放。将突发 scale

3으로 설정하면 전체 버스트의 반경과 개별 모양의 크기가 3만큼 늘어납니다.

아래 코드 조각에서는 방금 설명한 속성을 사용하여 다섯 가지 버스트를 생성합니다.

으아아아 burstA 和 burstE 仅在它们必须覆盖的度数上有所不同。由于 burstA 中的粒子必须覆盖 360 度（默认值），因此它们的放置间隔为 360/20 = 18 度。另一方面，burstE 中的粒子以 3600/20 = 180학번배치를

보실 수 있습니다. 0부터 시작하여 첫 번째 입자는 0도에 배치되고 다음 입자는 180도에 배치됩니다.

그런 다음 세 번째 입자를 360도에 배치합니다. 이는 기본적으로 0도와 같습니다. 그런 다음 네 번째 입자를 540도에 배치합니다. 그러나 이는 기본적으로 180도와 같습니다. 즉, 모든 홀수 입자는 0도에 배치되고 모든 짝수 입자는 180도에 배치됩니다. 결국에는 다른 모든 입자가 처음 두 입자와 겹치기 때문에 두 개의 입자만 표시됩니다.

버스트 애니메이션의 지속 시간, 지연 또는 완화 기능을 직접 제어할 수 없다는 점을 기억하는 것이 중요합니다. 모듈은 애니메이션화되는 다양한 하위 항목의 값을 기반으로 이러한 모든 값을 자동으로 결정합니다.

개별 버스트 입자 조작

Burst지금까지 이 튜토리얼에서는 버스트의 모든 입자에 동일한 애니메이션이 적용되었습니다. 각도, 크기, 반경 및 위치는 모두 동일한 값으로 변경됩니다. 또한 개별 입자 또는 전체 버스트의 지속 시간과 대기 시간을 제어할 수 없습니다. mojs

모듈에는 이러한 모든 값을 직접 변경할 수 있는 속성 집합이 없습니다. 그러나 개별 입자에 대한 애니메이션 값을 지정할 수 있으며 이는 차례로 버스트 애니메이션에 영향을 미칩니다. 🎜

爆发动画中的所有粒子都被视为原始 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!