鸿蒙Next帧动画如何控制某一帧的移动

在鸿蒙Next开发中，如何精确控制帧动画中某一帧的移动位置？比如我想让第5帧的图片向右平移50px，但保持其他帧不变，该通过什么属性或方法实现？求具体代码示例。

2 回复

鸿蒙Next里，用KeyframeAnimation就能精准控制帧动画的移动。比如：

KeyframeAnimation anim = new KeyframeAnimation();
anim.addKeyFrame(0.5f, new Vector3f(100, 0, 0)); // 第50%帧时右移100像素

简单说就是：在关键帧时间点设置位移向量，动画就会按你画的路线飘过去～

更多关于鸿蒙Next帧动画如何控制某一帧的移动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，控制帧动画中某一帧的移动可以通过Animator和Keyframe实现。以下是具体步骤：

  1. 定义关键帧：使用Keyframe设置动画路径上的关键点。
  2. 配置动画属性：指定动画属性（如位置、透明度等）。
  3. 应用动画：将动画绑定到目标组件。

示例代码（控制组件在X轴移动）：

import { Keyframe, KeyframeAnimation, Curve } from '@kit.ArkUI';

// 创建关键帧
let keyframes = new Keyframe({
  // 第0帧：起始位置
  0: { translate: { x: 0, y: 0 } },
  // 第50%帧：移动到X轴100px位置
  0.5: { translate: { x: 100, y: 0 } },
  // 第100%帧：回到原点
  1: { translate: { x: 0, y: 0 } }
});

// 创建动画
let animation = new KeyframeAnimation({
  // 设置关键帧
  keyframes: keyframes,
  // 设置动画时长（毫秒）
  duration: 1000,
  // 设置曲线（可选）
  curve: Curve.EaseInOut
});

// 应用动画到组件
@Component
struct MyComponent {
  build() {
    Column() {
      // 目标组件
      Text('移动文本')
        .translate({ x: 0, y: 0 })
        .onClick(() => {
          // 点击触发动画
          animation.play();
        })
    }
  }
}

关键点说明：

  • 通过keyframes对象定义关键帧位置（百分比或具体值）。
  • 使用translate控制组件位移。
  • 调用play()方法启动动画。

如需更精确控制，可调整关键帧百分比或添加更多关键帧。

回到顶部