HarmonyOS animateTo过渡动画问题,内部文字显示异常

代码如下:

@Entry
@Component
@Preview
export struct AnimateToExample {
  @State textWidth: Length = 300;
  @State flag: boolean = true;

  private onClick2Animate() {
    animateTo({
      duration: 3000,
      curve: Curve.Linear,
      playMode: PlayMode.Normal,
      onFinish: () => {
        console.info('play end')
      }
    }, () => {
      this.textWidth = this.flag ? 50 : 200;
      this.flag = !this.flag
    })
  }

  build() {
    Column() {
      Text("文案文案文案文案文案文案文案")
        .width(this.textWidth)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize(18)
        .fontColor("#fff")
        .height(30)
        .backgroundColor("red")
        .padding(5)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.onClick2Animate()
        })
    }.width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}
HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

示例参考如下:

// 第一步:使用@AnimatableExtend装饰器,自定义可动画属性接口
@AnimatableExtend(Text)
function animatableWidth(width: number) {
  .width(width) // 调用系统属性接口,逐帧回调函数每帧修改可动画属性的值,实现逐帧布局的效果。
}

@Entry
@Component
@Preview
export struct Test240726142703066 {
  @State textWidth: number = 300;
  @State flag: boolean = true;

  private onClick2Animate() {
    animateTo({
      duration: 3000, //动画持续时间,单位为毫秒。
      curve: Curve.Linear, //动画曲线。
      playMode: PlayMode.Normal, //动画播放模式,默认播放完成后重头开始播放。
      onFinish: () => { //动画播放完成回调。
        console.info('play end')
      }
    },
      () => { //指定动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。
        this.textWidth = this.flag ? 50 : 300;
        this.flag = !this.flag
      })
  }

  build() {
    Column() {
      Text("文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案")// .width(this.textWidth)
        .animatableWidth(this.textWidth)// 第二步:将自定义可动画属性接口设置到组件上
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize(18)
        .fontColor("#fff")
        .height(30)
        .backgroundColor("red")
        .padding(5)
        .textAlign(TextAlign.Center)
        .animation({ duration: 2000, curve: Curve.Ease })// 第三步:为自定义可动画属性接口绑定动画
        .onClick(() => {
          // this.onClick2Animate()
          this.textWidth = this.textWidth == 300 ? 50 : 300; // 第四步:改变自定义可动画属性的参数,产生动画
        })
    }
    .width("100%").height("100%").justifyContent(FlexAlign.Center)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
animateTo动画如何暂停
917浏览 • 2回复 待解决
HarmonyOSanimateTo如何结束动画
862浏览 • 2回复 待解决
HarmonyOS 文字显示问题
451浏览 • 1回复 待解决
animateTo动画如何直接停止
2564浏览 • 2回复 待解决
文字能否添加过渡色(不是背景)?
327浏览 • 1回复 待解决
HarmonyOS animateTo是否能够打断动画
55浏览 • 1回复 待解决
HarmonyOS SDK内部资源获取异常
663浏览 • 0回复 待解决
使用TextPicker控件显示异常问题
865浏览 • 1回复 待解决
HarmonyOS 弹窗显示异常
277浏览 • 1回复 待解决
HarmonyOS web页面显示异常
36浏览 • 1回复 待解决
HarmonyOS 组件尺寸显示异常
93浏览 • 1回复 待解决
HarmonyOS 路由切换页面过渡问题
394浏览 • 1回复 待解决
文字动画效果如何实现
1935浏览 • 0回复 待解决
HarmonyOS shortcuts图标显示异常
34浏览 • 1回复 待解决
Rect设置渐变显示异常
321浏览 • 0回复 待解决