目录

案例介绍

本篇文章将介绍如何设计悬浮按钮菜单的数据模型和动画状态。通过合理的数据结构和状态管理，我们可以实现一个流畅的扇形展开菜单效果。

代码实现

@Entry
@Component
struct FloatingMenuExample {
  // 菜单展开状态
  @State isExpanded: boolean = false
  
  // 菜单项配置
  private menuItems: Array<{
    icon: Resource,
    color: string,
    name: string
  }> = [
    { icon: $r('app.media.camera_icon'), color: '#FF3B30', name: '拍照' },
    { icon: $r('app.media.image_icon'), color: '#FF9500', name: '图片' },
    { icon: $r('app.media.video_icon'), color: '#34C759', name: '视频' },
    { icon: $r('app.media.file_icon'), color: '#007AFF', name: '文件' },
    { icon: $r('app.media.location_icon'), color: '#5856D6', name: '位置' }
  ]
  
  // 动画控制器
  private animationController: AnimationController = new AnimationController()
  
  // 菜单项旋转角度
  @State rotationAngles: number[] = [0, 0, 0, 0, 0]
  // 菜单项透明度
  @State opacities: number[] = [0, 0, 0, 0, 0]
  // 菜单项缩放比例
  @State scales: number[] = [0.5, 0.5, 0.5, 0.5, 0.5]
  // 菜单项位移距离
  @State translations: Array<{x: number, y: number}> = [
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 }
  ]
  
  aboutToAppear() {
    // 初始化动画控制器
    this.animationController.create()
  }
}

代码详解

1. 菜单项数据结构

private menuItems: Array<{
  icon: Resource,
  color: string,
  name: string
}>

每个菜单项包含三个属性：

• icon：按钮图标资源
• color：按钮背景颜色
• name：按钮文本

这种设计的优点：

• 数据结构清晰，易于维护
• 支持动态配置菜单项
• 便于后续扩展更多属性

2. 动画状态管理

使用多个@State装饰的数组管理动画状态：

@State rotationAngles: number[] = [0, 0, 0, 0, 0]  // 旋转角度
@State opacities: number[] = [0, 0, 0, 0, 0]       // 透明度
@State scales: number[] = [0.5, 0.5, 0.5, 0.5, 0.5] // 缩放比例
@State translations: Array<{x: number, y: number}>  // 位移距离

状态设计特点：

• 使用数组对应每个菜单项
• 初始值设置合理的默认状态
• 状态变化触发UI更新

3. 动画控制器

private animationController: AnimationController = new AnimationController()

aboutToAppear() {
  this.animationController.create()
}

动画控制器的作用：

• 统一管理动画进度
• 控制动画的开始和结束
• 提供帧动画回调

4. 展开状态管理

@State isExpanded: boolean = false

展开状态的设计考虑：

• 使用布尔值表示两种状态
• @State装饰器实现响应式更新
• 作为动画方向的判断依据

总结

本文通过设计悬浮按钮菜单的数据模型和动画状态，展示了如何实现一个流畅的扇形展开菜单效果。通过使用数组结构组织菜单项数据，包括图标、颜色和名称，实现了清晰且易于维护的数据管理。同时，利用多个@State数组分别管理旋转角度、透明度、缩放比例和位移距离等动画状态，确保了动画效果的灵活性和可扩展性。结合AnimationController统一管理动画流程，实现了复杂的动画效果。整体设计合理，状态管理清晰，为后续实现流畅的交互动画提供了坚实的基础。