一、交互动效设计核心原则

1. 自然物理运动
   模拟真实世界的运动规律，例如按钮点击时采用弹簧曲线实现弹性缩放

   Button('点击我')
     .onClick(() => {
       animate({
         duration: 300,
         curve: Curve.Spring, // 使用弹簧曲线
         iterations: 1 
       })
     })
   

2. 焦点引导机制
   通过动效引导用户视线，例如列表加载时采用渐入动画

   List() {
     ForEach(this.items, (item) => {
       ListItem() {
         Text(item)
           .opacity(0)
           .onAppear(() => {
             animate({ duration: 200 })
               .opacity(1) // 渐显效果
           })
       }
     })
   }
   

3. 性能优先准则
   动画时长控制在200-500ms，避免过度渲染

二、基础动效实现方案

1. 属性动画（基础缩放）
实现按钮点击时的弹性效果：

@Entry
@Component
struct ScaleButton {
  @State scale: number = 1

  build() {
    Column() {
      Button('弹性按钮')
        .scale({ x: this.scale, y: this.scale })
        .onClick(() => {
          animate({
            duration: 300,
            curve: Curve.FastOutSlowIn
          }, () => {
            this.scale = 0.9 // 点击时缩小
          }).then(() => {
            animate({}, () => {
              this.scale = 1 // 恢复原状
            })
          })
        })
    }
  }
}

1. 过渡动画（页面切换）
   实现淡入淡出效果：

@Entry
@Component
struct PageTransition {
  @State showDetail: boolean = false

  build() {
    Stack() {
      if (!this.showDetail) {
        HomePage()
          .transition(TransitionEffect.opacity(0.5)) // 透明度过渡
      }
      if (this.showDetail) {
        DetailPage()
          .transition(TransitionEffect.OPACITY)
      }
    }
    .onClick(() => {
      this.showDetail = !this.showDetail
    })
  }
}

三、手势交互进阶实现
1. 拖拽+旋转复合动画

@Component
struct DragComponent {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State angle: number = 0

  build() {
    Image($r('app.media.icon'))
      .position({ x: this.offsetX, y: this.offsetY })
      .rotate({ angle: this.angle })
      .gesture(
        GestureGroup(GestureMode.Parallel,
          PanGesture()
            .onActionUpdate((event: GestureEvent) => {
              this.offsetX = event.offsetX
              this.offsetY = event.offsetY
            }),
          RotationGesture()
            .onActionUpdate((event: GestureEvent) => {
              this.angle = event.angle
            })
        )
      )
  }
}

1. 长按微交互反馈

Button('长按触发')
  .onLongPress(() => {
    animate({
      duration: 150,
      curve: Curve.EaseIn
    }, () => {
      this.scale = 1.2 // 长按缩放
    })
  })

四、最佳实践指南

1. 动效层级管理

   • 主操作动画时长≤300ms
   • 辅助动画时长≤150ms

2. 性能优化技巧

   • 避免在onFrame中执行复杂计算
   • 优先使用系统预设曲线（Spring/FastOutSlowIn）

3. 视觉一致性原则

   • 相同类型的交互采用统一动画模式
   • 动效幅度与设备尺寸成正相关

通过遵循鸿蒙设计语言与合理的API调用，开发者可以轻松实现符合人机交互直觉的动效效果。建议从简单属性动画入手，逐步叠加手势交互逻辑，最终实现完整的动效体系。