鸿蒙开发之如何实现帧动画

如何实现帧动画？

帧动画是一种通过连续播放一系列静态图像（帧）来创造运动效果的技术。在华为HarmonyOS应用开发中，实现帧动画可以通过多种方式，包括使用JavaScript的requestAnimationFrame函数、设置属性动画和显式动画的帧率，以及使用image-animator组件。以下是详细的步骤和知识点：

1. 使用JavaScript实现帧动画

步骤总结：

1. 初始化数据：在JavaScript中定义数据对象，包括动画相关的变量，如left, top, flag, animation, startTime等。
2. 启动动画：通过调用requestAnimationFrame函数，传入一个回调函数step，该回调函数会在每一帧被调用。
3. 更新动画状态：在step回调函数中，根据flag标志位更新元素的位置left和top，并根据时间戳timestamp控制动画的持续时间。
4. 循环动画：如果动画未结束（即timestamp - startTime小于规定时间），则再次调用requestAnimationFrame以继续下一帧。
5. 停止动画：当left达到250或0时，切换flag的状态，实现动画的来回移动。
6. 取消动画：在组件销毁时，通过cancelAnimationFrame函数取消动画的逐帧回调。

代码示例：

export default {
  data: {
    timer: null,
    left: 0,
    top: 0,
    flag: true,
    animation: null,
    startTime: 0,
  },
  runframe() {
    this.left = 0;
    this.top = 0;
    this.flag = true;
    this.animation = requestAnimationFrame(this.step);
  },
  step(timestamp) {
    if (this.flag) {
      this.left += 5;
      this.top += 5;
      if (this.startTime == 0) {
        this.startTime = timestamp;
      }
      var elapsed = timestamp - this.startTime;
      if (elapsed < 500) {
        this.animation = requestAnimationFrame(this.step);
      }
    } else {
      this.left -= 5;
      this.top -= 5;
      this.animation = requestAnimationFrame(this.step);
    }
    if (this.left == 250 || this.left == 0) {
      this.flag = !this.flag;
    }
  },
  onDestroy() {
    cancelAnimationFrame(this.animation);
  }
}

2. 设置属性动画和显式动画的帧率

知识点总结：

1. 属性动画的帧率设置：使用animation函数定义属性动画时，可以通过expectedFrameRateRange参数设置期望的绘制帧率。
2. 显式动画的帧率设置：使用animateTo函数定义显式动画时，同样可以通过expectedFrameRateRange参数设置期望的绘制帧率。

代码示例：

• 属性动画帧率设置示例

  Text()
    .animation({
      duration: 1200,
      iterations: 10,
      expectedFrameRateRange: {
        expected: 60,
        min: 0,
        max: 120
      }
    })
  

• 显式动画帧率设置示例

  Button()
    .onClick(() => {
      animateTo({
        duration: 1200,
        iterations: 10,
        expectedFrameRateRange: {
          expected: 30,
          min: 0,
          max: 120
        }
      }, () => {
        // 动画完成后的回调
      })
    })
  

3. 使用image-animator组件实现图片帧动画

知识点总结：

1. 图片帧动画播放器（image-animator）：用于播放图片帧动画的组件。
2. 属性设置：包括images、iteration、reverse、fixedsize、duration、fillmode5+等。
3. 事件响应：包括stop、click、longpress、swipe5+等。
4. 样式设置：包括宽度、高度、内边距、外边距、边框宽度、边框颜色、边框圆角、背景颜色和透明度等。
5. 方法调用：包括start、pause、resume、stop、getState等。

代码示例：

<div class="container">
  <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
  <div class="btn-box">
    <input class="btn" type="button" value="start" @click="handleStart" />
    <input class="btn" type="button" value="stop" @click="handleStop" />
    <input class="btn" type="button" value="pause" @click="handlePause" />
    <input class="btn" type="button" value="resume" @click="handleResume" />
  </div>
</div>

export default {
  data: {
    frames: [
      { src: "/common/asserts/heart78.png" },
      // ... 其他帧图片路径
    ],
  },
  methods: {
    handleStart() { this.$refs.animator.start(); },
    handlePause() { this.$refs.animator.pause(); },
    handleResume() { this.$refs.animator.resume(); },
    handleStop() { this.$refs.animator.stop(); },
  },
};

以上内容涵盖了在华为HarmonyOS应用开发中实现帧动画的主要方法和技巧，包括使用JavaScript控制动画、设置动画帧率以及使用image-animator组件播放图片帧动画。通过这些方法，开发者可以创建出流畅且吸引人的动画效果。