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
2024-12-25 12:38:57
浏览
收藏 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
微信
回复
2024-12-25 15:35:56
相关问题
animateTo动画如何直接停止
2691浏览 • 2回复 待解决
HarmonyOSanimateTo如何结束动画
1117浏览 • 2回复 待解决
HarmonyOS 文字显示问题
545浏览 • 1回复 待解决
animateTo动画如何暂停
1022浏览 • 2回复 待解决
HarmonyOS animateTo是否能够打断动画
164浏览 • 1回复 待解决
文字能否添加过渡色(不是背景)?
377浏览 • 1回复 待解决
HarmonyOS SDK内部资源获取异常
897浏览 • 0回复 待解决
使用TextPicker控件显示异常问题
967浏览 • 1回复 待解决
文字动画效果如何实现
2105浏览 • 0回复 待解决
HarmonyOS Text显示异常
60浏览 • 1回复 待解决
HarmonyOS 弹窗显示异常
329浏览 • 1回复 待解决
文字背景颜色渐变显示
2357浏览 • 1回复 待解决
HarmonyOS 路由切换页面过渡问题
523浏览 • 1回复 待解决
HarmonyOS animateTo的duration无效
129浏览 • 1回复 待解决