鸿蒙动画开发07——粒子动画

 

1、概 述

粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。

动画元素是一个个粒子,这些粒子可以是圆点、图片。我们可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画,来营造一种氛围感,比如下雪的动效,雪花飘舞就相当于一个个雪花粒子在做动画。

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

一个简单的粒子动画实例如下:

 

c6324eaed5ff085789aa3775df66e2fb.gif

代码如下:

@Entry@Componentstruct ParticleExample {  build() {    Stack() {      Text()        .width(300).height(300).backgroundColor(Color.Black)      Particle({ particles: [        {          emitter: {            particle: {              type: ParticleType.POINT, //粒子类型              config: {                radius: 5 //圆点半径              },              count: 100, //粒子总数            },          },        },      ]      }).width(250).height(250)    }.width("100%").height("100%").align(Alignment.Center)  }}

2、粒子发射器

粒子发射器(Particle Emitter)是粒子动画中用于生成和控制粒子的组件,主要用于定义粒子的初始属性(如类型、位置、颜色),控制粒子生成的速率,以及管理粒子的生命周期。

支持发射器位置动态更新。通过 emitter 方法调整粒子发射器的位置,发射速率和发射窗口的大小。

示例代码如下:

// ...@State emitterProperties: Array<EmitterProperty> = [  {    index: 0,    emitRate: 100,    position: { x: 60, y: 80 },    size: { width: 200, height: 200 }  }]
Particle(...).width(300).height(300).emitter(this.emitterProperties) // 动态调整粒子发射器的位置// ...

效果如下:

 

012fecd2b65c41c5b8efd1ad14519d1d.gif

3、控制粒子颜色

通过 DistributionType 设置粒子初始颜色随机值分布。可以设置为均匀分布或者高斯(正态)分布。实例代码如下:​​​​​​

// ...color: {  range: [Color.White, Color.Yellow], // 初始颜色范围  distributionType: DistributionType.GAUSSIAN // 初始颜色随机值分布},// ...

效果如下:

 

2bd5bc6fa1927fe791f3b4370969ead5.gif

4、粒子生命周期

粒子的生命周期(Lifecycle)是粒子从生成到消亡的过程,用于指定粒子的生存时长。

通过lifetime和lifetimeRange设置粒子生命周期。​​​​​​​

// ...emitter: {  particle: {    // ...    lifetime: 300, //粒子生命周期,单位ms    lifetimeRange: 100 //粒子生命周期取值范围,单位ms  },  emitRate: 10, //每秒发射粒子数  position: [0, 0],  shape: ParticleEmitterShape.RECTANGLE //发射器形状},color: {  range: [Color.White, Color.Yellow], // 初始颜色范围},// ...

5、添加扰动场

扰动场(Disturbance Field)是用来影响粒子运动的一种机制。扰动场通过在粒子所在空间区域中施加特定的力,来改变粒子的轨迹和行为,从而实现更复杂和自然的动画效果。

扰动场可以通过 disturbanceFields 方法进行配置。代码如下:​​​​​​​

// ...Particle({ particles: [  {    emitter: // ...    color: // ...    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}])// ...

效果如下:

 

27cd334513b8ae710d343ec924a58218.gif

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/474136.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java——并发工具类库线程安全问题

摘要 本文探讨了Java并发工具类库中的线程安全问题&#xff0c;特别是ThreadLocal导致的用户信息错乱异常场景。文章通过一个Spring Boot Web应用程序示例&#xff0c;展示了在Tomcat线程池环境下&#xff0c;ThreadLocal如何因线程重用而导致异常&#xff0c;并讨论了其他并发…

PostgreSQL技术内幕18:物理备份工具pg_basebackup

0.简介 PG自带备份工具有多种&#xff0c;pg_basebackup、pg_dump、pg_dumpall&#xff0c;其中pg_basebackup是文件系统级别的备份&#xff0c;其余两种是逻辑备份。本文主要介绍PG备份工具产生的背景和概念&#xff0c;以及对pg_basebackup使用方法和其实现原理进行详细说明…

基于Python实现的HDR图像处理算法

此代码会读取两张图片&#xff0c;一张用于保留高光细节&#xff0c;另一张用于保留暗部细节。两张图片按指定比例进行像素融合&#xff0c;最终生成一张合成的HDR图片。 import cv2 import numpy as npdef hdr_fusion(highlight_img_path, shadow_img_path, output_path, alp…

计算机网络-理论部分(二):应用层

网络应用体系结构 Client-Server客户-服务器体系结构&#xff1a;如Web&#xff0c;FTP&#xff0c;Telnet等Peer-Peer&#xff1a;点对点P2P结构&#xff0c;如BitTorrent 应用层协议定义了&#xff1a; 交换的报文类型&#xff0c;请求or响应报文类型的语法字段的含义如何…

【JavaEE初阶 — 多线程】wait() notify()

1. 协调多个线程之间的执行先后顺序的方法介绍 由于线程之间是抢占式执行的&#xff0c;因此线程之间执行的先后顺序难以预知&#xff1b;但是实际开发中&#xff0c;有时候我们希望合理地协调多个线程之间的执行先后顺序。 拓展&#xff1a; wait() 和 sleep() 的区别 …

Vscode/Code-server无网环境安装通义灵码

Date: 2024-11-18 参考材料&#xff1a;https://help.aliyun.com/zh/lingma/user-guide/individual-edition-login-tongyi-lingma?spma2c4g.11186623.0.i0 1. 首先在vscode/code-server插件市场中安装通义插件&#xff0c;这步就不细说了。如果服务器没网&#xff0c;会问你要…

Java项目实战II基于Java+Spring Boot+MySQL的共享汽车管理系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在共享经济…

美赛优秀论文阅读--2023C题

文章目录 1.题目说明2.我对于这个题目信息的理解3.优秀论文学习3.1摘要3.2相关的算法模型 4.总结 1.题目说明 今天阅读的这个文章来自于这个2023年的这个美赛的这个C题的论文&#xff1b; 我们的这个题目可以到网上去找&#xff0c;这个还是比较容易找到的&#xff0c;大致就…

ChromeDriver驱动下载地址更新(保持最新最全)

说明&#xff1a; ChromeDriver 是 Selenium WebDriver 用于控制 Chrome 的独立可执行文件。 为了方便下载使用&#xff0c;本文保持ChromeDriver的最新版本更新&#xff0c;并提供115.0.5763.0-133.0.6841.0版本的下载地址&#xff1a; 所有版本和下载地址&#xff1a; &am…

delphi fmx android 离线人脸识别

搜遍全网都没有找到delphi android 能用的 离线人脸识别,无需注册什么开发者 有这方面需求的可以用fsdk 这边用的luxand.FSDK8.0 android下的注册号要自己找下 1,用老猫的工具将android 下的sdk,FSDK.java 编译成FSDK.jar 老猫的工具 2,用上面的工具将FSDK.jar 生成de…

【模块一】kubernetes容器编排进阶实战资源对象之Configmap与Secret简介

kubernetes 资源对象详解及示例 kubernetes 的几个重要概念 资源对象&#xff1a;kubernetes基于声明式API&#xff0c;和资源对象进行交互。 yaml文件&#xff1a;为了方便后期管理&#xff0c;通过使用yaml文件通过API管理资源对象。 yaml必需字段&#xff1a; apiVersio…

游戏引擎学习第14天

视频参考:https://www.bilibili.com/video/BV1iNUeYEEj4/ 1. 为什么关注内存管理&#xff1f; 内存分配是潜在的失败点&#xff1a; 每次进行内存分配&#xff08;malloc、new等&#xff09;时&#xff0c;都可能失败&#xff08;例如内存不足&#xff09;。这种失败会引入不稳…

游戏引擎学习第12天

视频参考:https://www.bilibili.com/video/BV1yom9YnEWY 这节没讲什么东西&#xff0c;主要是改了一下音频的代码 后面有介绍一些alloc 和malloc,VirtualAlloc 的东西 _alloca 函数&#xff08;或 alloca&#xff09;分配的是栈内存&#xff0c;它的特点是&#xff1a; 生命周…

django——创建 Django 项目和 APP

2.创建 Django 项目和 APP 命令&#xff1a; 创建Django项目 django-admin startproject name 创建子应用 python manager.py startapp name 2.1 创建工程 在使用Flask框架时&#xff0c;项目工程目录的组织与创建是需要我们自己手动创建完成的。 在django中&#xff0c;…

OceanBase 分区表详解

1、分区表的定义 在OceanBase数据库中&#xff0c;普通的表数据可以根据预设的规则被分割并存储到不同的数据区块中&#xff0c;同一区块的数据是在一个物理存储上。这样被分区块的表被称为分区表&#xff0c;而其中的每一个独立的数据区块则被称为一个分区。 如下图所示&…

学习大数据DAY61 宽表加工

目录 模型设计 加工宽表 任务调度&#xff1a; 大表 - 把很多数据整合起来 方便后续的明细查询和指标计算 模型设计 设计 建模 设计: excel 文档去编写 建模: 使用建模工具 PowerDesigner Navicat 在线画图工具... 把表结构给绘 制出来 共享\项目课工具\pd 加工宽表 数…

uniapp微信小程序转发跳转指定页面

onShareAppMessage 是微信小程序中的一个重要函数&#xff0c;用于自定义转发内容。当用户点击右上角的菜单按钮&#xff0c;并选择“转发”时&#xff0c;会触发这个函数。开发者可以在这个函数中返回一个对象&#xff0c;用于定义分享卡片的标题、图片、路径等信息。 使用场…

Datawhale组队学习】模型减肥秘籍:模型压缩技术3——模型量化

模型量化的目的是通过将浮点运算转换为定点运算&#xff0c;以减少模型大小、内存和存储需求&#xff0c;同时加快推理速度&#xff0c;降低计算功耗&#xff0c;使得模型在低算力设备上运行更加高效&#xff0c;特别适用于嵌入式设备或移动端场景。 不同数据类型&#xff08;…

arkUI:网格布局(Grid)

arkUI&#xff1a;网格布局&#xff08;Grid&#xff09; 1 主要内容说明2 网格布局的相关内容2.1 基本使用2.1.1 源码1 &#xff08;Grid网格布局&#xff09;2.1.2 源码1运行效果 2.2 设置排列方式2.2.1 核心布局参数2.2.2 网格单元格参数&#xff08;GridItem&#xff09;2.…

Cherno OpenGL(28 ~ 33)

批量渲染-介绍 在这里我们将在一个drawcall打包多个几何体。即 batch geometry。 我们在这里将聚焦于2d渲染&#xff0c;我们如何渲染一堆2d的quads或者说rectangles呢&#xff1f; 一种情况是比如一个2d游戏有很多个tile组成&#xff0c;要去渲染这些tile&#xff1b;另一种…