OpenHarmony UI动画-rebound

news2024/12/28 18:24:18

简介

rebound是一个模拟弹簧动力学，用于驱动物理动画的库。

下载安装

ohpm install @ohos/rebound

OpenHarmony ohpm环境配置等更多内容，请参考如何安装OpenHarmony ohpm

使用说明

import rebound from '@ohos/rebound';

功能一：创建维护弹簧对象的弹簧系统。通过配置张力、摩擦、动画值来创建和注册弹簧对象，并添加监听器以接收弹簧位置。

spring: rebound.Spring = springSystem.createSpring();
spring.setSpringConfig(rebound.SpringConfig.DEFAULT_ORIGAMI_SPRING_CONFIG);
springConfig: rebound.SpringConfig = spring.getSpringConfig();
spring.addListener({
  onSpringUpdate: function(spring) {
    var val = spring.getCurrentValue();
    //Use Spring val to Process/Animate
  },
  onSpringEndStateChange: function(spring){
  }
});

功能二：可以设置弹簧动画在0到n之间运行，n是结束值，调用Spring.setEndValue()设置结束值。在以下代码中，弹簧位置在0到1之间变化。

spring.setEndValue(1);

功能三：利用弹簧位置的不断变化动态改变视图组件的位置，从而为视图组件创造出动画效果。调用mapValueInRange()将弹簧位置转换为自定义范围。在下面的示例中，弹簧位置转换为图像大小缩放比来实现动画效果。

spring.addListener({
  onSpringUpdate: function(spring) {
    var val = spring.getCurrentValue();
    val = rebound.MathUtil
    .mapValueInRange(val, 0, 1, 1, 0.5);
    self.imageSize=val;
  },
  onSpringEndStateChange: function(spring){
  }
});

功能四：调用spring.setEndValue(0)结束弹簧动画效果

spring.setEndValue(0);

接口说明

SpringSystem—弹簧系统
接口名参数Return Value说明
SpringSystem()LooperStringSystem弹簧系统由循环器驱动，当弹簧系统处于闲置状态的时候，循环器负责执行每一帧。弹簧系统里包含有三种循环器：动画循环器、模拟循环器和步进循环器。其中动画循环器由于经常用于UI动画被设置为默认循环器。
createSpring()tension?: number, friction?: numberSpring给弹簧系统添加一个新弹簧。这个弹簧将在物理迭代循环中被执行。默认情况下，弹簧将使用默认的Origami 弹簧配置，张力为40，摩擦力为7，但是您也可以在这里提供自己的值。
createSpringWithBouncinessAndSpeed()bounciness?: number, speed?: numberSpring添加具有指定弹力和速度的弹簧。要复制基于PopAnimation补丁的组合折叠效果，可使用此工厂方法创建匹配的弹簧。
createSpringWithConfig():kwargs: SpringConfigSpring使用提供的SpringConfig添加一个弹簧。
getIsIdle()Noneboolean检查弹簧系统是空闲的还是活动的。如果弹簧系统中的所有弹簧都处于静止状态，即物理力已经达到平衡，那么这个方法将返回true。
getSpringById()id: numberSpring通过id从弹簧系统中查找并获取特定的弹簧。可用于在弹簧系统中的组合循环器执行之前或之后检查弹簧的状态。
getAllSprings()NoneArray获取在弹簧系统中注册的所有弹簧的列表。
registerSpring()value: Springvoid手动向该系统添加弹簧。如果弹簧是用弹簧系统的createSpring创建的，则会自动调用本方法。本方法生成的弹簧会自动注册，以便弹簧系统去执行它。
deregisterSpring(value: Spring)value: Springvoid弹簧系统注销某个弹簧。一旦被调用，弹簧系统将不在循环器中执行本弹簧。本方法通常是在调用弹簧的destroy方法时时自动调用。
loop()currentTimeMillis: numbervoid循环器每次执行移动相同距离。每次执行循环器的循环，会调用所有已经注册到弹簧系统的监听器的 onBeforeIntegrate。可以在每次迭代循环之前对弹簧做应该强制实施的任何约束或调整。
activateSpring()springId: numbervoid用于通知弹簧系统某个弹簧已经移除。如果当前循环器处于空闲状态，系统将启动循环器。
Spring—弹簧
接口名参数返回值说明
Spring()springSystemString提供了一个经典弹簧的模型，用于模拟物体运动到静止的过程。
destroy()Nonevoid弹簧对象销毁回收。
getId()Nonenumber获取弹簧id
getSpringConfig()NoneSpringConfig获取弹簧的配置参数。
getCurrentValue()Nonenumber获取弹簧的当前位置。
setCurrentValue()currentValue: number, skipSetAtRest?: booleanSpring设置弹簧的当前位置。
getStartValue()Nonenumber获取动画开始的位置。用于确定已发生的往复运动的次数。
getCurrentDisplacementDistance()Nonenumber获得弹簧与其静止结束值的距离。
getEndValue()Nonenumber获取弹簧的终值或静止位置。
setEndValue()value: numberSpring设置弹簧的终值或静止位置。如果该值不同于当前值，弹簧系统将得到通知，并开始运行其循环，让弹簧达到静止状态。所有注册了onSpringEndStateChange的监听器也会立即收到此更新的通知。
getVelocity()Nonenumber获取弹簧的当前速度，单位为像素/秒。
setVelocity()value: numberSpring设置弹簧的当前速度，单位为像素/秒。直接手势操作时用于控制动画的执行。当不再用手势控制某个UI元素时，可以在动画弹簧上调用setVelocity，这样弹簧会以与手势结束时相同的速度继续运动。然后，弹簧的摩擦力、张力和位移将控制其运动，使其速度遵循现实中弹簧动力学的运动曲线而逐渐停止。
getRestSpeedThreshold()Nonenumber获取此弹簧的静止速度阈值。
setRestSpeedThreshold()value: numberSpring为弹簧的移动速度设置一个阈值，弹簧速度低于该阈值时，将被视为处于静止状态。
getRestDisplacementThreshold()Nonenumber获取此弹簧的静止位移阈值。
isOvershootClampingEnabled()Noneboolean检查此弹簧是否启用越位移动。
setOvershootClampingEnabled()value: booleanSpring开启越位移动限制。当弹簧到达静止位置时，会立即停止，不管它现有的动量是多少。这对于某些不应该发生往复运动的动画类型很有用，例如缩放到0或alpha淡入淡出。
isOvershooting()Noneboolean通过比较弹簧开始时的移动方向与当前位置和终点值，检查弹簧是否已经越过终点。
isAtRest()Noneboolean检查弹簧是否是AtRest，意味着它的当前值和结束值是相同的，并且它没有速度。前面描述的速度和位移的阈值定义了此等价检查的边界值。如果弹簧的张力为0，那么当它的速度低于静止速度阈值时，它将被认为是静止的
setAtRest()NoneSpring设置弹簧状态为 At Rest
addListener()value: ListenerSpring向弹簧系统添加一个监听器，以接收集成前/后通知，允许弹簧被约束或调整。
removeListener()value: ListenerSpring在弹簧系统上删除一个先前添加的监听器。
removeAllListeners()NoneSpring删除SpringSystem上所有以前添加的监听器。
Listeners—监听器
接口名参数返回值说明
onSpringEndStateChange()spring: Springvoid监听弹簧结束状态
onBeforeIntegrate()spring: SpringvoidonBeforeIntegrate在任何已经向弹簧系统注册了的监听器上调用。这使您有机会在每次循环之前对弹簧做应该强制实施的约束或调整。
onAfterIntegrate()spring: Springvoid集成步骤提前执行，保证任何已经注册到弹簧系统的监听器上可以调用onAfterIntegrate。这使您有机会在弹簧系统中的对弹簧上运行做任何约束或调整。
onSpringActivate()spring: Springvoid弹簧激活回调。
onSpringUpdatespring: Springvoid弹簧状态更新回调。
onSpringAtRest()spring: Springvoid弹簧停止运行回调。
SpringConfig—弹簧配置
接口名参数返回值说明
SpringConfig()tension: number, friction: numberSpringConfig创建一个没有张力的弹簧配置或一个有一定摩擦力的滑行弹簧，这样它就不会无限滑行。
fromOrigamiTensionAndFriction()tension: number, friction: numberSpringConfig将Origami弹簧张力和摩擦力转换为反弹弹簧常数。如果你正在用Origami做一个设计的原型，这很容易使你的弹簧在反弹时表现完全相同。
fromBouncinessAndSpeedbounciness: number, speed: numberSpringConfig将Origami PopAnimation弹簧弹力和速度转换为反弹弹簧常数。如果你在Origami中使用PopAnimation补丁，这个工具将提供与你的原型相匹配的弹簧。
coastingConfigWithOrigamiFrictionfriction: numberSpringConfig创建一个没有张力的弹簧配置或一个有一定摩擦力的滑行弹簧，这样它就不会无限滑行。当我们将它和setVelocity一起使用时，可以让弹簧按照弹簧动力学的方式来运动。
Looper—循环器
接口名参数返回值说明
AnimationLooper()NoneAnimationLooper在动画计时循环中播放弹簧系统的每一帧。由于AnimationLooper是开发UI时最常见的，所以它被设置为新弹簧系统的默认looper。
SimulationLooper()NoneSimulationLooper同步生成预先录制的动画，随后可以在定时循环中播放。
SteppingSimulationLooper()SteppingSimulationLooper一次一步，由外部循环控制的循环器。
OrigamiValueConverter—OrigamiValue转换器
接口名参数返回值说明
tensionFromOrigamiValue()oValue: numbernumberOrigami 值转换为张力的转换器。
origamiValueFromTension()tension: numbernumber张力转换为Origami 值的转换器。
frictionFromOrigamiValue()oValue: numbernumberOrigami 值转换为摩擦的转换器。
origamiFromFriction()friction: numbernumber摩擦转换为Origami 值的转换器。
MathUtil
接口名参数返回值说明
mapValueInRange()value: number, fromLow: number, fromHigh: number, toLow: number, toHigh: numbernumber将值从一个范围映射到另一个范围
interpolateColorval: number, startColorStr: string, endColorStr: stringstring插值两种十六进制颜色
degreesToRadiansdeg: numbernumber度数转换为 Randian值
radiansToDegreesrad: numbernumberRandian值转换为度数
util
接口名参数返回值说明
bind()func, contextvoid将函数绑定到上下文对象
extend()target, sourcevoid将源中的所有属性添加到目标中。
removeFirst()array, itemvoid删除数组中第一个出现的引用。
hexToRGB()colorStringstring将十六进制格式的颜色字符串转换为它的等效rgb格式。执行颜色补间动画时非常方便。
rgbToHex()rNum, gNum, bNumstringrgb转十六进制
BouncyConversion— 弹跳转换
I接口名参数返回值说明
BouncyConversion()bounciness: number, speed: numberBouncyConversion提供从Origami PopAnimation配置值转换为常规Origami张力和摩擦力值的数学方法。

约束与限制

在下述版本验证通过：

DevEco Studio(5.0.3.122), SDK:API12 (5.0.0.17)。

DevEco Studio 版本： 4.1 Canary(4.1.3.317),OpenHarmony SDK:API11 (4.1.0.36)。

目录结构

|---- rebound  
|     |---- entry  # 示例代码文件夹
|     |---- rebound  # rebound 库文件夹
|           |---- rebound.js  # rebound对外接口
|     |---- README.MD  # 安装使用方法

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

IP归属地在电商行业中的重要性

IP归属地在电商行业中的重要性

IP归属地在电商行业中的应用十分广泛且深入，其重要性不容忽视。它不仅是用户身份验证和地理位置识别的重要手段，还在个性化推荐、库存管理、物流优化以及欺诈检测等多个方面发挥着关键作用。 首先，IP归属地用于身份验证和安全控制。在电商交易…
阅读更多...
2024年免费云服务器推荐，小编亲测好用！

2024年免费云服务器推荐，小编亲测好用！

随着云计算技术的飞速发展，云服务器以其弹性、高效、安全的特性，成为众多企业和个人用户的首选。尽管市面上有众多收费的云服务器产品，但免费的云服务器仍然吸引着大量用户，尤其是初学者和预算有限的用户。下面，我们就…
阅读更多...
以太网24位应变/桥式数据采集卡，替代NI 9237

以太网24位应变/桥式数据采集卡，替代NI 9237

1.特性简介 XM-BRG是一款以太网型高速应变片压力桥信号采集卡，具有8通道(-4型为4通道)真差分输入，24位分辨率，单通道最高采样率102.4ksps八通道同步共计819.2ksps(-4型为409.6ksps)、精密前置增益放大、集成桥式传感器所需的激励源硬件支持的…
阅读更多...
DNS服务器配置与管理（2）——BIND部署DNS

DNS服务器配置与管理（2）——BIND部署DNS

在Linux上配置DNS的常用软件是BIND（Berkeley Internet Name Domain Service，BIND），它是一款实现DNS服务器的开放源码软件。本文详细介绍了在CentOS7上安装并配置Bind软件。 一、Bind软件介绍 BIND包最初是在 1980 年代初在加州大…
阅读更多...
剑指Offer题目笔记33（并查集）

剑指Offer题目笔记33（并查集）

面试题116： 解决方案： ​ 一个班级可以包含一个或多个朋友圈，对应的图中可能包含一个或多个子图，每个朋友圈对应一个子图。因此，这个问题可以转化为如何求图中子图的数目。图的搜索算法可以用来计算图中子图的数目。扫…
阅读更多...
3D模型处理的多进程并行【Python】

3D模型处理的多进程并行【Python】

今天我们将讨论如何使用 Python 多进程来处理大量3D数据。 我将讲述一些可能在手册中找到的一般信息，并分享我发现的一些小技巧，例如将 tqdm 与多处理 imap 结合使用以及并行处理存档。 NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生…
阅读更多...
PLC工业网关，实现PLC联网

PLC工业网关，实现PLC联网

在当今工业自动化领域，PLC（可编程逻辑控制器）作为控制系统的核心，其稳定性和可靠性至关重要。然而，随着工业互联网和智能制造的快速发展，如何实现PLC的联网通信，提高数据传输效率，成…
阅读更多...
URL的绝对路径/相对路

URL的绝对路径/相对路

一、URL 浏览器要想发起请求,必须是一个完整的url地址. URL是一个固定格式的字符串 它表达了： 从网络中 哪台计算机（domain） 中的 哪个程序（port） 寻找 哪个服务（path），并注明了…
阅读更多...
数据治理中心DataArts Studio学习

数据治理中心DataArts Studio学习

一、什么是DataArts Studio？ 数据治理中心DataArts Studio是为了应对上述挑战，针对企业数字化运营诉求提供的具有数据全生命周期管理和智能数据管理能力的一站式治理运营平台，包含数据集成、数据开发、数据架构、数据质量监控、数据资产管理…
阅读更多...
使用vue2-ace-editor实现可选择的代码编辑器

使用vue2-ace-editor实现可选择的代码编辑器

最近在琢磨前端，因项目中需要在页面上编辑代码，所以需要写一个代码编辑器供用户使用。找了几个编辑器相关的组件，对比了下感觉还是vue2-ace-editor用着舒服，写了demo供大家参考。 由于我的项目使用的是vue2，二开鹅厂的…
阅读更多...
MySQL高负载排查方法最佳实践（15/16）

MySQL高负载排查方法最佳实践（15/16）

高负载排查方法 CPU占用率过高问题排查 使用mpstat查看cpu使用情况。 # mpstat 是一款 CPU 性能指标实时展示工具 # 能展示每个 CPU 核的资源视情况，同时还能将资源使用情况进行汇总展示 # 如果CPU0 的 %idle 已经为 0 ，说明此核已经非常繁忙# 打印所…
阅读更多...
算法训练营第25天回溯（分割）

算法训练营第25天回溯（分割）

回溯算法（分割） 131.分割回文串 力扣题目链接(opens new window) 题目 给定一个字符串 s，将 s 分割成一些子串，使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: “aab” 输出: [ [“aa”,“b”], [“a”,“…
阅读更多...
Redis中的Lua脚本(二)

Redis中的Lua脚本(二)

Lua脚本 创建排序辅助函数 为了防止带有副作用的函数令脚本产生不一致的数据，Redis对math库的math.random函数和math.randomseed函数进行了替换。对于Lua脚本来说，另一个可能产生不一致数据的地方是哪些带有不确定性质的命令，比如对于一个集…
阅读更多...
Linux中如何安装ImageMagick及其常规使用命令

Linux中如何安装ImageMagick及其常规使用命令

在Linux中安装ImageMagick可以通过包管理工具进行安装。具体步骤如下： 打开终端（Terminal）。 使用以下命令更新系统软件包列表： sudo apt update使用以下命令安装ImageMagick： sudo apt install imagemagick安装完…
阅读更多...
大型网站系统架构演化实例_2.使用缓存改善网站性能

大型网站系统架构演化实例_2.使用缓存改善网站性能

1.使用缓存改善网站性能 网站访问的特点和现实世界的财富分配一样遵循二八定律：80%的业务访问集中在20%的数据上。既然大部分业务访问集中在一小部分数据上，那么如果把这一小部分数据缓存在内存中，就可以减少数据库的访问压力&#xf…
阅读更多...
在Linux系统中，禁止有线以太网使用NTP服务器进行时间校准的几种方法

在Linux系统中，禁止有线以太网使用NTP服务器进行时间校准的几种方法

目录标题 方法 1：修改NTP配置以禁止所有同步方法 2：通过网络配置禁用NTP同步方法 3：禁用NTP服务 在Linux系统中，如果想要禁止有线以太网使用NTP服务器进行时间校准，可以通过以下几种方法之一来实现： 方法 …
阅读更多...
LDF、DBC、BIN、HEX、S19、BLF、asc、csv、ARXML、slx等（未完待续）

LDF、DBC、BIN、HEX、S19、BLF、asc、csv、ARXML、slx等（未完待续）

文章目录 如题如题 LDF是LIN报文格式文件，把这个直接拖到软件里面，可以发报文和接收报文 DBC是CAN报文格式文件，把这个直接拖到软件里面，可以发报文和接收报文 BIN文件烧录在BOOT里面（stm32），有人喜欢叫固件，这个固件就是bin文件，bin文件比hex文件体积小 其实BOOT也…
阅读更多...
探索AI提示词网站：助力内容创作与AI对话

探索AI提示词网站：助力内容创作与AI对话

嗨，大家好！在这个充满创意的时代里，AI技术为我们带来了许多惊喜和便利。如果你是一个内容创作者，无论是在撰写博客还是进行科技对话，今天我将向大家介绍几个能够提升与AI对话效率的神奇网站。 1. FlowGPT 首先&#xf…
阅读更多...
PhotoShop2024安装包（亲测可用）

PhotoShop2024安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 Adobe Photoshop是一款由Adobe Systems开发的图像编辑软件。它被广泛用于图像处理和数字艺术创作，是设计师、摄影师和艺术家们的首选工具之一。 主要功能： 图像编辑： Photoshop提供了丰富的编辑…
阅读更多...
点云的投影------PCL

点云的投影------PCL

点云的投影 /// <summary> /// 参数化模型投影点云 /// </summary> /// <param name"cloud">点云</param> /// <param name"x">投影平面x面的系数</param> /// <param name"y"></param> /// &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023