鸿蒙相机应用开发实战（下）——交互体验与拍摄动画优化

📸 鸿蒙相机应用开发实战（下）——交互体验与拍摄动画优化

这一篇主要面向已经能完成相机预览与拍照的开发者，帮助你把“能用”变成“好用”。我们会加上交互动画、拍照动效、以及简单的 UI 设计优化。

---

一、UI 层动效设计：拍照动效实现

拍照瞬间的反馈非常重要。我们可以通过快门动画 + 轻微震动 + 预览闪烁来增强拍摄体验。

// pages/CameraPage.ets
@Entry
@Component
struct CameraPage {
  @State isShutterAnimating: boolean = false;

  build() {
    Column() {
      // 相机预览组件
      CameraView()
        .width('100%')
        .height('100%')

      // 拍照按钮
      Button('📸')
        .width(80)
        .height(80)
        .backgroundColor(this.isShutterAnimating ? '#CCCCCC' : '#FFFFFF')
        .borderRadius(40)
        .onClick(() => {
          this.takePhoto();
        })
        .animation({
          duration: 200,
          curve: Curve.EaseInOut,
        })
    }
  }

  async takePhoto() {
    this.isShutterAnimating = true;
    await new Promise(r => setTimeout(r, 200));
    this.isShutterAnimating = false;

    // TODO: 调用实际拍照逻辑
    // cameraSession.capturePhoto(...)
  }
}

说明：

• @State isShutterAnimating 控制快门按钮的颜色闪动；
• animation() 可为点击加上缩放或颜色动画；
• 可结合系统震动服务（Vibrator.vibrate()）增强触感。

---

二、相机预览动画（渐进进入与缩放）

打开相机时，不应突然切换到预览画面。我们可以用 Opacity 和 Scale 实现平滑进入效果：

@State opacityValue: number = 0
@State scaleValue: number = 0.95

onCameraReady() {
  this.opacityValue = 1
  this.scaleValue = 1
}

build() {
  Stack() {
    CameraView()
      .width('100%')
      .height('100%')
      .opacity(this.opacityValue)
      .scale({ x: this.scaleValue, y: this.scaleValue })
      .animation({ duration: 400, curve: Curve.EaseOut })

    Button('拍照').onClick(() => this.takePhoto())
  }
}

✨视觉效果：相机画面会从轻微缩小、半透明的状态渐变为全尺寸、全亮显示，看起来更“高级”。

---

三、拍照完成后缩略图预览动画

拍完照后，可以在界面角落显示最近一次拍摄的缩略图。
实现思路：

1. 捕获完成后获取照片路径；
2. 用 <Image> 组件动态加载；
3. 添加 scale 与 translate 动画。

@State lastPhotoUri: string = ''
@State isThumbVisible: boolean = false

async takePhoto() {
  let uri = await this.cameraSession.capturePhoto()
  this.lastPhotoUri = uri
  this.isThumbVisible = true
}

build() {
  Stack() {
    CameraView().width('100%').height('100%')

    if (this.isThumbVisible) {
      Image(this.lastPhotoUri)
        .width(80)
        .height(80)
        .position({ x: '80%', y: '85%' })
        .borderRadius(8)
        .animation({ duration: 300, curve: Curve.EaseOut })
    }
  }
}

---

四、完整体验建议（UX 优化要点）

场景	推荐动画/交互	实现方式
打开相机	渐入、缩放	opacity + scale
点击拍照	快门闪烁 + 按钮动画	State 控制样式
拍照完成	缩略图淡入	Image + animation()
录制视频	录制按钮变红 + 呼吸效果	@State 切换颜色/大小

---

五、小结

到这里，你已经掌握了：

• ✅ 相机预览的基础构建；
• ✅ 拍照逻辑的实现；
• ✅ 动效与 UI 层交互增强。

🧩 建议：下一步可以尝试加入“滤镜效果”、“连拍模式”或“AI 场景识别”等高级功能，让你的鸿蒙相机 App 更加专业。