OpenHarmony动画如何添加交互效果

OpenHarmony动画添加交互效果的实用方案

一、交互设计思路与事件绑定

• 明确交互目标：点击反馈（缩放、阴影）、状态切换（播放/暂停）、进度控制（拖拽 Seek）、序列帧播放等。
• 绑定事件：在组件上绑定通用事件（如onclick、ontouchstart、ontouchend）触发 JS/ETS 逻辑，实现视图与逻辑联动。
• 状态驱动：用组件/页面的状态变量记录交互结果（如按下态、播放状态、帧索引），状态变化驱动动画属性更新，形成闭环。
• 性能要点：优先使用属性动画与组件内置动画能力；避免频繁创建/销毁动画对象；必要时对复杂动画做节流/防抖。

二、ArkTS声明式UI的显式动画交互

• 思路：用animateTo执行属性到目标值的过渡，交互触发时更新状态并调用动画，形成可预期的交互反馈。
• 示例：点击卡片时执行缩放与阴影的“按下态”过渡，松手恢复。

@Entry
@Component
struct CardPressDemo {
  @State pressed: boolean = false
  @State scale: number = 1
  @State shadow: number = 4

  build() {
    Column({ space: 20 }) {
      Text('ArkTS 显式动画交互')
        .fontSize(20)

      Stack({ alignContent: Alignment.Center }) {
        // 交互目标：带阴影的卡片
        Column()
          .width(160)
          .height(100)
          .backgroundColor(Color.White)
          .borderRadius(12)
          .shadow({ radius: this.shadow, color: '#40000000', offsetY: 2 })
          .scale({ x: this.scale, y: this.scale })
          .onClick(() => {
            // 点击：放大 + 加深阴影
            animateTo({ duration: 180, curve: Curve.EaseOut }, () => {
              this.scale = 0.96
              this.shadow = 12
            })
          })
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
              // 抬起/取消：恢复
              animateTo({ duration: 180, curve: Curve.EaseOut }, () => {
                this.scale = 1
                this.shadow = 4
              })
            }
          })

        Text('点我')
          .fontSize(16)
          .fontColor('#333')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(20)
  }
}

• 适用场景：按钮反馈、卡片按压、开关切换、数值变化过渡等；如需循环/反向播放，可结合AnimationController与Tween实现更细粒度控制。

三、JS FA模型的组件与帧动画交互

• 图片点击反馈：用ontouchstart/ontouchend切换样式类，实现“按下态”阴影效果。
• 帧动画交互：用image-animator承载序列帧，点击时触发播放；通过属性如images、duration、iteration配置播放参数。

<!-- index.hml -->
<div class="container">
  <!-- 图片点击阴影反馈 -->
  <div class="card" onclick="onCardClick('img')"
        ontouchstart="setShadow('img', true)"
        ontouchend="setShadow('img', false)">
    <image class="main-img {{imgClass}}" src="common/images/demo.png" />
  </div>

  <!-- 帧动画点击播放 -->
  <div class="card" onclick="playFrameAnim('anim')">
    <image-animator id="anim"
                   class="animator"
                   images="{{frameList}}"
                   duration="{{frameDuration}}"
                   iteration="1" />
  </div>
</div>

// index.js
export default {
  data: {
    imgClass: '',
    frameList: [
      { src: 'common/images/frame_01.png' },
      { src: 'common/images/frame_02.png' },
      { src: 'common/images/frame_03.png' }
    ],
    frameDuration: 80
  },
  setShadow(type, flag) {
    if (type === 'img') {
      this.imgClass = flag ? 'main-img-touch' : ''
    }
  },
  playFrameAnim(id) {
    const anim = this.$element(id)
    if (anim) {
      anim.start() // 触发帧动画播放
    }
  }
}

• 要点：将事件与状态类绑定，交互即改变状态并驱动样式或动画组件行为；帧动画适合图标动效、加载序列等。

四、Lottie动画的交互控制

• 适用场景：复杂矢量动效（如加载、庆祝、引导），需要手势驱动或按段播放。
• 接入步骤：
  1. 添加依赖：在模块配置中加入**@ohos/lottie依赖（如2.0.0**）。
  2. 放置资源：将 .json 动画资源放入工程可访问路径（如 Entry/common/）。
  3. 渲染与交互：在 Canvas 的 onReady 中加载动画；通过点击事件触发播放/暂停/重播，并可结合initialSegment播放指定片段。

// LottieView.ets
import lottie from '@ohos/lottie'

@Entry
@Component
struct LottieDemo {
  @State times: number = 0
  private animateItem: any = null
  private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
  private path: string = 'common/politeChicky.json'
  private textArray: string[] = ['Hello', 'Lottie', 'OpenHarmony']

  loadAnimation(autoplay: boolean) {
    if (this.animateItem) {
      this.animateItem.destroy()
      this.animateItem = null
    }
    this.animateItem = lottie.loadAnimation({
      container: this.controller,
      renderer: 'canvas',
      loop: false,
      autoplay: autoplay,
      name: 'lottieAnim',
      path: this.path,
      initialSegment: [0, 60] // 示例：播放前60帧
    })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Canvas(this.controller)
        .width(200)
        .height(200)
        .backgroundColor('#F5F5F5')
        .borderRadius(12)
        .onClick(() => {
          this.loadAnimation(true) // 点击播放
          this.times = (this.times + 1) % this.textArray.length
        })
        .onReady(() => {
          this.loadAnimation(false) // 初始化不自动播放
        })

      Text(this.textArray[this.times])
        .fontSize(18)
        .fontColor(Color.White)
        .margin({ top: 16 })
    }
    .margin({ top: 40 })
  }
}

• 提示：通过play/pause/goToAndStop/frame等方法可实现更细的交互（如进度条拖拽、分段播放）。

五、与后端数据联动的动画

• 流程：发起网络请求 → 处理响应数据 → 更新**@State/@Prop/@Link**等状态 → 状态变化触发动画 → 异常状态给出错误反馈。
• 示例思路：
  • 请求动画配置（如type、duration、loop）或业务数据（如进度百分比）。
  • 在then/catch中更新状态；状态变更驱动animateTo或Lottie播放/重配置。
  • 对频繁网络触发的动画做节流，避免抖动。
• 适用：数据驱动的加载动画、进度动画、远程配置动效等。