鸿蒙动画开发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.mzph.cn/news/886660.shtml

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

相关文章

Java 使用MyBatis-Plus数据操作关键字冲突报错You have an error in your SQL syntax问题

问题 这个报错是出现在Java Spring boot项目中&#xff0c;使用MyBatis-Plus通过创建的实体类对数据库的操作过程中&#xff0c;通过实体创建数据库表是没有问题的&#xff0c;而在接口调用服务类操作数据库的时候&#xff0c;会出现报错。报错详情如下&#xff1a; 服务请求异…

<项目代码>YOLOv8 草莓成熟识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

Django5 2024全栈开发指南(一):框架简介、环境搭建与项目结构

目录 一、Python Web框架要点二、Django流程2.1 Django介绍2.1.1 简介2.1.2 特点2.1.3 MVT模式2.1.4 Django新特性2.1.5 Django学习资料 2.2 搭建Django框架开发环境2.2.1 安装Python语言环境2.2.2 安装Django框架 2.3 创建Django项目2.4 Pycharm创建项目2.5 初试Django52.5.1 …

Flutter:Dio下载文件到本地

import dart:io; import package:dio/dio.dart;main(){// 创建dio对象final dio Dio();// 下载地址var url https://*******.org/files/1.0.0.apk;// 手机端路径String savePath Directory.systemTemp.path/ceshi.apk;print(savePath);downLoad(dio,url,savePath); }downLo…

Golang | Leetcode Golang题解之第564题寻找最近的回文数

题目&#xff1a; 题解&#xff1a; func nearestPalindromic(n string) string {m : len(n)candidates : []int{int(math.Pow10(m-1)) - 1, int(math.Pow10(m)) 1}selfPrefix, _ : strconv.Atoi(n[:(m1)/2])for _, x : range []int{selfPrefix - 1, selfPrefix, selfPrefix …

鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)

元服务是什么&#xff1f;和App的关系&#xff1f; 元服务是是一种HarmonyOS轻量应用形态&#xff0c;用户无需安装即可使用&#xff0c;具备随处可及、服务直达、自由流转的特征。 元服务是可以独立部署和运行的程序实体&#xff0c;独立于应用&#xff0c;不依赖应用可独立…

Exadata: 将数据库硬件和软件设计在一起

Engineering Database Hardware and Software Together&#xff0c;是Juan Loaiza在2015 VLDB大会上的Keynotes。虽然是10年前的文章&#xff0c;但其中一些要点一直延续至今&#xff0c;并未改变。 本文将讲解Keynotes摘要和演讲中的要点。 摘要 其中的一些观点&#xff1a…

Windows配置域名映射IP

一、找到 hosts 文件 打开 C:\Windows\System32\drivers\etc 二、添加hosts文件修改、写入权限 右击hosts文件&#xff0c;点击属性 -> 安全 -> Users -> 编辑 -> Users -> 添加修改、写入权限 -> 确定 -> 确定 进入常规&#xff0c;将只读属性关闭 三、…

173. 二叉搜索树迭代器【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 173. 二叉搜索树迭代器 一、题目描述 实现一个二叉搜索树迭代器类BSTIterator &#xff0c;表示一个按中序遍历二叉搜索树&#xff08;BST&#xff09;的迭代器&#xff1a; BSTIterato…

XXL JOB DockerCompose部署

官网给的方式是 Docker 命令启动&#xff0c;但是用起来太麻烦了&#xff0c;所以用DockerCompose 简化部署 创建数据库&#xff0c;导入 SQL SQL 脚本位置为/xxl-job/doc/db/tables_xxl_job.sql https://raw.githubusercontent.com/xuxueli/xxl-job/refs/heads/master/doc/…

【原创】如何备份和还原Ubuntu系统,非常详细!!

前言 我在虚拟机装了一个xfce4的Ubuntu桌面版&#xff0c;外加输入法、IDEA等&#xff0c;我想将这个虚拟机里的系统直接搬到物理机中&#xff0c;那我可以省的再重新装一遍、配置xfce4桌面、修改一堆快捷键还有配置idea了&#xff0c;那直接说干就干。 本教程基于Ubuntu24.0…

YOLO系列番外——数据偏移与分布不均对模型的影响分析与炫酷的动态分布图代码分享

背景 在深度学习的应用中&#xff0c;数据质量对模型的性能至关重要。随着智能化应用场景的扩展&#xff0c;数据的复杂性不断增加&#xff0c;如何处理数据偏移&#xff08;Data Shift&#xff09;和数据分布不均&#xff08;Data Imbalance&#xff09;成为了模型训练和部署过…

Shell脚本6 -- 条件判断if

声明&#xff1a; 本文的学习内容来源于B站up主“泷羽sec”视频【shell编程&#xff08;4&#xff09;脚本与用户交互以及if条件判断】的公开分享&#xff0c;所有内容仅限于网络安全技术的交流学习&#xff0c;不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题&#xff0c…

ks 小程序sig3

前言 搞了app版的快手之后 &#xff08;被风控麻了&#xff09; 于是试下vx小程序版的 抓包调试 小程序抓包问题 网上很多教程&#xff0c; github也有开源的工具代码 自行搜索 因为我们需要调试代码&#xff0c;所以就用了下开源的工具 &#xff08;可以用chrome的F12功能&a…

hive 统计各项目下排名前5的问题种类

实现指定某项目下的数据效果图如下所示&#xff1a; 其中 ABCDE 为前5名的问题种类&#xff0c;其中A问题有124个&#xff08;出现了124次&#xff09; 数据说明&#xff1a; 整个数据集 包含很多项目一个项目 包含很多问题一个问题 选项 可认为是 类别值&#xff0c;所有出…

如何解决将长视频转换为易于处理的 Spacetime Patch 的问题?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 将长视频转换为易于处理的 Spacetime Patch&#xff08;时空补丁&#xff09;是一项挑战&#xff0c;尤其是当视频内容复杂或包含长时间连续场景时。在计算机视觉和视频分析等领域&#xff0c;Spacetim…

[ACTF2020]Upload 1--详细解析

信息收集 题目告诉我们是一道upload&#xff0c;也就是文件上传漏洞题目。 进入界面&#xff0c;是一个灯泡&#xff0c;将鼠标放在图标上就会出现文件上传的相应位置&#xff1a; 思路 文件上传漏洞&#xff0c;先看看有没有前端校验。 在js源码中找到了前端校验&#xff…

机器学习基础06

目录 1.梯度下降 1.1梯度下降概念 1.2梯度下降公式 1.3学习率 1.4实现梯度下降 1.5API 1.5.1随机梯度下降SGD 1.5.2小批量梯度下降MBGD 1.6梯度下降优化 2.欠拟合过拟合 2.1欠拟合 2.2过拟合 2.3正则化 2.3.1L1正则项&#xff08;曼哈顿距离&#xff09; 2.3.2…

可认证数据资产合约标准协议(CMIDA-1)意见征集

标准背景 数据资产具备多维度的属性&#xff0c;涵盖行业特性、状态信息、资产类型、存储格式等。数据资产在不同流通主体之间可理解、可流通、可追溯、可信任的重要前提之一是存在统一的标准&#xff0c;缺失统一的标准&#xff0c;数据混乱冲突、一数多源、多样多类等问题将…

为什么 Vue3 封装 Table 组件丢失 expose 方法呢?

在实际开发中&#xff0c;我们通常会将某些常见组件进行二次封装&#xff0c;以便更好地实现特定的业务需求。然而&#xff0c;在封装 Table 组件时&#xff0c;遇到一个问题&#xff1a;Table 内部暴露的方法&#xff0c;在封装之后的组件获取不到。 代码展示为&#xff1a; …