OpenHarmony UI动画-rebound

简介

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.mzph.cn/web/307.shtml

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

相关文章

MySQL 锁机制全面解析

MySQL 锁机制全面解析

目录 1. MySQL的锁类型1.1 全局锁1.2 表锁1.3 行锁1.4 共享锁（读锁）1.5 排它锁（写锁）1.6 死锁 2 乐观锁和悲观锁2.1 乐观锁2.2 悲观锁 3 意向锁4 间隙锁5 临键锁6. 事务隔离级别对锁的影响6.1 读未提交（Read Uncommitt…
阅读更多...
3ds Max2024安装包（亲测可用）

3ds Max2024安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 3ds Max是一款基于PC系统的强大3D建模、渲染和制作软件，广泛应用于游戏开发、影视后期制作、建筑设计、工业设计等多个领域。其拥有丰富的建模工具，可轻松创建逼真的三维场景和模型；同时&#…
阅读更多...
OpenMesh 极小曲面（局部迭代法）

OpenMesh 极小曲面（局部迭代法）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 我们的目标是想得到一个曲率处处为0的曲面，具体操作如下所述： 二、实现代码 #define _USE_MATH_DEFINES #include
阅读更多...
Linux 操作系统gdb、makefile

Linux 操作系统gdb、makefile

今天是对前面两天的补充和完善。 1、gdb 1.1 gdb 作用 调试程序 1.2 调试bug的步骤 测试：发现问题 固化：让bug重现 定位：找到bug的位置 修改：修改bug 验证 1.3 gdb调试工具的使用 1->想要使用gdb调试工具，在编…
阅读更多...
【网站项目】自习室预约系统

【网站项目】自习室预约系统

🙊作者简介：拥有多年开发工作经验，分享技术代码帮助学生学习，独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件，帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
汽车充电桩充电效率的四大决定因素

汽车充电桩充电效率的四大决定因素

随着电动汽车的快速普及，交流充电桩作为电动汽车的充电基础设施，其充电效率受到了广泛的关注。接下来，我们将深入探讨交流充电桩的充电效率，包括充电效率的定义、影响因素以及提升方法。 充电效率的定义 交流充电桩的充电效率指的…
阅读更多...
【微信小程序从入门到精通（项目实战）】——微电影小程序

【微信小程序从入门到精通（项目实战）】——微电影小程序

👨‍💻个人主页：开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…
阅读更多...
2024华中杯C题完整解题思路及代码

2024华中杯C题完整解题思路及代码

C 题 基于光纤传感器的平面曲线重建算法建模 光纤传感技术是伴随着光纤及光通信技术发展起来的一种新型传感器技 术。它是以光波为传感信号、光纤为传输载体来感知外界环境中的信号，其 基本原理是当外界环境参数发生变化时，会引起光纤传感器中光波参量&…
阅读更多...
Vue前端框架如何调用天聚数行API？

Vue前端框架如何调用天聚数行API？

Vue是一个业内优秀的前端解决方案，采用了最新流行的MVVM框架模式，深受web前端开发者的喜爱，在相关开发者社区也一直都是热门交流话题。那么，如何通过Vue调用天行数据的API接口呢，下面就具体给大家示例。 vue采用的是数…
阅读更多...
数字零售力航母-看微软如何重塑媒体

数字零售力航母-看微软如何重塑媒体

数字零售力航母-看微软如何重塑媒体 - 从2024全美广播协会展会看微软如何整合营销媒体AI技术和AI平台公司 2024年，微软公司联合英伟达总司，赞助全美广播协会展会。本次展会微软通过搭建一个由全面的合作伙伴生态系统支持的可信和安全的平台，…
阅读更多...
TCP和UDP协议的区别

TCP和UDP协议的区别

1、定义 TCP协议的全称是Transmission Control Protocol（传输控制协议），是一种面向连接的点对点的传输层协议。 UDP协议的全称是User Datagram Protocal（用户数据报协议），为应用程序提供一种无需建立连接…
阅读更多...
手机从0基础到精通拍摄，拍摄手法0基础教学，快速入门

手机从0基础到精通拍摄，拍摄手法0基础教学，快速入门

课程下载：https://download.csdn.net/download/m0_66047725/89064797 更多资源下载：关注我。 课程内容： 1 为什么学拍摄剪辑.mp4 2 如何选择手机.mp4 3 补光灯的作用.mp4 !三角支架的作用.mp4 5 麦克风的作用.mp4 6 帧率清晰度参数.m…
阅读更多...
Hive进阶

Hive进阶

目录 一、MapReduce的计算过程 二、Yarn的资源调度 yarn的资源调度策略 三、Hive的语法树 四、Hive配置优化 五、数据开发 六、数据仓库 七、数据仓库开发流程 八、数仓分层 九、ETL和ELT 一、MapReduce的计算过程 分布式计算框架 需要编写代码执行，执行时…
阅读更多...
Edge的使用心得与深度探索：优化浏览体验的技巧与建议

Edge的使用心得与深度探索：优化浏览体验的技巧与建议

随着互联网的快速发展，浏览器已经成为我们日常生活中不可或缺的工具之一。在众多浏览器中，微软Edge凭借其稳定性、安全性和功能丰富性备受用户青睐。本文将深入探讨Edge浏览器的各种功能与技巧，帮助用户优化其浏览体验。 文章目录 Edge翻译插…
阅读更多...
iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

airbnb/lottie-ios Stars: 24k License: NOASSERTION lottie-ios 是一个用于在 iOS 平台上本地渲染 After Effects 矢量动画的库。 该项目主要功能、关键特性、核心优势包括： 跨平台支持：可在 iOS, macOS, tvOS, visionOS, Android 和 Web 上使用实时渲…
阅读更多...
ASP.NET医院手麻信息系统源码 .NET6.0+VUE

ASP.NET医院手麻信息系统源码 .NET6.0+VUE

目录 麻醉记录单 复苏记录单 麻醉文书 手术麻醉信息 1、 体征监控记录 2、 麻醉用药信息 3、 手术事件登记 4、 手术状态变更 5、 麻醉医师交接 6、 其他辅助操作 手麻信息系统是以服务围术期临床业务工作的开展为核心，通过与床边监护设备以及医院H…
阅读更多...
OpenCV从入门到精通实战(五)——dnn加载深度学习模型

OpenCV从入门到精通实战(五)——dnn加载深度学习模型

从指定路径读取图像文件、利用OpenCV进行图像处理，以及使用Caffe框架进行深度学习预测的过程。 下面是程序的主要步骤和对应的实现代码总结： 1. 导入必要的工具包和模型 程序开始先导入需要的库os、numpy、cv2，同时导入utils_paths模块&…
阅读更多...
Objective-C网络数据捕获：使用MWFeedParser库下载Stack Overflow示例

Objective-C网络数据捕获：使用MWFeedParser库下载Stack Overflow示例

概述 Objective-C开发中，网络数据捕获是一项常见而关键的任务，特别是在处理像RSS源这样的实时网络数据流时。MWFeedParser库作为一个优秀的解析工具，提供了简洁而强大的解决方案。本文将深入介绍如何利用MWFeedParser库，以高效、…
阅读更多...
【学习笔记二十】EWM TU运输单元业务概述及后台配置

【学习笔记二十】EWM TU运输单元业务概述及后台配置

一、EWM TU运输单元业务流程概述 TU是指车辆和运输单元在货场中，移动车辆或运输单元。 车辆是特定运输方式的专用化工具，车辆可以包含一个或多个运输单元，并代表运输车辆的实际实体。 运输单元是用于运输货物的车辆的最小可装载单位，运输单元可以是车辆的固定部分。 …
阅读更多...
高仿小米商城用户端

高仿小米商城用户端

高仿小米商城用户端(分为商城前端（tongyimall-vue)和商城后端(tongyimall-api)两部分)，是Vue SpringBoot的前后端分离项目，用户端包括首页门户、商品分类、首页轮播、商品展示、商品推荐、购物车、地址管理、下订单、扫码支付等功能模块。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023