HarmonyOS应用开发-ets组件内转场

鸿蒙时代
发布于 2022-2-22 10:55
浏览
0收藏

HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

一、组件转场主要通过transition属性进行配置转场参数,在组件插入和删除时进行过渡动效,主要用于容器组件子组件插入删除时提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
transition入参说明:
HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
TransitionType枚举说明:
HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
二、示例
效果展示:
HarmonyOS应用开发-ets组件内转场-鸿蒙开发者社区
示例代码:
index.ets

@Entry
@Component
struct TransitionExample {
  @State btn1: boolean = false
  @State show: string = "show"
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
      Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.btn1 = !this.btn1
            if(this.btn1){
              this.show = "关闭"
            }else{
              this.show = "展开"
            }
          })
        })
      if (this.btn1) {
        // 插入和删除配置为不同的过渡效果
        Button() {
          Image($rawfile('YZ.jpg')).width("80%").height(300)
        }.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
        .transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
      }
    }.height(400).width("100%").padding({top:100})
  }
}

完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/ComponentTransitionAnimation

分类
标签
HarmonyOS应用开发-ets组件内转场.docx 97.09K 11次下载
2
收藏
回复
举报
回复
    相关推荐