Harmony/OpenHarmony应用开发-转场动画组件内转场

鸿蒙时代
发布于 2022-12-28 16:16
浏览
0收藏

组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
说明:从API Version 7开始支持。开发语言ets.
Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区
Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区
示例代码:

@Entry
@Component
struct TransitionAnimation_zj {
  @State flag: boolean = true
  @State show: string = 'show'

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          // 点击Button控制Image的显示和消失
          animateTo({ duration: 1000 }, () => {
            if (this.flag) {
              this.show = 'hide'
            } else {
              this.show = 'show'
            }
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        // Image的显示和消失配置为不同的过渡效果
        Image($r('app.media.icon')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }.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.

示例效果:
Harmony/OpenHarmony应用开发-转场动画组件内转场-鸿蒙开发者社区

参考地址:
https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-transition-animation-component-0000001430161145-V3

标签
HarmonyOpenHarmony应用开发-转场动画组件.docx 88.73K 13次下载
1
收藏
回复
举报
1


回复
    相关推荐