HarmonyOS Text添加动画效果与预期不符

Text添加动画效果与预期不符,点击Text宽度变小时文字显示不全。

@Component
export struct AnimationToPage {
  @State flag: boolean = true;
  @State _width: Length = 200;
  @State widthSize: number = 250
  @State heightSize: number = 100

  build() {
    Column() {
      Text("宽度变大变小宽度变大变小宽度变大变小")
        .fontSize(18)
        .height(30)
        .width(this._width)
        .onClick(() => {
          animateTo({
            duration: 3000,
            curve: Curve.Linear,
            playMode: PlayMode.Normal,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this._width = this.flag ? 50 : 200
            this.flag = !this.flag;
          })
        })
        .backgroundColor("red")
        .maxLines(1)
        .clip(true)
    }
    .height("100%")
    .width("100%")
  }
}
  • 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.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
HarmonyOS
2024-12-25 12:32:52
7779浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
FengTianYa

请参考示例如下:

@Entry
@Component
export struct AnimationToPage {
  @State flag: boolean = true;
  @State _width: number = 200;
  @State _height: Length = 30;
  @State scaleNum: number = 1

  build() {
    Column() {
      Row() {
        Text("宽度变大变小宽度变大变小宽度变大变小")
          .fontSize(18)
          .height(this._height)
          .width(this._width)
          .renderFit(RenderFit.RESIZE_CONTAIN)
          .onClick(() => {
            animateTo({
              duration: 3000,
              curve: Curve.Linear,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              // this._width = this.flag ? 50 : 200
              // this._height = this.flag ? 30 : 29
              this.flag = !this.flag;
              this.scaleNum = this.flag ? 0.25 : 1
            })
          })
          .scale({ y: this.scaleNum })
          .maxLines(1)
          .clip(true)
      }.height(this._height)
      .width(this._width)
      .backgroundColor("red")
      .scale({ x: this.scaleNum })
    }
    .height("100%")
    .width("100%")
  }
}
  • 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.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
分享
微博
QQ
微信
回复
2024-12-25 14:54:07
相关问题
HarmonyOS BlendMode显示效果不符预期
835浏览 • 1回复 待解决
HarmonyOS 轨迹线样式和预期不符
656浏览 • 1回复 待解决
点击事件冒泡不符预期
1373浏览 • 1回复 待解决
RichText组件font标签size属性不符预期
2681浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
922浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
740浏览 • 1回复 待解决
HarmonyOS List动画效果
784浏览 • 1回复 待解决
HarmonyOS 列表动画效果
853浏览 • 1回复 待解决
HarmonyOS 旋转动画效果
706浏览 • 1回复 待解决
HarmonyOS 动画效果实现
1032浏览 • 1回复 待解决
HarmonyOS Text跑马灯效果问题
527浏览 • 1回复 待解决