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

​一个页面底部默认显示自定义组件A,点击自定义组件A,则A消失,自定义组件B从底部出现;点击自定义组件B,则组件B消失,A从底部出现。这个效果要如何实现?

HarmonyOS
2024-01-21 13:18:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
d_hero

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

代码示例

@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'))//resources\base\media路径 
        .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'))//resources\base\media路径 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    } 
  } 
}

参考链接

组件内转场

分享
微博
QQ
微信
回复
2024-01-22 15:33:37
相关问题
ArkTs如何自定义容器组件
677浏览 • 1回复 待解决
自定义组件嵌套子组件
7144浏览 • 3回复 待解决
js 自定义组件如何传递方法?
4102浏览 • 2回复 待解决
自定义组件如何添加图片?
625浏览 • 1回复 待解决
自定义组件如何导出、引入?
211浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
202浏览 • 1回复 待解决
如何实现H5自定义事件
137浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
122浏览 • 1回复 待解决
TextInput是否能自定义hover效果
180浏览 • 1回复 待解决
自定义如何实现序列化
85浏览 • 1回复 待解决
自定义组件什么时候销毁
65浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
6388浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
7090浏览 • 2回复 已解决
JAVA卡片怎么用自定义组件
4285浏览 • 1回复 待解决