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

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

粒子动画的效果通过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多媒体技术

  • 鸿蒙NaPi组件进阶

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

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于java+springboot+vue实现的智慧养老院管理系统(文末源码+Lw+ppt)23-490

摘 要 智慧养老院管理系统采用B/S架构&#xff0c;数据库是MySQL。网站的搭建与开发采用了先进的java进行编写&#xff0c;使用了springboot框架。该系统从三个对象&#xff1a;由管理员和家属、护工来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;…

文件IO(代码案例: 文件复制, 指定目录查找文件, 指定目录查找内容)

文件复制 进行普通文件的复制 使用操作字节流的对象操作文件 // 文件复制 public class Main {public static void main(String[] args) throws IOException {// 输入两个路径, 源路径, 目的路径Scanner scanner new Scanner(System.in);System.out.println("请输入拷贝文…

主机游戏:怀旧浪潮与未来创新的交汇

《主机游戏&#xff1a;怀旧浪潮与未来创新的交汇》 一、主机游戏的怀旧魅力 1、经典的再现&#xff1a;随着时间的推移&#xff0c;主机游戏不仅成为一种娱乐方式&#xff0c;更成为一代人的集体回忆。经典的像素画风、复古的音乐和简单却深入人心的故事情节&#xff0c;使得…

JavaScript高级(十三)---ES6中Set,map

ES6 Set 在ES6之前&#xff0c;我们存储数据的结构主要有两种&#xff1a;数组、对象。 在ES6中新增了另外两种数据结构&#xff1a;Set、Map&#xff0c;以及它们的另外形式WeakSet、WeakMap。 Set是一个新增的数据结构&#xff0c;可以用来保存数据&#xff0c;类似于数组&a…

Qt QGraphicsView移动、缩放

原链接 首先需要明白&#xff0c;view在整个视图框架中的角色是用于显示scene的&#xff0c;所以决定了如何展示scene&#xff0c;包括scale()函数&#xff0c;用于放大缩小所展示的scene&#xff1b;centerOn()函数&#xff0c;决定scene的中心在何方。所有的操作&#xff0c…

VS2019 C++ NetCDF配置

原链接1 原链接2 做个备份 1.下载对应的NetCDF-C和C库 官网下载 选择64位的NetCDF4安装版&#xff08;没有DAP的&#xff09; 现在官网已经没有NetCDF-C 4.7.3 版本了&#xff0c;网上别人提供了新的下载地址&#xff1a;NetCDF各个版本&#xff08;Index of /library/net…

vue iframe实现父页面实时调用子页面方法和内容

父页面标签添加鼠标按下事件 父页方法中建立iframe通信 实时调用子页面方法 实时更改子页面文本内容

贵州省二级分类土地利用数据(矢量)

贵州省&#xff0c;地处中国西南腹地&#xff0c;地貌属于中国西南部高原山地&#xff0c;境内地势西高东低&#xff0c;自中部向北、东、南三面倾斜&#xff0c;平均海拔在1100米左右。贵州高原山地居多&#xff0c;素有“八山一水一分田”之说。全省地貌可概括分为&#xff1…

基于SpringBoot的街道办管理系统

摘 要 随着世界经济信息化、全球化的到来和互联网的飞速发展&#xff0c;推动了各行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、动态的、交互友好的、高效的街道办管理系统。当前的信息管理存在工作…

Python+requests+unittest+excel搭建接口自动化测试框架(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、框架结构 工程目录【文末有配套视频和资料免费领取】 代码&#xff1a;基于python2编写 二…

006_【基础篇】springboot整合Mybatis

SpringBoot 整合 Mybatis 只需要两步&#xff1a; 案例&#xff1a; 创建数据库 在 IDEA 提供的插件的内置的数据库图形化界面(其他图形化界面软件也可以&#xff0c;都一样&#xff09; 中创建以下数据库&#xff1a; create database if not exists mybatis;use mybatis…

principles of network applications网络应用原理

Creating a network app write programs that: ▪ run on (different) end systems ▪ communicate over network ▪ e.g., web server software communicates with browser software application transport network data link physical application transport network data li…

LeetCode每日一题【206. 反转链表】

思路&#xff1a;双指针&#xff0c;一前一后&#xff0c;逐个把指向后面的指针指向前面。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), ne…

面试常问:为什么 Vite 速度比 Webpack 快

前言 最近作者在学习 webpack 相关的知识&#xff0c;之前一直对这个问题不是特别了解&#xff0c;甚至讲不出个123....&#xff0c;这个问题在面试中也是常见的&#xff0c;作者在学习的过程当中总结了以下几点&#xff0c;在这里分享给大家看一下&#xff0c;当然最重要的是…

安全、合规、提质增效,南方某电网公司如何通过代码审计保障能源数字化转型?

​南方某电网公司供电营业区覆盖十几个州市&#xff0c;是所在省域电网运营和交易的主体&#xff0c;也是承担对外供电和培育电力支柱产业的重要企业。近年来该电网公司在数字化转型方面深耕细作&#xff0c;紧跟工业互联网的时代浪潮&#xff0c;打造设备智慧运维数字化场景&a…

Elasticsearch:ES|QL 入门 - Python Notebook

数据丰富在本笔记本中&#xff0c;你将学习 Elasticsearch 查询语言 (ES|QL) 的基础知识。 你将使用官方 Elasticsearch Python 客户端。 你将学习如何&#xff1a; 运行 ES|QL 查询使用处理命令对表格进行排序查询数据链式处理命令计算值计算统计数据访问列创建直方图丰富数…

数据结构从入门到精通——冒泡排序

冒泡排序 前言一、冒泡排序的基本思想二、冒泡排序的特性总结三、冒泡排序的动画演示四、冒泡排序的具体代码test.c 前言 冒泡排序是一种简单的排序算法&#xff0c;通过重复遍历待排序数列&#xff0c;比较相邻元素的大小并交换位置&#xff0c;使得每一轮遍历后最大&#xf…

蓝桥杯 2023 省A 更小的数

主要思路&#xff1a; 输入一个长度为n的字符串&#xff0c;用二维数组dp[i][j]来记录子串[i, j]是否需要反转一次才能满足条件。使用动态规划自底向上地填充dp数组。根据问题的要求&#xff0c;需要考虑字符串的子串中字符的大小关系来判断是否需要反转。最后统计满足条件的子…

小红书,已破!支持无水印批量下载

在我们刷小红书时&#xff0c;经常会遇到自己喜欢的头像/壁纸/背景图图片或各大博主发布的视频教程&#xff0c;想保存下载使用和后续的查看&#xff0c;但保存下载后发现图片或视频右下角保留小红书的水印&#xff0c;很影响使用查看的体验。 所以本期文章最软库给大家分享一…

3D高斯泼溅的崛起

沉浸式媒体领域正在以前所未有的速度发展&#xff0c;其中 3D 高斯溅射成为一项关键突破。 这项技术在广泛的应用中看起来非常有前景&#xff0c;并且可能会彻底改变我们未来创建数字环境以及与数字环境交互的方式。 在本文中&#xff0c;我们将通过与摄影测量和 NeRF 等前辈进…