教程:动画引擎 - FrankYang6921/extreme-particles Wiki

这是Extreme Particles中最强大的功能,使得任何粒子模组都相形见绌。通过我精心编写的动画引擎,你可以赋予函数曲线、生成的图像以及生成的文本任意动画。改变它们的动量,颜色,透明度、大小,甚至为它们应用CSS动画,这都不在话下。动画指令是这样的:

/exp animation register <标识符> [表达式] [时长] [下一组动画]

要删除一个动画,使用这个指令:

/exp animation withdraw <标识符>

你可以结合前面几章的指令来阅读这一章。下面是参数的介绍。

标识符

顾名思义 × 1,标识符用来标识一个动画。标识符可以是任何字符串,譬如"kworker""1145141919810""\\"甚至是"✔"。如果你在使用这条指令时只输入了标识符,而没有输入后续的参数,Extreme Particles会为你注销这个标识符对应的动画。举个例子,/exp animation "id"会注销标识符为"id"的动画,这样你就可以把这个标识符空出来,以便日后使用了。

时长

顾名思义 × 2,它指定了动画的时长(ms)。这个值默认是1000,适用于大多数场景。

下一组动画

顾名思义 × 3,它指定了下一组动画的标识符。这特别适合某些需要多个连续动画的场景。

表达式

重头戏来了!要学习JSON表达式须有一定JavaScript基础。这是一个JSON格式的表达式。它的格式大概是这样的:

[
    {	
        "origin": [],
        "color": [],
        "alpha": 0.0,
        "scale": 0.0,
        "blendMode": "NORMAL",
        "progress": 0.0,
        "transforms": [
            "...",
            "..."
        ]
    },
    {
        "...": "..."
    },
	"..."
]

看起来很复杂,是吗?我们从外向里分析。最外层是一个数组。它包含了所有动画的关键帧。每个关键帧都是以对象形式表示的,正如2~13行所示。每个关键帧对象有7个属性。origin是变换原点,color是颜色属性,而alphascale就不需要我多说了吧。transforms指定了要应用的CSS变换。最重要的是pace参数,它指定了这一关键帧在时间轴中的位置(百分比)。如果一个动画持续5000ms,而某一关键帧的progress被设为60,那么这一关键帧的时间节点便是第3000ms。第一个关键帧的pace尽量保持0。最后一个关键帧的pace尽量保持100。至少需要两个关键帧。动画总是从一个关键帧平滑过渡至另一关键帧。以颜色举例:

颜色 关键帧1 ... 40% ... 关键帧2
255 ... 255 * 0.6 + 128 * 0.4 = 204 ... 128
绿 64 ... 64 * 0.6 + 255 * 0.4 = 140 ... 255
128 ... 128 * 0.6 + 255 * 0.4 = 179 ... 255

color

它等同于一般指令中的[<红> <绿> <蓝>],只不过须写作[红, 绿, 蓝]的形式。

blendMode

它就像Photoshop中的混合模式,决定color如何与粒子本来的颜色混合。以下是几个有效值,与Photoshop中的部分值等效。:

alphascale

它们等同于一般指令中的[透明度][大小]

transformorigin

如果你具有一些CSS知识,学起来会很容易。我添加了以下几种三维变换的支持。

辨析:scale3dscale

scale3d针对的是整个图形,单个粒子的大小不会改变。scale针对的是单个粒子,整个图形的大小不会改变。

这些变换语法几乎与CSS完全相同,唯一的不同点是它不需要单位——长度单位是m,角度单位是rad。你可以参阅MDN以了解如何使用这些变换。origin的值则应是包含三个元素的double数组,分别指定变换原点的xyz轴坐标,它可以类比transform-originCSS属性,只不过这里的origin是三维的。

重要特性:参数忽略

当一个参数被设定至特定值时,它会被忽略。对于color的任意分量,这一值是任意负数。对于alphascale,这一值也是任意负数。对于CSS变换,这一值是[]['translateX(0)']或者['rotateX(0)'],总之,任何没有实际效果的变换都会被忽略。参数忽略与将参数设为0并不同。如果你将CSS变换设为如['translateX(0.02)']的值,那么变换仍然会进行,即便这个变换基本不可察觉。动画引擎会强制锁定粒子的位置,这时候粒子的运动会被动画引擎强制锁定,它们甚至还有可能相互干扰,造成游戏卡顿。同理,如果你将颜色设为[0, 0, 0],那么颜色仍然会被应用,粒子的颜色会被动画引擎强制锁定,这时候如果你将动画应用于粒子画,那么粒子画的颜色全部会被毁掉。正是因为如此,你可以将参数设为那些值,或留空不填来激活参数忽略功能。

当然了,我也有一个例子给你。

exp animation ani "[{transforms: [], pace: 0}, {transforms: ['scaleY(1.57)'], scale: .1, progress: 33.3}, {transforms: ['scaleY(1.57)', 'rotateY(1.57)'], alpha: 1, scale: .15, progress: 66.7}, {transforms: ['scaleY(1.57)', 'rotateY(1.57)', 'translateZ(-5)'], alpha: .2, scale: .075, progress: 100}]" 2000

单独拿出JSON来,它是这样的。我还录制了一段演示视频(已失效)。

[{
	"transforms": [],
	"progress": 0
}, {
	"transforms": ["scaleY(1.57)"],
	"scale": 0.1,
	"progress": 33.3
}, {
	"transforms": ["scaleY(1.57)", "rotateY(1.57)"],
	"alpha": 1,
	"scale": 0.15,
	"progress": 66.7
}, {
	"transforms": ["scaleY(1.57)", "rotateY(1.57)", "translateZ(-5)"],
	"alpha": 0.2,
	"scale": 0.075,
	"progress": 100
}]

Further more!

你现在已经知道了如何来制作动画,但是你可能注意到我没有讲如何使用它。这是粒子组一章的内容!