输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架UI界面如何实现球形粒子动画效果

如何实现球形粒子动画效果

更新时间: 2026-06-26 09:07
本文导读

问题现象

如何实现一个球形粒子动画的效果？

效果预览

背景知识

粒子动画是一种通过在一定范围内随机生成的大量粒子的运动来组成的动画效果。在HarmonyOS中，这种动画效果主要通过Particle组件来实现。

解决方案

  1. 通过Stack布局函数构建了一个包含粒子特效的界面。
  2. 创建了一个Particle粒子系统，配置了粒子的各种属性，例如粒子的发射率、生命周期、颜色、透明度、缩放、加速度等。
  3. 设置了一个扰动场（Disturbance Fields），用于影响粒子的行为。
  4. 监听视图区域的变化，并根据新的视图尺寸调整扰动场的大小和位置。

完整示例参考如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct CircleDemo {
  4.   @State viewWidth: number = 0;
  5.   @State viewHeight: number = 0;
  6. 

  7.   build() {
  8.     Stack() {
  9.       Particle({
  10.         particles: [
  11.           {
  12.             emitter: {
  13.               particle: {
  14.                 type: ParticleType.POINT, // 粒子类型
  15.                 config: {
  16.                   radius: 1 // 圆点半径
  17.                 },
  18.                 count: -1, // 粒子总数
  19.                 lifetime: 5000, // 粒子生命周期，单位ms
  20.                 lifetimeRange: 100 // 粒子生命周期取值范围，单位ms
  21.               },
  22.               emitRate: 200, // 每秒发射粒子数
  23.               position: [0, 0],
  24.               shape: ParticleEmitterShape.CIRCLE // 发射器形状
  25.             },
  26.             color: {
  27.               range: [Color.White, Color.White] // 初始颜色范围
  28.             },
  29.             opacity: {
  30.               range: [0.0, 1.0], // 粒子透明度的初始值从【0.0到1.0】随机产生
  31.               updater: {
  32.                 type: ParticleUpdater.CURVE, // 透明度的变化方式是随机变化
  33.                 config: [
  34.                   {
  35.                     from: 0.0,
  36.                     to: 1.0,
  37.                     startMillis: 0,
  38.                     endMillis: 2500,
  39.                     curve: Curve.EaseIn
  40.                   },
  41.                   {
  42.                     from: 1.0,
  43.                     to: 0.0,
  44.                     startMillis: 2500,
  45.                     endMillis: 5000,
  46.                     curve: Curve.EaseIn
  47.                   }
  48.                 ]
  49.               }
  50.             },
  51.             scale: {
  52.               range: [0.0, 0.0],
  53.               updater: {
  54.                 type: ParticleUpdater.CURVE,
  55.                 config: [
  56.                   {
  57.                     from: 0.0,
  58.                     to: 1.0,
  59.                     startMillis: 0,
  60.                     endMillis: 1000,
  61.                     curve: Curve.EaseIn
  62.                   },
  63.                   {
  64.                     from: 1.0,
  65.                     to: 0,
  66.                     startMillis: 1000,
  67.                     endMillis: 5000,
  68.                     curve: Curve.EaseIn
  69.                   }
  70.                 ]
  71.               }
  72.             },
  73.             acceleration: {
  74.               // 加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
  75.               speed: {
  76.                 range: [3, 9],
  77.                 updater: {
  78.                   type: ParticleUpdater.RANDOM,
  79.                   config: [1, 20]
  80.                 }
  81.               },
  82.               angle: {
  83.                 range: [0, 360]
  84.               }
  85.             },
  86.             spin: {
  87.               range: [0, 1.0],
  88.               updater: {
  89.                 type: ParticleUpdater.CURVE,
  90.                 config: [
  91.                   {
  92.                     from: 0,
  93.                     to: 180,
  94.                     startMillis: 0,
  95.                     endMillis: 5000,
  96.                     curve: Curve.EaseIn
  97.                   }
  98.                 ]
  99.               }
  100.             },
  101.             velocity: {
  102.               speed: [20, 30],
  103.               angle: [0.0, 1.0]
  104.             }
  105.           }
  106.         ]
  107.       })
  108.         .width('100%')
  109.         .height('100%')
  110.         .backgroundColor(Color.Black)
  111.         .disturbanceFields([{
  112.           strength: 80, // 场强，表示场从中心向外的排斥力的强度，默认值0。正数表示排斥力方向朝外，负数表示吸引力，方向朝内
  113.           shape: DisturbanceFieldShape.CIRCLE, // 场的形状
  114.           size: { width: this.viewWidth, height: this.viewHeight }, // 场的大小
  115.           position: { x: this.viewWidth / 2, y: this.viewHeight / 2 } // 场的位置
  116.         }])
  117.         .onAreaChange((oldValue: Area, newValue: Area) => {
  118.           // 监听视图区域的变化，并根据新的视图尺寸调整扰动场的大小和位置
  119.           this.viewWidth = newValue.width as number;
  120.           this.viewHeight = newValue.height as number;
  121.         });
  122.     }
  123.   }
  124. }

总结

Particle组件通过配置多个粒子属性来实现了一个动态的、具有视觉吸引力的粒子动画效果。

自定义实现图标拖动效果
三维旋转loading动效
相关推荐
文档粒子动画
文档粒子动画 (Particle)
文档粒子动画的常见应用场景
文档如何实现图片平滑切换动画效果
文档实现红包雨效果
文档使用属性动画和颜色渐变实现动态渐变色背景
文档组件旋转动效实现
文档球状标签动画
文档旋转动画<RotationAnimation>
文档优化动画性能
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词