HarmonyOS 组件怎么实现上拉和下拉动画效果

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可参考以下demo:

import curves from '@ohos.curves';

@Entry
@Component
struct TransitionEffectDemo {
  @State isPresent: boolean = false;

  // 第一步,创建TransitionEffect
  private effect: TransitionEffect =
    // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) })
      // 通过combine方法,这里的动画参数会跟随上面的TransitionEffect,也就是springMotion(0.6, 0.8)
      // .combine(TransitionEffect.scale({ x: 0, y: 0 }))
      // 添加旋转转场效果,这里的动画参数会跟随上面带animation的TransitionEffect,也就是springMotion(0.6, 0.8)
      // .combine(TransitionEffect.rotate({ angle: 90 }))
      // 添加平移转场效果,这里的动画参数使用指定的springMotion()
      .combine(TransitionEffect.translate({ y: -150 }).animation({ curve: curves.springMotion() }))
  // 添加move转场效果,这里的动画参数会跟随上面的TransitionEffect,也就是springMotion()
  // .combine(TransitionEffect.move(TransitionEdge.END))

  build() {
    Stack() {
      if (this.isPresent) {
        Column() {
          Text('ArkUI')
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        // 第二步:将转场效果通过transition接口设置到组件
        .transition(this.effect)
      }

      // 边框
      Column()
        .width(155)
        .height(155)
        .border({
          width: 5,
          radius: 10,
          color: Color.Black
        })

      // 第三步:新增或者删除组件触发转场,控制新增或者删除组件
      Button('Click')
        .margin({ top: 320 })
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .width('100%')
    .height('60%')
  }
}

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-enter-exit-transition-V5

分享
微博
QQ
微信
回复
2天前
相关问题
加载,下拉刷新组件
452浏览 • 1回复 待解决
HarmonyOS 如何实现列表的效果
63浏览 • 1回复 待解决
HarmonyOS 下拉刷新,加载功能
41浏览 • 1回复 待解决
HarmonyOS 下拉刷新,加载示例
45浏览 • 1回复 待解决
下拉刷新和加载的API为9的sdk
2812浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
10537浏览 • 2回复 待解决
HarmonyOS 动画效果实现
38浏览 • 1回复 待解决
HarmonyOS 加载更多
65浏览 • 1回复 待解决