#鸿蒙通关秘籍#如何在HarmonyOS NEXT中实现自定义Tab的点击动画效果？

Text(title)
  .textAlign(TextAlign.Center)
  .height($r('app.integer.width_and_height_value4'))
  .width(this.titleLengthRadix3 * title.length)
  .fontColor(this.currentIndex == idx ?
            (this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')):
            (this.wantGoIndex == idx ? $r('app.color.background_color1'):$r('app.color.background_color2')))
  .fontSize(this.currentIndex == idx ? $r('app.integer.font_size2') : $r('app.integer.font_size1'))
  .fontWeight(this.currentIndex == idx ? FontWeight.Bold : FontWeight.Normal)
  .onClick(() => {
    if (this.currentIndex != idx) {
      this.wantGoIndex = idx;
      animateTo({
        duration: Math.abs(idx - this.currentIndex) * this.durationRadix,
        curve: Curve.EaseInOut,
        iterations: this.iterationsDefault,
        playMode: PlayMode.Normal,
        onFinish: () => {
          this.currentIndex = idx;
          this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.START);
        }
      }, () => {
        this.transitionX = this.getTransitionX(idx);
      })
    }
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.