有没有HarmonyOS鸿蒙Next大佬知道animator动画怎么实现requestAnimationFrame的效果

有没有HarmonyOS鸿蒙Next大佬知道animator动画怎么实现requestAnimationFrame的效果 有没有大佬知道怎么使用@kit.ArkUI的Animator动画API实现帧数动画，而不是在规定时间执行动画内容

10 回复

@ohos.animator

更多关于有没有HarmonyOS鸿蒙Next大佬知道animator动画怎么实现requestAnimationFrame的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


看下这个demo是否满足

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 旋转角度
  @State translateX: number = 0; // 偏移量
  @State opacityValue: number = 1; // 透明度

  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  // 第二步：将状态变量设置到相关可动画属性接口
  build() {
    Row() {
      // 组件一
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .onReady(() => {
            this.context.fillRect(0, 0, 100, 100)
          })
      }
      .opacity(this.opacityValue)
      .rotate({ angle: this.rotateValue })
      // 第三步：通过属性动画接口开启属性动画
      .animation({ curve: curves.springMotion() })
      .backgroundColor('#317AF7')
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.animate = !this.animate;
        // 第四步：闭包内通过状态变量改变UI界面
        // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
        // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
        this.rotateValue = this.animate ? 90 : 0;
        // 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画
        this.translateX = this.animate ? 50 : 0;
        // 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画
        this.opacityValue = this.animate ? 0.6 : 1;
      })

      // 组件二
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
      .animation({ curve: curves.springMotion() })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

基本信息

  • 姓名: 张三

  • 年龄: 28

  • 职位: 软件工程师

  • 邮箱: zhangsan@example.com

  • 技能:

    • Python
    • Java
    • C++

  • 简历:

    这里是一些关于张三的详细信息。他在2015年获得了计算机科学学士学位，并在2018年获得硕士学位。他有超过5年的软件开发经验。

  • 项目经验:

    • 项目A: 描述A
    • 项目B: 描述B

说说具体场景？

我要实现canvas内部帧数动画，比如运动规则，我会去计算每一帧运动的距离，如果是web就是用requestAnimationFrame实现，但是鸿蒙没有，而且鸿蒙的动画都是规定时间返回来执行的，我要的是根据我自己的运动数据量来控制结束，

帧动画组件[[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-imageanimator-V5]]

我要在canvas上画的，

  • 姓名: 张三
  • 年龄: 28
  • 职位: 开发工程师

拆解成一帧一帧吧

没用呀，每一帧要有时间间隔，不然看起来就是没有动画的，

在HarmonyOS中，requestAnimationFrame的效果可以通过Animator组件来实现。Animator是鸿蒙系统提供的动画框架，支持多种动画类型和效果。

要实现类似requestAnimationFrame的效果，可以使用Animator的ValueAnimator或PropertyAnimator。ValueAnimator允许你在一段时间内动态改变某个值，并通过监听器回调来更新UI。PropertyAnimator则允许你直接对对象的属性进行动画处理。

以下是一个简单的示例，展示如何使用ValueAnimator来实现类似requestAnimationFrame的效果：

import { ValueAnimator, Animator } from '@ohos.animator';

let valueAnimator = new ValueAnimator();
valueAnimator.setDuration(1000); // 设置动画时长
valueAnimator.setFloatValues(0, 1); // 设置动画值范围

valueAnimator.onUpdate((value) => {
    // 在这里根据value的值更新UI
    console.log(`Current value: ${value}`);
});

valueAnimator.start(); // 启动动画

在这个示例中，ValueAnimator会在1秒内将值从0变化到1，并通过onUpdate回调函数实时更新UI，类似于requestAnimationFrame的效果。

如果需要更复杂的动画效果，可以结合Animator的其他功能，如插值器、动画集合等，来实现更丰富的动画效果。

回到顶部