HarmonyOS 列表动画效果

HarmonyOS
2024-12-26 14:39:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

第一步:判断@列表是否展示的标识,在切换时,外层嵌套animateTo方法,如:

animateTo({ duration: 500 }, () => {
  this.isATShown = false
})

第二步:@列表所在组件(Scroll),增加属性:

.transition(TransitionEffect.translate({y: 1})) 

第三步:确保@列表所在组件(Scroll)下方的组件均有背景颜色,避免出现遮盖不住的情况。示例代码:

// xxx.ets
@Entry
@Component
struct AttrAnimationExample {
  @State scrollShow: boolean = false
  build() {
    Stack(){
      Column() {
        Button('@')
          .onClick(() => {
            animateTo({ duration: 1000 }, () => {
              // 动画闭包内控制Image组件的出现和消失
              this.scrollShow = !this.scrollShow
            })

          })
          .margin(30)
        if(this.scrollShow) {
          Scroll(){
            Column().width(40).height(90).backgroundColor(Color.Red)
          }
          .width('100%')
          .backgroundColor('#eee')
          .transition(TransitionEffect.translate({y: 1}))
        }
        Column()
          .width('100%')
          .height(300)
          .backgroundColor('#ccc')
      }.width('100%')
    }
    .width('100%')
    .height('100%')
    .align(Alignment.Bottom)
  }
}
分享
微博
QQ
微信
回复
2024-12-26 17:55:33
相关问题
HarmonyOS 动画效果+手势
399浏览 • 1回复 待解决
HarmonyOS List动画效果
402浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
273浏览 • 1回复 待解决
HarmonyOS 旋转动画效果
286浏览 • 1回复 待解决
HarmonyOS 动画效果实现
492浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
2302浏览 • 1回复 待解决
如何实现动画转场效果
1248浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
747浏览 • 1回复 待解决
HarmonyOS 如何实现列表的上拉效果
281浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
572浏览 • 1回复 待解决
HarmonyOS grid拖拽和增删动画效果
444浏览 • 1回复 待解决
HarmonyOS 拍摄录制的动画效果
224浏览 • 1回复 待解决
如何实现列表页的单选效果
2578浏览 • 0回复 待解决
文字动画效果如何实现
2174浏览 • 0回复 待解决
Tabs 出现/消失转场动画效果
727浏览 • 1回复 待解决
panGesture结合动画实现fling效果
1159浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
433浏览 • 1回复 待解决
HarmonyOS Text添加动画效果与预期不符
413浏览 • 1回复 待解决