210.HarmonyOS NEXT系列教程之 TabsConcaveCircle组件动画系统详解

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

HarmonyOS NEXT系列教程之 TabsConcaveCircle组件动画系统详解

本文将深入解析TabsConcaveCircle组件的动画系统实现，包括选项切换动画和圆球移动动画。

效果演示

1. 动画状态管理

private canvasAnimator: AnimatorResult | undefined = undefined;
@State animateTime: number = 1000;
@State animationPositionX: number = 0;
@State imageOffsetY: number = 0;
@State imageWH: number = 0;

动画相关状态说明：

1. 动画控制器：

   • canvasAnimator: 存储动画实例
   • 用于控制动画的播放和暂停

2. 动画参数：

   • animateTime: 动画持续时间
   • animationPositionX: 当前凹槽位置
   • imageOffsetY: 图片偏移量
   • imageWH: 图片尺寸

2. 选项切换动画

getAnimateSelectIndex() {
  let animateDelay = 500;
  animateTo({
    duration: this.animateTime,
    delay: animateDelay
  }, () => {
    this.animateSelectIndex = this.selectIndex
  })
  this.createAnimation()
}

切换动画实现：

1. 动画配置：

   • animateDelay: 500ms延迟
   • duration: 动画持续时间

2. 状态更新：

   this.animateSelectIndex = this.selectIndex

   • 同步选中状态
   • 触发UI更新

3. 动画联动：

   this.createAnimation()

   • 触发圆球移动动画
   • 实现联动效果

3. 圆球移动动画

createAnimation() {
  if (!this.circleInfo) {
    return;
  }
  
  this.canvasAnimator = animator.create({
    duration: this.animateTime,
    easing: "ease",
    delay: 0,
    fill: "forwards",
    direction: "normal",
    iterations: 1,
    begin: this.animationPositionX,
    end: this.circleInfo?.getMenuCenterX(this.selectIndex)
  })
  
  this.canvasAnimator.onFrame = (value: number) => {
    this.animationPositionX = value;
    this.circleInfo?.setPositionXY({ x: value - this.circleInfo.circleRadius })
    this.createCanvas()
  }
  
  this.canvasAnimator.play()
}

移动动画详解：

1. 动画创建：

   animator.create({
     duration: this.animateTime,
     easing: "ease",
     fill: "forwards",
     direction: "normal",
     iterations: 1,
     begin: this.animationPositionX,
     end: this.circleInfo?.getMenuCenterX(this.selectIndex)
   })

   • 设置动画时长
   • 使用ease缓动函数
   • 保持最终状态
   • 设置起始和结束位置

2. 帧动画处理：

   this.canvasAnimator.onFrame = (value: number) => {
     this.animationPositionX = value;
     this.circleInfo?.setPositionXY({ x: value - this.circleInfo.circleRadius })
     this.createCanvas()
   }

   • 更新位置状态
   • 设置圆球位置
   • 重绘Canvas内容

3. 动画控制：

   this.canvasAnimator.play()

   • 启动动画
   • 自动执行帧更新

4. Canvas重绘实现

createCanvas() {
  if (this.circleInfo) {
    this.context.reset()
    CanvasCreateRectangle({
      context: this.context,
      tabsBgColor: this.tabsBgColor
    })
    CanvasClipGroove({
      context: this.context,
      menuLength: this.tabsMenu.length,
      center: this.animationPositionX,
    })
  }
}

Canvas更新流程：

1. 重置画布：

   this.context.reset()

   • 清除旧内容
   • 准备新一帧

2. 绘制背景：

   CanvasCreateRectangle({
     context: this.context,
     tabsBgColor: this.tabsBgColor
   })

   • 创建矩形背景
   • 应用背景颜色

3. 创建凹槽：

   CanvasClipGroove({
     context: this.context,
     menuLength: this.tabsMenu.length,
     center: this.animationPositionX,
   })

   • 绘制凹槽效果
   • 使用当前位置

总结

TabsConcaveCircle组件的动画系统通过：

1. 精确的状态管理
2. 流畅的动画过渡
3. 实时的Canvas更新
4. 优雅的动画联动

实现了一个：

• 视觉效果出色
• 性能表现优异
• 用户体验流畅
• 可维护性强

的交互动画系统。