目录

案例介绍

本篇文章将介绍如何实现悬浮按钮菜单的动画效果。通过动画控制器和数学计算，实现菜单项的扇形展开动画，包括位移、旋转、缩放和透明度变化。

代码实现

// 切换菜单展开状态
toggleMenu() {
  this.isExpanded = !this.isExpanded
  
  // 计算每个菜单项的位置和角度
  const itemCount = this.menuItems.length
  const radius = 120 // 菜单展开半径
  const startAngle = -90 // 起始角度（正上方）
  const endAngle = 90 // 结束角度（正下方）
  const angleStep = (endAngle - startAngle) / (itemCount - 1) // 角度步长
  
  // 设置动画
  this.animationController.animate({
    duration: 300, // 动画持续时间
    curve: Curve.Ease, // 动画曲线
    onFrame: (progress: number) => {
      // 根据展开状态决定动画方向
      const animProgress = this.isExpanded ? progress : 1 - progress
      
      // 更新每个菜单项的状态
      for (let i = 0; i < itemCount; i++) {
        // 计算当前角度（弧度）
        const angle = (startAngle + i * angleStep) * Math.PI / 180
        
        // 计算目标位置
        const targetX = Math.cos(angle) * radius
        const targetY = Math.sin(angle) * radius
        
        // 更新位移
        this.translations[i] = {
          x: targetX * animProgress,
          y: targetY * animProgress
        }
        
        // 更新旋转角度
        this.rotationAngles[i] = 360 * animProgress
        
        // 更新透明度
        this.opacities[i] = animProgress
        
        // 更新缩放比例
        this.scales[i] = 0.5 + 0.5 * animProgress
      }
    }
  })
}

代码详解

1. 动画参数设计

const radius = 120 // 菜单展开半径
const startAngle = -90 // 起始角度（正上方）
const endAngle = 90 // 结束角度（正下方）
const angleStep = (endAngle - startAngle) / (itemCount - 1) // 角度步长

参数设计考虑：

• radius决定展开范围
• 角度范围确定扇形区域
• 角度步长确保均匀分布

2. 动画控制器配置

this.animationController.animate({
  duration: 300, // 动画持续时间
  curve: Curve.Ease, // 动画曲线
  onFrame: (progress: number) => {
    // 动画逻辑
  }
})

配置要点：

• 适中的动画时长
• 平滑的动画曲线
• 帧动画回调处理

3. 动画进度处理

const animProgress = this.isExpanded ? progress : 1 - progress

进度处理特点：

• 根据展开状态反转进度
• 实现展开和收起动画
• 保证动画连续性

4. 位置计算

// 计算当前角度（弧度）
const angle = (startAngle + i * angleStep) * Math.PI / 180

// 计算目标位置
const targetX = Math.cos(angle) * radius
const targetY = Math.sin(angle) * radius

计算过程：

• 角度转换为弧度
• 使用三角函数计算坐标
• 考虑动画进度影响

5. 多重动画效果

// 更新位移
this.translations[i] = {
  x: targetX * animProgress,
  y: targetY * animProgress
}

// 更新旋转角度
this.rotationAngles[i] = 360 * animProgress

// 更新透明度
this.opacities[i] = animProgress

// 更新缩放比例
this.scales[i] = 0.5 + 0.5 * animProgress

动画效果组合：

• 位移实现扇形展开
• 旋转增加动感
• 透明度实现淡入淡出
• 缩放强化视觉效果

总结

本文通过实现悬浮按钮菜单的动画效果，展示了如何通过合理的动画参数设计和数学计算实现扇形展开动画。通过设置展开半径、起始角度和结束角度等参数，确定了扇形布局的范围和分布。动画控制器统一管理动画流程，确保动画的平滑性和连续性。同时，结合位移、旋转、透明度和缩放等多种动画效果，增强了视觉体验。通过精确的数学计算，每个菜单项的位置和角度得以准确计算，保证了动画的精确性和流畅性。这种实现方式为悬浮按钮菜单的交互设计提供了高质量的视觉效果和用户体验。