Quick Start with the Mojs Animation Library: A Guide to the Explosion Module

We start this series by learning how to animate HTML elements using mojs. In this second tutorial, we continue to animate built-in SVG shapes using the Shape module. The third tutorial shows more ways to animate SVG shapes using the ShapeSwirl and stagger modules.

Now we will learn how to animate different SVG shapes in bursts using the Burst module. This tutorial will depend on the concepts we introduced in the previous three tutorials. If you haven't read them yet, I recommend reading them first.

Create basic burst animation

Before creating any burst animation, the first thing we need to do is instantiate a Burst object. Afterwards, we can specify values ​​for different properties to control how the animation plays. Many properties in the Burst module have the same names as properties in the Shape module. However, in this case, these properties perform very different tasks.

left and right properties determine the initial position of the burst, not the particles inside the burst. Likewise, the x and y properties determine the movement of the entire burst rather than the movement of individual particles.

The radius of the circle formed by all burst particles is controlled by the radius property. This is very different from the radius property of individual shapes, which determines the size of those shapes. In the case of a burst, the radius determines the distance between the individual shapes within it.

You can specify the number of shapes or particles in a single burst using the count property. By default, there will be five particles in each burst you create. All these particles are evenly distributed around the circumference of the burst. For example, if there are four particles, they will be placed at 90 degrees to each other. If there are three particles, they will be placed at 120 degrees.

If you don't want the burst particles to cover the entire 360 ​​degrees, you can use the Degree property to specify the portion that should be covered. Any value greater than 0 is valid for this property. The specified degree will be evenly distributed among all particles. If the degree exceeds 360, the shapes may overlap.

The angle specified using the angle attribute determines the angle of the entire burst. In this case, the individual particles are not rotating around their own centers, but around the center of the burst. This is similar to the Earth's revolution around the Sun, and is different from the Earth's rotation on its axis.

scale The property scales the values ​​of all physical properties of the burst and therefore the individual shapes. Just like other burst properties, all shapes within it scale immediately. Setting the burst scale to 3 increases the radius of the entire burst, as well as the size of individual shapes, by 3.

In the code snippet below, we will create five different bursts using the properties just discussed.

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
});

You can see that burstA and burstE only differ in the number of degrees they have to cover. Since the particles in burstA must cover 360 degrees (the default), they are placed 360/20 = 18 degrees apart. On the other hand, particles in burstE are placed at 3600/20 = 180 degrees. Starting from zero, the first particle is placed at 0 degrees and the next particle is placed at 180 degrees.

Then place the third particle at 360 degrees, which is basically equal to 0 degrees. Then place the fourth particle at 540 degrees, but that's basically equal to 180 degrees. In other words, all odd particles are placed at 0 degrees and all even particles are placed at 180 degrees. In the end, you only see two particles because all other particles overlap the first two particles.

It is important to remember that you cannot directly control the duration, delay, or easing functionality of burst animations. The module automatically determines all these values ​​based on the values ​​of the different children being animated.

Manipulate a single burst particle

So far in this tutorial, all particles in the burst have had the same animation applied. Their angle, scale, radius and position all change by the same value. Additionally, we have no control over the duration and latency of individual particles or the entire burst. The mojs Burst module does not have a set of properties that can directly change all of these values. However, we can specify animation values ​​for individual particles, which in turn affects the burst animation.

爆发动画中的所有粒子都被视为原始 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 是一个非常强大的动画库，您获得的最终结果取决于您对所有属性的创意程度，因此请不断尝试。

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

The above is the detailed content of Quick Start with the Mojs Animation Library: A Guide to the Explosion Module. For more information, please follow other related articles on the PHP Chinese website!