自定义组件间如何实现从底部滑入滑出的效果?

Question

自定义组件间如何实现从底部滑入滑出的效果

Answer 1

可以使用transition产生组件转场动画，其参数type用来设置组件变化场景，包括新增和删除；参数translate用来设置转场时的平移效果。注意：transition需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置。

示例代码

// xxx.ets 
@Entry 
@Component 
struct ComponentTransition { 
  @State flag: boolean = true; 
 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
      if (this.flag) { 
        ComponentChild1({ flag: $flag }) 
          .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } }) 
      } 
      if (!this.flag) { 
        ComponentChild2({ flag: $flag }) 
          .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } }) 
      } 
    }.height('100%').width('100%') 
  } 
} 
 
@Component 
struct ComponentChild1 { 
  @Link flag: boolean; 
 
  build() { 
    Column() { 
      Image($r('app.media.ic_banner01')) 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    } 
  } 
} 
 
@Component 
struct ComponentChild2 { 
  @Link flag: boolean; 
 
  build() { 
    Column() { 
      Image($r('app.media.ic_banner02')) 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    } 
  } 
}

参考链接

组件内转场动画