粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子,这些粒子可以是圆点、图片。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画,来营造一种氛围感,比如下雪的动效,雪花飘舞就相当于一个个雪花粒子在做动画。
粒子动画的效果通过Particle组件展现。
说明:
该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
function Particle
<
PARTICLE extends ParticleType,
COLOR_UPDATER extends ParticleUpdater,
OPACITY_UPDATER extends ParticleUpdater,
SCALE_UPDATER extends ParticleUpdater,
ACC_SPEED_UPDATER extends ParticleUpdater,
ACC_ANGLE_UPDATER extends ParticleUpdater,
SPIN_UPDATER extends ParticleUpdater
>(value: {
particles: Array<
ParticleOptions<
PARTICLE,
COLOR_UPDATER,
OPACITY_UPDATER,
SCALE_UPDATER,
ACC_SPEED_UPDATER,
ACC_ANGLE_UPDATER,
SPIN_UPDATER
>
>
})
参数:
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
value | { particles:Array<ParticleOptions< PARTICLE, COLOR_UPDATER, OPACITY_UPDATER, SCALE_UPDATER, ACC_SPEED_UPDATER, ACC_ANGLE_UPDATER, SPIN_UPDATER >> } | 是 | 粒子动画的集合。每一个的粒子动画(ParticleOptions)包含粒子发射,同时可配置粒子的颜色、透明度、大小、速度、加速度与旋转速度,旋转速度,详见ParticleOptions属性说明。 |
属性
支持通用属性
事件
支持通用事件
ParticleOptions
interface ParticleOptions<
PARTICLE extends ParticleType,
COLOR_UPDATER extends ParticleUpdater,
OPACITY_UPDATER extends ParticleUpdater,
SCALE_UPDATER extends ParticleUpdater,
ACC_SPEED_UPDATER extends ParticleUpdater,
ACC_ANGLE_UPDATER extends ParticleUpdater,
SPIN_UPDATER extends ParticleUpdater
> {
emitter: EmitterOptions<PARTICLE>;
color?: ParticleColorPropertyOptions<COLOR_UPDATER>;
opacity?: ParticlePropertyOptions<number, OPACITY_UPDATER>;
scale?: ParticlePropertyOptions<number, SCALE_UPDATER>;
velocity?: {
speed: [number, number];
angle: [number, number];
};
acceleration?: {
speed?: ParticlePropertyOptions<number, ACC_SPEED_UPDATER>;
angle?: ParticlePropertyOptions<number, ACC_ANGLE_UPDATER>;
};
spin?: ParticlePropertyOptions<number, SPIN_UPDATER>;
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
emitter | EmitterOptions<PARTICLE> | 是 | 粒子发射器配置。 |
color | ParticleColorPropertyOptions<COLOR_UPDATER> | 否 | 粒子颜色配置。 说明: 默认值:{ range:[Color.White,Color.White] } 。图片粒子不支持设置颜色。 |
opacity | ParticlePropertyOptions<number, OPACITY_UPDATER> | 否 | 粒子透明度配置。 默认值:{ range:[1.0,1.0] } |
scale | ParticlePropertyOptions<number, SCALE_UPDATER> | 否 | 粒子大小配置。 默认值:{ range:[1.0,1.0] } |
velocity | { speed: [number, number]; angle: [number, number]; } | 否 | 粒子速度配置。 说明: speed表示速度大小。angle表示速度的方向(单位为角度),以元素几何中心为坐标原点,水平方向为X轴,正数表示顺时针方向旋转角度。 |
acceleration | { speed?: ParticlePropertyOptions<number, ACC_SPEED_UPDATER>; angle?: ParticlePropertyOptions<number, ACC_ANGLE_UPDATER>; } | 否 | 粒子加速度配置。 说明: speed表示加速度大小,angle表示加速度方向(单位为角度)。 默认值:{ speed:{range:[0.0,0.0]},angle:{range:[0.0,0.0]} } |
spin | ParticlePropertyOptions<number, SPIN_UPDATER> | 否 | 粒子自旋角度配置。 默认值:{range:[0.0,0.0]} 方向:正数表示顺时针旋转,负数表示逆时针旋转。 |
EmitterOptions
粒子发射器的配置
interface EmitterOptions<PARTICLE extends ParticleType> {
particle: {
type: PARTICLE;
config: ParticleConfigs[PARTICLE];
count: number;
lifetime?: number;
};
emitRate?: number;
shape?: ParticleEmitterShape;
position?: [Dimension, Dimension];
size?: [Dimension, Dimension];
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
particle | { type: PARTICLE, config: ParticleConfigs, count: number, lifetime?: number } | 是 | 粒子配置。 -type表示粒子类型,可以选择图片或者是点。 -config表示对应类型的配置。 -config类型和type值有关联: 1、如果type为ParticleType.POINT,则config类型为PointParticleParameters 。 2、如果type为ParticleType.IMAGE,则config类型为ImageParticleParameters 。 -count表示发射的粒子总数,count取值>=-1,当count为-1表示粒子总数无限大。默认值:0 -lifetime表示单个粒子的生命周期,默认值1000(即1000ms,1s),lifetime>=-1,当lifetime为-1表示粒子生命周期无限大。当lifetime<-1,取默认值。 |
emitRate | number | 否 | 发射器发射速率(即每秒发射粒子数)。 默认值:5。 |
shape | ParticleEmitterShape | 否 | 发射器形状。默认值:ParticleEmitterShape.RECTANGLE。 |
position | [Dimension, Dimension] | 否 | 发射器位置(距离组件左上角的位置)。 默认值: [0.0, 0.0] 。 |
size | [Dimension, Dimension] | 否 | 发射窗口的大小。 默认值['100%','100%'](即发射窗口占满Particle组件)。 |
ParticleConfigs
interface ParticleConfigs {
[ParticleType.POINT]: PointParticleParameters;
[ParticleType.IMAGE]: ImageParticleParameters;
}
参数名称 | 类型 | 必填 | 描述 |
---|---|---|---|
[ParticleType.POINT] | PointParticleParameters | 是 | 点状粒子配置。 |
[ParticleType.IMAGE] | ImageParticleParameters | 是 | 图片粒子配置。 |
PointParticleParameters
interface PointParticleParameters {
radius: VP;
}
参数名称 | 类型 | 必填 | 描述 |
---|---|---|---|
radius | VP | 是 | 粒子半径。 |
ImageParticleParameters
interface ImageParticleParameters {
src: ResourceStr;
size: [Dimension, Dimension];
objectFit?: ImageFit;
}
参数名称 | 类型 | 必填 | 描述 |
---|---|---|---|
src | ResourceStr | 是 | 图片路径。暂不支持svg、gif图片类型。 |
size | [Dimension, Dimension] | 是 | 图像尺寸。 |
objectFit | ImageFit | 否 | 图片显示模式。 |
ParticleColorPropertyOptions
interface ParticleColorPropertyOptions<UPDATER extends ParticleUpdater> {
range: [ResourceColor, ResourceColor];
updater?: {
type: UPDATER;
config: ParticleColorPropertyUpdaterConfigs[UPDATER];
};
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
range | [ResourceColor, ResourceColor] | 是 | 粒子初始颜色区间,粒子发射器生成粒子的初始颜色在range区间随机取值。 默认值:range:[Color.White,Color.White] |
updater | { type: UPDATER; config: ParticleColorPropertyUpdaterConfigs[UPDATER]; } | 否 | 颜色属性变化配置。颜色属性变化类型type有三类: 1、当type为ParticleUpdater.NONE,表示无变化,则config类型为ParticleColorPropertyUpdaterConfigs[ParticleUpdater.NONE]。 2、type为ParticleUpdater.RANDOM,表示随机变化,则config类型为ParticleColorPropertyUpdaterConfigs[ParticleUpdater.RANDOM]。 3、type为ParticleUpdater.CURVE,表示按动画曲线变化,则config类型为ParticleColorPropertyUpdaterConfigs[ParticleUpdater.CURVE]。 |
ParticleColorPropertyUpdaterConfigs
interface ParticleColorPropertyUpdaterConfigs {
[ParticleUpdater.NONE]: void;
[ParticleUpdater.RANDOM]: {
r: [number, number];
g: [number, number];
b: [number, number];
a: [number, number];
};
[ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<ResourceColor>>;
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
[ParticleUpdater.NONE] | void | 是 | 无变化,默认值undefined。 |
[ParticleUpdater.RANDOM] | { r: [number, number]; g: [number, number]; b: [number, number]; a: [number, number]; } | 是 | 表示r、g、b、a四个颜色通道分别变化一个差值,叠加当前颜色值,生成目标颜色值。实现颜色随机变化的效果。 |
[ParticleUpdater.CURVE] | Array<ParticlePropertyAnimation<ResourceColor>> | 是 | 表示变化方式为曲线变化时,颜色变化的配置。数组类型表示当前属性可以设置多段动画,如0ms-3000ms,3000ms-5000ms,5000ms-8000ms分别设置动画。 |
ParticlePropertyOptions
interface ParticlePropertyOptions<TYPE, UPDATER extends ParticleUpdater> {
range: [TYPE, TYPE];
updater?: {
type: UPDATER;
config: ParticlePropertyUpdaterConfigs<TYPE>[UPDATER];
};
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
range | [number, number] | 是 | 粒子初始属性值区间,粒子发射器生成粒子的属性值在range区间随机取值。 说明 各项属性的非法输入取默认值,当最大值小于最小值的时候取默认区间。 不同属性的默认值不同: 1、opacity属性:range:[1.0,1.0],取值范围0到1,默认值为0.0。 2、scale属性:range:[1.0,1.0],取值范围大于等于0,默认值为1.0。 3、acceleration加速度speed属性:range:[0.0,0.0],取值范围大于等于0,默认值为0.0。 4、acceleration加速度angle属性:range:[0.0,0.0],取值范围大于等于0,默认值为0.0。 5、spin属性:range:[0.0,0.0],默认值为0.0。 |
updater | {type: UPDATER;config: ParticlePropertyUpdaterConfigs[UPDATER];} | 否 | 属性变化配置。属性变化类型type有三类: 1、当type为ParticleUpdater.NONE,表示无变化,则config类型为ParticlePropertyUpdaterConfigs[ParticleUpdater.NONE]。 2、当type为ParticleUpdater.RANDOM,表示变化类型为随机变化,则config类型为ParticlePropertyUpdaterConfigs[ParticleUpdater.RANDOM]。 3、当type为ParticleUpdater.CURVE,表示变化类型为曲线变化,则config类型为ParticlePropertyUpdaterConfigs[ParticleUpdater.CURVE]。 |
ParticlePropertyUpdaterConfigs
interface ParticlePropertyUpdaterConfigs<T> {
[ParticleUpdater.NONE]: void;
[ParticleUpdater.RANDOM]: [T, T];
[ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<T>>;
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
[[ParticleUpdater.NONE] | void | 是 | 无变化,默认值undefined。 |
[ParticleUpdater.RANDOM] | [number, number] | 是 | 表示变化方式为匀速变化时,每秒的变化差值为设置区间随机生成的值。 目标属性值为当前属性值叠加变化差值。如当前属性值为0.2,config取[0.1,1.0]: 1、如果变化差值在区间[0.1,1.0]取随机值0.5,则目标属性值为0.2+0.5 = 0.7; 2、变化差值也可以取负值。如当前属性值为0.2,config为 [-3.0,2.0],如果变化差值在区间[-3.0,2.0]取随机值-2.0,则目标属性值为0.2-2.0 = -1.8。 说明: config配置的是变化差值的取值范围,差值的最大最小值没有约束。但是如果当前属性值叠加差值大于属性最大值,目标属性值取属性最大值;如果当前属性值叠加差值小于属性最小值,目标属性值取属性最小值。 例如:opacity的取值范围[0.0,1.0]则当当前属性值叠加差值超过1.0,则取1.0。 |
[ParticleUpdater.CURVE] | Array<ParticlePropertyAnimation<number>> | 是 | 表示变化方式为曲线变化时,属性变化的配置。数组类型表示当前属性可以设置多段动画,如0ms-3000ms,3000ms-5000ms,5000ms-8000ms分别设置动画。 |
ParticlePropertyAnimation
interface ParticlePropertyAnimation<T> {
from: T;
to: T;
startMillis: number;
endMillis: number;
curve?: Curve | ICurve;
}
参数名 | 类型 | 必填 | 描述 |
---|---|---|---|
from | T | 是 | 属性起始值。非法输入取对应属性的默认值。 |
to | T | 是 | 属性目标值。非法输入取对应属性的默认值。 |
startMillis | number | 是 | 动画开始时间。 |
endMillis | number | 是 | 动画结束时间。 |
curve | Curve | ICurve | 否 | 设置动画曲线。 默认值:Curve.Linear |
ParticleType
enum ParticleType {
POINT = 'point',
IMAGE = 'image',
}
名称 | 描述 |
---|---|
POINT | 点状粒子 |
IMAGE | 图片粒子 |
ParticleEmitterShape
enum ParticleEmitterShape {
RECTANGLE = 'rectangle',
CIRCLE = 'circle',
ELLIPSE = 'ellipse',
}
名称 | 描述 |
---|---|
RECTANGLE | 粒子发射器为矩形 |
CIRCLE | 粒子发射器为圆形 |
ELLIPSE | 粒子发射器为椭圆形 |
ParticleUpdater
enum ParticleUpdater {
NONE = 'none',
RANDOM = 'random',
CURVE = 'curve',
}
名称 | 描述 |
---|---|
NONE | 无变化 |
RANDOM | 随机变化 |
CURVE | 动画曲线变化 |
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙(HarmonyOS NEXT)最新学习路线
-
HarmonOS基础技能
- HarmonOS就业必备技能
- HarmonOS多媒体技术
- 鸿蒙NaPi组件进阶
- HarmonOS高级技能
- 初识HarmonOS内核
- 实战就业级设备开发
有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》
《鸿蒙生态应用开发V2.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。