鸿蒙5.0开发进阶：ArkTS组件-粒子动画 (Particle)

原创 于 2025-02-11 14:56:32 发布 · 647 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #ArkUI #ArkTS #前端

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

粒子动画 (Particle)

粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子，这些粒子可以是圆点、图片。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感，比如下雪的动效，雪花飘舞就相当于一个个雪花粒子在做动画。

粒子动画的效果通过Particle组件展现。

说明

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

interface ParticleInterface {
  <
    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
    >
    >;
  }): ParticleAttribute;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

参数：

参数名类型必填描述
value

{

particles:Array<ParticleOptions<

PARTICLE,

COLOR_UPDATER,

OPACITY_UPDATER,

SCALE_UPDATER,

ACC_SPEED_UPDATER,

ACC_ANGLE_UPDATER,

SPIN_UPDATER

>>

}

是粒子动画的集合。每一个的粒子动画（ParticleOptions）包含粒子发射，同时可配置粒子的颜色、透明度、大小、速度、加速度与旋转速度，旋转速度。

属性

除支持通用属性外还支持以下属性：

disturbanceFields12+

disturbanceFields(fields: Array<DisturbanceFieldOptions>)

设置扰动场。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
fieldsArray<DisturbanceFieldOptions>是扰动场数组。

emitter12+

emitter(value: Array<EmitterProperty>)

支持发射器位置动态更新

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueArray<EmitterProperty>是需要更新的emitter参数数组

事件

支持通用事件

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
emitterEmitterOptions<PARTICLE>是粒子发射器配置。
colorParticleColorPropertyOptions<COLOR_UPDATER>否

粒子颜色配置。

说明：

默认值：{ range:[Color.White,Color.White] } 。图片粒子不支持设置颜色。

opacityParticlePropertyOptions<number, OPACITY_UPDATER>否

粒子透明度配置。

默认值：{ range:[1.0,1.0] }

scaleParticlePropertyOptions<number, SCALE_UPDATER>否

粒子大小配置。

默认值：{ range:[1.0,1.0] }

velocity

{

speed: [number, number];

angle: [number, number]

}

否

粒子速度配置。

说明：

speed表示速度大小。angle表示速度的方向（单位为角度），以元素几何中心为坐标原点，水平方向为X轴，正数表示顺时针方向旋转角度。

默认值：{ speed:[0.0,0.0],angle:[0.0,0.0] }

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]} }

spinParticlePropertyOptions<number, SPIN_UPDATER>否

粒子自旋角度配置。

默认值：{range:[0.0,0.0]}

方向：正数表示顺时针旋转，负数表示逆时针旋转。

EmitterOptions

粒子发射器的配置

interface EmitterOptions<PARTICLE extends ParticleType> {   
  particle: {
    type: PARTICLE;
    config: ParticleConfigs[PARTICLE];
    count: number;
    lifetime?: number;
    lifetimeRange?: number;
  };
  emitRate?: number;
  shape?: ParticleEmitterShape;
  position?: [Dimension, Dimension];
  size?: [Dimension, Dimension];
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
particle

{

type: PARTICLE;

config: ParticleConfigs;

count: number;

lifetime?: number;

lifeTimeRange?:number12+

}

是

粒子配置。

-type表示粒子类型，可以选择图片或者是点。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

-config表示对应类型的配置。

-config类型和type值有关联：

1、如果type为ParticleType.POINT，则config类型为PointParticleParameters 。

2、如果type为ParticleType.IMAGE，则config类型为ImageParticleParameters 。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

-count表示发射的粒子总数，count取值>=-1,当count为-1表示粒子总数无限大。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

-lifetime表示单个粒子的生命周期，默认值1000（即1000ms，1s）,lifetime>=-1,当lifetime为-1表示粒子生命周期无限大。当lifetime<-1，取默认值。

**说明：**如果不需要动画一直播放，建议不要将生命周期设置为-1，可能对性能造成较大影响。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

-lifeTimeRange表示粒子生命周期取值范围，设置lifeTimeRange后粒子的生命周期为 [lifetime-lifeTimeRange,lifeTime+lifeTimeRange]中间的一个随机整数。lifeTimeRange 默认值为0，取值范围为为0到正无穷。设置为负值时取默认值。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

emitRatenumber否发射器发射速率（即每秒发射粒子数）。 默认值：5，小于0时取默认值5。emitRate值超过5000时会极大影响性能，建议设置参数小于5000。
shapeParticleEmitterShape否发射器形状。默认值：ParticleEmitterShape.RECTANGLE。
position[Dimension, Dimension]否

发射器位置（距离组件左上角的位置。第一个参数为x方向上的相对偏移，第二个参数为y轴方向相对偏移。）

默认值：[0.0, 0.0]。

size[Dimension, Dimension]否

发射窗口的大小。第一个参数为发射器宽，第二个参数为发射器高。

默认值['100%','100%'](即发射窗口占满Particle组件)。

ParticleConfigs

interface ParticleConfigs { 
  [ParticleType.POINT]: PointParticleParameters;
  [ParticleType.IMAGE]: ImageParticleParameters;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
[ParticleType.POINT]PointParticleParameters是点状粒子配置。
[ParticleType.IMAGE]ImageParticleParameters是图片粒子配置。

PointParticleParameters

interface PointParticleParameters {
  radius: VP;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
radiusVP是粒子半径。

ImageParticleParameters

interface ImageParticleParameters {
  src: ResourceStr;
  size: [Dimension, Dimension];
  objectFit?: ImageFit;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
srcResourceStr是图片路径。暂不支持svg图片类型。
size[Dimension, Dimension]是图像尺寸。
objectFitImageFit否图片显示模式。

ParticleColorPropertyOptions

interface ParticleColorPropertyOptions<UPDATER extends ParticleUpdater> {
  range: [ResourceColor, ResourceColor]; 
  distributionType?: DistributionType;
  updater?: {
    type: UPDATER;
    config: ParticleColorPropertyUpdaterConfigs[UPDATER];
  };
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
range[ResourceColor, ResourceColor]是

粒子初始颜色区间，粒子发射器生成粒子的初始颜色在range区间随机取值。

默认值：range:[Color.White,Color.White]

元服务API： 从API version 11开始，该接口支持在元服务中使用。

distributionType12+DistributionType否

粒子初始颜色随机值分布，允许用户选择颜色随机值生成的分布类型，支持均匀分布或正态（高斯）分布。

默认值：DistributionType.UNIFORM

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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]。

默认值：type默认为 ParticleUpdater.NONE。

说明：

当type为ParticleUpdater.RANDOM或者ParticleUpdater.CURVE时，updater中颜色配置的优先级高于range中的颜色配置。在updater配置的动画时间周期内，以updater中的颜色配置来变化；在updater配置的动画时间周期外，以range中的颜色配置来变化。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
[ParticleUpdater.NONE]void是无变化。
[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];
  };
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
range[TYPE, TYPE]是

粒子初始属性值区间，粒子发射器生成粒子的属性值在range区间随机取值。

说明

各项属性的非法输入取默认值，当最大值小于最小值的时候取默认区间。TYPE为number。

不同属性的默认值不同：

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。

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]

默认值：type默认为ParticleUpdater.NONE。

ParticlePropertyUpdaterConfigs

interface ParticlePropertyUpdaterConfigs<T> {
    [ParticleUpdater.NONE]: void;
    [ParticleUpdater.RANDOM]: [T, T];
    [ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<T>>;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
[[ParticleUpdater.NONE]void是无变化。
[ParticleUpdater.RANDOM][T, T]是

表示变化方式为匀速变化时，每秒的变化差值为设置区间随机生成的值。

目标属性值为当前属性值叠加变化差值。如当前属性值为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配置的是变化差值的取值范围，差值的最大最小值没有约束。但是如果当前属性值叠加差值大于属性最大值，目标属性值取属性最大值；如果当前属性值叠加差值小于属性最小值，目标属性值取属性最小值。T为number。

例如：opacity的取值范围[0.0,1.0]则当当前属性值叠加差值超过1.0，则取1.0。

[ParticleUpdater.CURVE]Array<ParticlePropertyAnimation<T>>是表示变化方式为曲线变化时，属性变化的配置。数组类型表示当前属性可以设置多段动画，如0ms-3000ms，3000ms-5000ms，5000ms-8000ms分别设置动画。T为number。

ParticlePropertyAnimation

interface ParticlePropertyAnimation<T> {
  from: T;
  to: T;
  startMillis: number;
  endMillis: number;
  curve?: Curve | ICurve;
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
fromT是属性起始值。非法输入取对应属性的默认值。
toT是属性目标值。非法输入取对应属性的默认值。
startMillisnumber是动画开始时间。
endMillisnumber是动画结束时间。
curveCurve | ICurve否

设置动画曲线。

默认值：Curve.Linear

ParticleType

enum ParticleType {
  POINT = 'point',
  IMAGE = 'image',
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
POINT点状粒子
IMAGE图片粒子

ParticleEmitterShape

enum ParticleEmitterShape {
  RECTANGLE = 'rectangle',
  CIRCLE = 'circle',
  ELLIPSE = 'ellipse',
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
RECTANGLE粒子发射器为矩形
CIRCLE粒子发射器为圆形
ELLIPSE粒子发射器为椭圆形

DistributionType12+

enum DistributionType {
  UNIFORM = 0,
  GAUSSIAN = 1,
}

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
UNIFORM初始颜色随机值分布为均匀分布。
GAUSSIAN初始颜色随机值分布为高斯分布。

ParticleUpdater

enum ParticleUpdater {
  NONE = 'none',
  RANDOM = 'random',
  CURVE = 'curve',
}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
NONE无变化
RANDOM随机变化
CURVE动画曲线变化

DisturbanceFieldOptions12+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
strengthnumber否场强，表示场从中心向外的排斥力的强度，默认值0。正数表示排斥力方向朝外，负数表示吸引力，方向朝内。
shapeDisturbanceFieldShape否

场的形状。

默认为DisturbanceFieldShape.RECT。

sizeSizeT<number>否

场的大小。

默认值 {width:0，height:0}。

positionPositionT<number>否

场的位置。

默认值{x:0，y:0}。

feathernumber否

羽化值，表示场从中心点到场边缘的衰减程度，取值范围0到100的整数，如果0则表示场是一个刚体，所有范围内的粒子都被排斥在外。羽化值越大场的缓和程度越大，场范围内出现越多靠近中心点的粒子。

默认值为0。

noiseScalenumber否

噪声尺度，用于控制噪声图案的整体大小，取值大于等于0。

默认值1。

noiseFrequencynumber否

噪声频率，频率越大噪声越细腻，取值大于等于0。

默认值1。

noiseAmplitudenumber否

噪声震幅，噪声的波动的范围，震幅越大噪音之间差异越大。取值大于等于0。

默认值1。

DisturbanceFieldShape12+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
RECT长方形。
CIRCLE圆。
ELLIPSE椭圆。

EmitterProperty12+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
indexnumber是索引，取整，按初始化参数中发射器的数组索引指定对应的发射器。异常默认值为0。
emitRatenumber否

发射器发射速率，即每秒发射粒子的数量。

未传入时保持其当前的发射速率， 传入值小于0时取默认值5。emitRate值超过5000时会极大影响性能，建议设置参数小于5000。

positionPositionT<number>否

发射器位置的数组，只支持number类型。

未传入时保持其当前的发射器位置。需传入两个有效参数，若其中一个为异常值，则position不生效。

sizeSizeT<number>否

发射窗口的大小，只支持number类型。

未传入时保持其当前发射窗口大小。需传入两个有效参数且都大于0，若其中一个为异常值，则size不生效。

示例

示例1（圆形初始化粒子）

描述粒子动画基础用法，通过圆形初始化粒子。

// xxx.ets
@Entry
@Component
struct ParticleExample {
  build() {
    Stack() {
      Text()
        .width(300).height(300).backgroundColor(Color.Black)
      Particle({
        particles: [
          {
            emitter: {
              particle: {
                type: ParticleType.POINT, //粒子类型
                config: {
                  radius: 10//圆点半径
                },
                count: 500, //粒子总数
                lifetime: 10000, //粒子生命周期，单位ms
                lifetimeRange: 100//粒子生命周期取值范围，单位ms
              },
              emitRate: 10, //每秒发射粒子数
              position: [0, 0],
              shape: ParticleEmitterShape.RECTANGLE//发射器形状
            },
            color: {
              range: [Color.Red, Color.Yellow], //初始颜色范围
              updater: {
                type: ParticleUpdater.CURVE, //变化方式为曲线变化
                config: [
                  {
                    from: Color.White, //变化起始值
                    to: Color.Pink, //变化终点值
                    startMillis: 0, //开始时间
                    endMillis: 3000, //结束时间
                    curve: Curve.EaseIn//变化曲线
                  },
                  {
                    from: Color.Pink,
                    to: Color.Orange,
                    startMillis: 3000,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: Color.Orange,
                    to: Color.Pink,
                    startMillis: 5000,
                    endMillis: 8000,
                    curve: Curve.EaseIn
                  },
                ]
              }
            },
            opacity: {
              range: [0.0, 1.0], //粒子透明度的初始值从【0.0到1.0】随机产生
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0.0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 3000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: 1.0,
                    to: 0.0,
                    startMillis: 5000,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            scale: {
              range: [0.0, 0.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0.0,
                    to: 0.5,
                    startMillis: 0,
                    endMillis: 3000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            acceleration: {
              //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
              speed: {
                range: [3, 9],
                updater: {
                  type: ParticleUpdater.RANDOM, //Speed的变化方式是随机变化
                  config: [1, 20]
                }
              },
              angle: {
                range: [90, 90]
              }
            }

          }
        ]
      }).width(300).height(300)
    }.width("100%").height("100%").align(Alignment.Center)
  }
}

示例2（图片初始化粒子）

描述粒子动画基础用法，通过图片初始化粒子。

@Entry
@Component
struct ParticleExample {
  @State
  myCount: number = 100
  flag: boolean = false;

  build() {
    Column() {
      Stack() {
        Particle({
          particles: [
            {
              emitter: {
                particle: {
                  type: ParticleType.IMAGE,
                  config: {
                    src: $r("app.media.book"),
                    size: [10, 10]
                  },
                  count: this.myCount,
                  lifetime: 10000,
                  lifetimeRange: 100
                },
                emitRate: 3,
                shape: ParticleEmitterShape.CIRCLE
              },
              color: {
                range: [Color.White, Color.White]
              },
              opacity: {
                range: [1.0, 1.0],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [
                    {
                      from: 0,
                      to: 1.0,
                      startMillis: 0,
                      endMillis: 6000
                    },
                    {
                      from: 1.0,
                      to: .0,
                      startMillis: 6000,
                      endMillis: 10000
                    }
                  ]
                }
              },
              scale: {
                range: [0.1, 1.0],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [
                    {
                      from: 0,
                      to: 1.5,
                      startMillis: 0,
                      endMillis: 8000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              },
              acceleration: {
                speed: {
                  range: [3, 9],
                  updater: {
                    type: ParticleUpdater.CURVE,
                    config: [
                      {
                        from: 10,
                        to: 20,
                        startMillis: 0,
                        endMillis: 3000,
                        curve: Curve.EaseIn
                      },
                      {
                        from: 10,
                        to: 2,
                        startMillis: 3000,
                        endMillis: 8000,
                        curve: Curve.EaseIn
                      }
                    ]
                  }
                },
                angle: {
                  range: [0, 180],
                  updater: {
                    type: ParticleUpdater.CURVE,
                    config: [{
                      from: 1,
                      to: 2,
                      startMillis: 0,
                      endMillis: 1000,
                      curve: Curve.EaseIn
                    },
                      {
                        from: 50,
                        to: -50,
                        startMillis: 1000,
                        endMillis: 3000,
                        curve: Curve.EaseIn
                      },
                      {
                        from: 3,
                        to: 5,
                        startMillis: 3000,
                        endMillis: 8000,
                        curve: Curve.EaseIn
                      }
                    ]
                  }
                }
              },
              spin: {
                range: [0.1, 1.0],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [
                    {
                      from: 0,
                      to: 360,
                      startMillis: 0,
                      endMillis: 8000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              },
            }
            , {
            emitter: {
              particle: {
                type: ParticleType.IMAGE,
                config: {
                  src: $r('app.media.heart'),
                  size: [10, 10]
                },
                count: this.myCount,
                lifetime: 10000,
                lifetimeRange: 100
              },
              emitRate: 3,
              shape: ParticleEmitterShape.CIRCLE
            },
            color: {
              range: [Color.White, Color.White]
            },
            opacity: {
              range: [1.0, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 6000
                  },
                  {
                    from: 1.0,
                    to: .0,
                    startMillis: 6000,
                    endMillis: 10000
                  }
                ]
              }
            },
            scale: {
              range: [0.1, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 2.0,
                    startMillis: 0,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            acceleration: {
              speed: {
                range: [3, 9],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [
                    {
                      from: 10,
                      to: 20,
                      startMillis: 0,
                      endMillis: 3000,
                      curve: Curve.EaseIn
                    },
                    {
                      from: 10,
                      to: 2,
                      startMillis: 3000,
                      endMillis: 8000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              },
              angle: {
                range: [0, 180],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [{
                    from: 1,
                    to: 2,
                    startMillis: 0,
                    endMillis: 1000,
                    curve: Curve.EaseIn
                  },
                    {
                      from: 50,
                      to: -50,
                      startMillis: 0,
                      endMillis: 3000,
                      curve: Curve.EaseIn
                    },
                    {
                      from: 3,
                      to: 5,
                      startMillis: 3000,
                      endMillis: 10000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              }
            },
            spin: {
              range: [0.1, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 360,
                    startMillis: 0,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
          }, {
            emitter: {
              particle: {
                type: ParticleType.IMAGE,
                config: {
                  src: $r('app.media.sun'),
                  size: [10, 10]
                },
                count: this.myCount,
                lifetime: 10000,
                lifetimeRange: 100
              },
              emitRate: 3,
              shape: ParticleEmitterShape.CIRCLE
            },
            color: {
              range: [Color.White, Color.White]
            },
            opacity: {
              range: [1.0, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 6000
                  },
                  {
                    from: 1.0,
                    to: .0,
                    startMillis: 6000,
                    endMillis: 10000
                  }
                ]
              }
            },
            scale: {
              range: [0.1, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 2.0,
                    startMillis: 0,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            acceleration: {
              speed: {
                range: [3, 9],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [
                    {
                      from: 10,
                      to: 20,
                      startMillis: 0,
                      endMillis: 3000,
                      curve: Curve.EaseIn
                    },
                    {
                      from: 10,
                      to: 2,
                      startMillis: 3000,
                      endMillis: 8000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              },
              angle: {
                range: [0, 180],
                updater: {
                  type: ParticleUpdater.CURVE,
                  config: [{
                    from: 1,
                    to: 2,
                    startMillis: 0,
                    endMillis: 1000,
                    curve: Curve.EaseIn
                  },
                    {
                      from: 50,
                      to: -50,
                      startMillis: 1000,
                      endMillis: 3000,
                      curve: Curve.EaseIn
                    },
                    {
                      from: 3,
                      to: 5,
                      startMillis: 3000,
                      endMillis: 8000,
                      curve: Curve.EaseIn
                    }
                  ]
                }
              }
            },
            spin: {
              range: [0.1, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 360,
                    startMillis: 0,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
          }
          ]
        }).width(300).height(300)

      }.width(500).height(500).align(Alignment.Center)
    }.width("100%").height("100%")

  }
}

示例3（粒子扰动场的干扰下运动轨迹发生变化）

该示例主要演示如何通过粒子扰动场的干扰下来实现运动轨迹发生变化的效果。

@Entry
@Component
struct ParticleExample {
  build() {
    Stack() {
      Text()
        .width(300).height(300).backgroundColor(Color.Black)
      Particle({
        particles: [
          {
            emitter: {
              particle: {
                type: ParticleType.POINT, //粒子类型
                config: {
                  radius: 10//圆点半径
                },
                count: 500, //粒子总数
                lifetime: 10000//粒子生命周期，单位ms
              },
              emitRate: 10, //每秒发射粒子数
              position: [0, 0],
              shape: ParticleEmitterShape.RECTANGLE//发射器形状
            },
            color: {
              range: [Color.Red, Color.Yellow], //初始颜色范围
              updater: {
                type: ParticleUpdater.CURVE, //变化方式为曲线变化
                config: [
                  {
                    from: Color.White, //变化起始值
                    to: Color.Pink, //变化终点值
                    startMillis: 0, //开始时间
                    endMillis: 3000, //结束时间
                    curve: Curve.EaseIn//变化曲线
                  },
                  {
                    from: Color.Pink,
                    to: Color.Orange,
                    startMillis: 3000,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: Color.Orange,
                    to: Color.Pink,
                    startMillis: 5000,
                    endMillis: 8000,
                    curve: Curve.EaseIn
                  },
                ]
              }
            },
            opacity: {
              range: [0.0, 1.0], //粒子透明度的初始值从[0.0,1.0]随机产生
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0.0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 3000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: 1.0,
                    to: 0.0,
                    startMillis: 5000,
                    endMillis: 10000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            scale: {
              range: [0.0, 0.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0.0,
                    to: 0.5,
                    startMillis: 0,
                    endMillis: 3000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            acceleration: {
              //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
              speed: {
                range: [3, 9],
                updater: {
                  type: ParticleUpdater.RANDOM,
                  config: [1, 20]
                }
              },
              angle: {
                range: [90, 90]
              }
            }

          }
        ]
      }).width(300).height(300).disturbanceFields([{
        strength: 10,
        shape: DisturbanceFieldShape.RECT,
        size: { width: 100, height: 100 },
        position: { x: 100, y: 100 },
        feather: 15,
        noiseScale: 10,
        noiseFrequency: 15,
        noiseAmplitude: 5
      }])
    }.width("100%").height("100%").align(Alignment.Center)
  }
}

示例4（调整粒子发射器位置）

通过emitter()调整粒子发射器的位置。

@Entry
@Component
struct ParticleExample {
  @State emitterProperties: Array<EmitterProperty> = [
    {
      index: 0,
      emitRate: 100,
      position: { x: 60, y: 80 },
      size: { width: 200, height: 200 }
    }
  ]

  build() {
    Stack() {
      Text()
        .width(300).height(300).backgroundColor(Color.Black)
      Particle({
        particles: [
          {
            emitter: {
              particle: {
                type: ParticleType.POINT, // 粒子类型
                config: {
                  radius: 5// 圆点半径
                },
                count: 400, // 粒子总数
                lifetime: -1// 粒子的生命周期，-1表示粒子生命周期无限大
              },
              emitRate: 10, // 每秒发射粒子数
              position: [0, 0], // 粒子发射位置
              shape: ParticleEmitterShape.CIRCLE// 发射器形状
            },
            color: {
              range: [Color.Red, Color.Yellow], // 初始颜色范围
              updater: {
                type: ParticleUpdater.CURVE, // 变化方式为曲线变化
                config: [
                  {
                    from: Color.White,
                    to: Color.Pink,
                    startMillis: 0,
                    endMillis: 3000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: Color.Pink,
                    to: Color.Orange,
                    startMillis: 3000,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: Color.Orange,
                    to: Color.Pink,
                    startMillis: 5000,
                    endMillis: 8000,
                    curve: Curve.EaseIn
                  },
                ]
              }
            },
          },
        ]
      })
        .width(300)
        .height(300)
        .emitter(this.emitterProperties)
    }.width("100%").height("100%").align(Alignment.Center)
  }
}

HarmonyOS开发：粒子动画使用详解
全沾软贱开发攻城狮
05-06 11万+
在现在数字化时代，用户界面的视觉效果对于吸引用户和提升用户体验至关重要，而且动画效果作为一种强大的视觉工具，能够为应用带来生动、活泼的交互体验。HarmonyOS作为面向万物互联的操作系统，不仅提供了强大的系统性能和高效的开发框架，还为开发者提供了丰富的动画功能，其中粒子动画技术尤为引人注目。粒子动画是一种通过大量小元素（粒子）的运动和变化来创建复杂视觉效果的技术，它可以用于实现各种动态效果，为应用界面增添灵动性和趣味性。
鸿蒙跨平台框架来了ArkUI-X
weixin_45821276的博客
02-29 4098
众所周知，鸿蒙应用可以跨设备的运行，例如用鸿蒙开发的应用可以运行在手机，平台，穿戴等等IOT设 备，但是如果我想让开发的鸿蒙应用运行在Android手机上是否可行？
鸿蒙OpenHarmony【粒子动画 (Particle)】动画
hhhhhh2323的博客
11-20 406
animateToImmediately接口用来提供[显式动画]立即下发功能。同时加载多个属性动画的情况下，使用该接口可以立即执行闭包代码中状态变化导致的过渡动效。
鸿蒙开发—UI框架概述
m0_62167422的博客
12-06 2224
HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。以下是两种开发范式的简单对比。应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型
【鸿蒙开发】—— UI开发框架 (HML语法)
2401_88547687的博客
11-07 1209
HML是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。
鸿蒙开发之UI框架
积跬步，至千里。
01-25 6405
鸿蒙开发之UI框架中的常用布局与常用组件介绍，以及布局与组件的基本使用。
鸿蒙5.0版开发：ArkTS组件-粒子动画 (Particle)
最新发布
m0_69424697的博客
11-28 768
粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。
鸿蒙Harmony应用开发—ArkTS-粒子动画
m0_64420071的博客
03-21 1660
粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。
鸿蒙HarmonyOS （开发进阶）通过Particle组件实现粒子动画
m0_67143533的博客
10-25 650
​ 粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子，这些粒子可以是圆点、图片。开发者可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感，比如下雪的动效，雪花飘舞就相当于一个个雪花粒子在做动画。 ​
html5-webgl-particle-animation:html5-webgl-particle-animation
03-20
HTML5和WebGL粒子动画是现代网页开发中的一个重要技术领域，尤其在创建动态、交互式和视觉震撼的用户界面时。这个项目“html5-webgl-particle-animation”显然是一个使用JavaScript实现的粒子动画示例。JavaScript是...
渲染引擎分析 - 鸿蒙(OpenHarmony) JS UI 源码阅读笔记
qq_32198115的博客
09-07 6457
作者：门柳 鸿蒙是华为研发的新一代终端操作系统，能适用于 IoT、手表、手机、Pad、电视等各种类型的设备上，扛起“国产操作系统”的大旗，也遭受了很多非议。2021 年 6 月初发布了 OpenHarmony 2.0 Canary 版本，开源了更多子系统的代码，支持内存 128MB 以上的设备。其中就包含了新版本的 JS UI 框架，本文重点分析这部分代码。（文章内容仅供参考，如有任何描述不准确的内容，感谢大家后台留言探讨与指正~） 鸿蒙系统概述 系统架构分层 建议去 OpenHarmony...
canvas 中普通动效与粒子动效的实现
前端大全
01-06 1415
（给前端大全加星标，提升前端技能）作者：薄荷前端https://github.com/BooheeFE/weekly/issues/26canvas 用于在网页上绘制图像...
鸿蒙开源第三方组件——粒子破碎效果组件Azexplosion_ohos
VincenZsw的博客
07-19 519
前言 基于安卓平台的粒子破碎效果组件Azexplosion（https://github.com/Xieyupeng520/AZExplosion）， 实现了鸿蒙的功能化迁移和重构。代码已经开源到（https://gitee.com/isrc_ohos/azexplosion_ohos），欢迎各位开发者下载使用并提出宝贵意见！ 背景 Azexplosion_ohos是一个实现粒子破碎动画效果的组件，用户可以通过点击手机屏幕上的破碎对象（一般是指手机屏幕上显示的图片...
HarmonyOS Next开发学习手册——焦点事件
maniuT的博客
07-05 1661
由组件自定义的走焦算法，规格由组件定义。
HarmonyOS Next开发学习手册——粒子动画
maniuT的博客
07-04 1914
粒子动画 是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子，这些粒子可以是圆点、图片。开发者可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感，比如下雪的动效，雪花飘舞就相当于一个个雪花粒子在做动画。粒子动画的效果通过Particle组件展现。基本示例代码和效果如下。
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2919
粒子动效 旋转 弹动
HarmonyOS实战开发：Tabs（组件导航）
2401_84194030的博客
05-10 2233
当页面信息较多时，为了让用户能够聚焦于当前显示的内容......
背景粒子动效
yf18040578780的博客
05-11 267
背景粒子动效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值