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%")
  }
}
HarmonyOS
1天前
浏览
收藏 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%")
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS BlendMode显示效果不符预期
16浏览 • 1回复 待解决
点击事件冒泡不符预期
765浏览 • 1回复 待解决
HarmonyOS 轨迹线样式和预期不符
192浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
30浏览 • 1回复 待解决
RichText组件font标签size属性不符预期
1931浏览 • 1回复 待解决
HarmonyOS 列表动画效果
4浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
67浏览 • 1回复 待解决
HarmonyOS List动画效果
27浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
80浏览 • 1回复 待解决
HarmonyOS 旋转动画效果
38浏览 • 1回复 待解决
HarmonyOS 动画效果实现
38浏览 • 1回复 待解决
HarmonyOS Text跑马灯效果问题
37浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
2070浏览 • 1回复 待解决
如何实现动画转场效果
873浏览 • 1回复 待解决