【OpenHarmony】 鸿蒙 UI动画开发之rebound

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

简介

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

下载安装

ohpm install @ohos/rebound

使用说明

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
    .mapVal