HarmonyOS 基础组件渲染的内容发生变化 添加fade动画

比如Text 或者Image 组件当渲染的文字或者展示的图片发生变化的时候,可以添加一个类似fade 的新值和旧值过渡的渐变动画效果

HarmonyOS
2025-01-09 14:03:23
521浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

请参考如下代码:

@Entry
@Component
struct  {
  @State opacityValue: OpacityOption = new OpacityOption(1)
  @State message: FadeProperty<Resource> = new FadeProperty($r("sys.media.return_home_fill"), this.opacityValue);
  @State text: FadeProperty<string> = new FadeProperty("hello world", this.opacityValue);

  build() {
    Column() {
      Image(this.message.value).width(100).height(100)
        .opacity(this.opacityValue.opacity)
        .onClick(() => {
          this.message.value =
            (this.message.value.id == $r("sys.media.ohos_ic_public_web").id) ? $r("sys.media.return_home_fill") :
            $r("sys.media.ohos_ic_public_web")
        })

      Text(this.text.value).fontSize(50)
        .opacity(this.opacityValue.opacity)
        .onClick(() => {
          this.text.value = this.text.value == "hello world" ? "你好世界" : "hello world"
        })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

@Observed
class OpacityOption {
  opacity: number

  constructor(opacity: number) {
    this.opacity = opacity
  }
}

class FadeProperty<T> {
  private _value: T | undefined = undefined
  opacityOption: OpacityOption

  set value(v: T) {
    if (this._value) {
      animateTo({
        duration: 250, onFinish: () => {
          this._value = v
          animateTo({ duration: 250 }, () => {
            this.opacityOption.opacity = 1
          })
        }
      }, () => {
        this.opacityOption.opacity = 0
      })
    } else {
      this._value = v
    }
  }

  get value() {
    return this._value!
  }

  constructor(value: T, opacityOption: OpacityOption) {
    this.value = value
    this.opacityOption = opacityOption
  }
}
  • 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.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
分享
微博
QQ
微信
回复
2025-01-09 16:40:55


相关问题
HarmonyOS 页面高度发生变化
810浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
1259浏览 • 1回复 待解决