HarmonyOS 列表动画效果

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

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

animateTo({ duration: 500 }, () => {
  this.isATShown = false
})
  • 1.
  • 2.
  • 3.

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

.transition(TransitionEffect.translate({y: 1})) 
  • 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)
  }
}
  • 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.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
分享
微博
QQ
微信
回复
2024-12-26 17:55:33


相关问题
HarmonyOS List动画效果
499浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
474浏览 • 1回复 待解决
HarmonyOS 旋转动画效果
387浏览 • 1回复 待解决
HarmonyOS 动画效果实现
621浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
358浏览 • 1回复 待解决
HarmonyOS clipShape 动画效果实现
167浏览 • 0回复 待解决
属性动画如何实现宽高动画效果
2412浏览 • 1回复 待解决
如何实现动画转场效果
1363浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
826浏览 • 1回复 待解决
HarmonyOS 如何实现列表的上拉效果
391浏览 • 1回复 待解决
HarmonyOS grid拖拽和增删动画效果
533浏览 • 1回复 待解决
HarmonyOS 拍摄录制的动画效果
299浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
709浏览 • 1回复 待解决
如何实现列表页的单选效果
2623浏览 • 0回复 待解决
panGesture结合动画实现fling效果
1289浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
795浏览 • 1回复 待解决
文字动画效果如何实现
2247浏览 • 0回复 待解决
HarmonyOS Text添加动画效果与预期不符
502浏览 • 1回复 待解决