鸿蒙Harmony应用开发—ArkTS-粒子动画

news/2024/7/20 20:33:45 标签: harmonyos, 华为, 鸿蒙, 鸿蒙系统, ArkTS, android, ios

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

粒子动画的效果通过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>;
}
参数名类型必填描述
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轴，正数表示顺时针方向旋转角度。
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;
  };
  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，取默认值。
emitRatenumber否发射器发射速率（即每秒发射粒子数）。 默认值：5。
shapeParticleEmitterShape否发射器形状。默认值：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;
}
参数名称类型必填描述
radiusVP是粒子半径。

ImageParticleParameters

interface ImageParticleParameters {
  src: ResourceStr;
  size: [Dimension, Dimension];
  objectFit?: ImageFit;
}
参数名称类型必填描述
srcResourceStr是图片路径。暂不支持svg、gif图片类型。
size[Dimension, Dimension]是图像尺寸。
objectFitImageFit否图片显示模式。

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;
}
参数名类型必填描述
fromT是属性起始值。非法输入取对应属性的默认值。
toT是属性目标值。非法输入取对应属性的默认值。
startMillisnumber是动画开始时间。
endMillisnumber是动画结束时间。
curveCurve | 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多媒体技术

  • 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学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 


http://www.niftyadmin.cn/n/5444335.html

相关文章

【Java】Redis存储和获取泛型

【Java】Redis存储和获取泛型

需求&#xff1a;在实际开发过程中&#xff0c;Redis需要存储不同类型的值&#xff0c;创建一个泛型工具类&#xff0c;用于包装 RedisTemplate&#xff0c;使其支持泛型进行存储和获取&#xff0c;下面就写一个栗子进行演示。 RedisUtils: import org.springframework.beans…
阅读更多...
美摄科技剪同款SDK解决方案全面升级

美摄科技剪同款SDK解决方案全面升级

视频内容已成为企业宣传、品牌塑造和市场营销的重要载体。然而&#xff0c;如何快速、高效地制作出高质量的视频内容&#xff0c;成为摆在众多企业面前的一大难题。针对这一挑战&#xff0c;美摄科技凭借深厚的技术积累和创新能力&#xff0c;推出了全新的剪同款SDK解决方案&am…
阅读更多...
物联网如何推动工业自动化的发展和变革

物联网如何推动工业自动化的发展和变革

物联网&#xff08;IoT&#xff09;技术在推动工业自动化的发展和变革方面扮演着至关重要的角色。以下是物联网如何实现这一目标的几种方式&#xff1a; 实时监控与控制&#xff1a; 物联网传感器和设备能够实时收集生产线上的数据&#xff0c;使企业能够实时监控设备状态、生…
阅读更多...
Python 编程中反斜杠 “\” 的作用：作为续行符和转义字符，处理文件路径和正则表达式时需特别注意。

Python 编程中反斜杠 “\” 的作用：作为续行符和转义字符，处理文件路径和正则表达式时需特别注意。

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Python 中的反斜杠 \ 可以被用作续行符&#xff0c;它允许你将一行代码分成多行来书写&#xff0c;以提高代码的可读性。这在处理长字符串、复杂的数学表达式或其他需要多行布局的代码时非常有用。 使…
阅读更多...
【开发环境搭建篇】Redis客户端安装和配置

【开发环境搭建篇】Redis客户端安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…
阅读更多...
网络——套接字编程UDP

网络——套接字编程UDP

目录 端口号 源端口号和目的端口号 认识TCP协议和UDP协议 网络字节序 socket编程接口 socket常见接口 sockaddr结构 UDP socket bind recvfrom sendto 编写客户端 绑定INADDR_ANY 实现聊天功能 端口号 在这之前我们已经说过源IP地址和目的IP地址&#xff0c;还有…
阅读更多...
SpringBoot自定义starter开发：定时任务报表开发

SpringBoot自定义starter开发：定时任务报表开发

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…
阅读更多...
java Flink（四十二）Flink的序列化以及TypeInformation介绍（源码分析）

java Flink（四十二）Flink的序列化以及TypeInformation介绍（源码分析）

Flink的TypeInformation以及序列化 TypeInformation主要作用是为了在 Flink系统内有效地对数据结构类型进行管理&#xff0c;能够在分布式计算过程中对数据的类型进行管理和推断。同时基于对数据的类型信息管理&#xff0c;Flink内部对数据存储也进行了相应的性能优化。 Flin…
阅读更多...
最新文章

Copyright @ 2022~2023