Refresh结合lottie实现下拉刷新动画

Refresh结合lottie实现下拉刷新动画

HarmonyOS
2024-05-26 14:27:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
LenZhong

使用Refresh的刷新状态作为lottie的生命周期,使用onStateChange属性来监听刷新状态RefreshStatus的变化。

1. 当RefreshStatus为1时,处于下拉中状态,在此时加载lottie动画。

2. 当RefreshStatus为3时,处于刷新中状态,在此时播放lottie动画(若开启自动播放则可以忽略此状态)。

3. 当RefreshStatus为0或4时,处于未下拉或刷新结束状态,在此时销毁lottie动画。

注意:频繁地创建lottie动画而不销毁,会造成严重的内存泄漏。

页面代码如下:

import lottie, { AnimationItem } from '@ohos/lottie' 
 
@Entry 
@Component 
export default struct RefreshTest { 
  @State isRefreshing: boolean = false 
  // 下拉刷新 
  private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D() 
  private pullDownJsonPath: string = 'common/lottie/loading.json' 
  private animateItem: AnimationItem | null = null 
  private animateName: string = "pullDownAnimate" 
 
  loadPullDownAnimation() { 
    if (!this.animateItem) { 
      this.animateItem = lottie.loadAnimation({ 
        container: this.mainCanvasRenderingContext, // 渲染上下文 
        renderer: 'canvas', // 渲染方式 
        loop: true, // 是否循环播放,默认true 
        autoplay: false, // 是否自动播放,默认true 
        name: this.animateName, 
        path: this.pullDownJsonPath, // json路径 
      }) 
    } 
  } 
 
  @Builder 
  customPullRefresh() { 
    Column() { 
      Canvas(this.mainCanvasRenderingContext) 
        .size({ width: 60, height: 60 }) 
        .onReady(() => { 
          // this.loadPullDownAnimation() 
        }) 
    } 
    .width('100%') 
    .justifyContent(FlexAlign.Center) 
  } 
 
  build() { 
    Column() { 
      Refresh({ 
        refreshing: $$this.isRefreshing, 
        offset: 0, 
        friction: 64, 
        builder: this.customPullRefresh() 
      }) { 
        Row() { 
          Text('sssssssssssssssssss') 
        }.height(1000).border({ color: Color.Black, width: 5 }) 
      } 
      .onStateChange((refreshStatus: RefreshStatus) => { 
        console.info('TEST== refreshStatus: ' + refreshStatus) 
        if (refreshStatus == 0) { // 未下拉 
          this.animateItem!.destroy() 
          this.animateItem = null 
        } 
        if (refreshStatus == 1) { // 下拉中 
          this.loadPullDownAnimation() 
        } 
        if (refreshStatus == 3) { // 刷新中 
          this.animateItem?.play(); 
        } 
        if (refreshStatus == 4) { // 刷新结束 
          setTimeout(() => { 
            this.animateItem!.destroy() 
            this.animateItem = null 
          }, 75) 
        } 
      }) 
      .onRefreshing(() => { 
        // this.loadPullDownAnimation() 
        setTimeout(() => { 
          this.isRefreshing = false 
          // this.animateItem!.destroy() 
          // this.animateItem = null 
        }, 2000) 
 
        console.log('onRefreshing test') 
      }) 
    } 
    .width('100%') 
    .height(1000).backgroundColor(Color.Pink) 
  } 
}

适配的版本信息

  • IDE:DevEco    Studio 4.1.1.500
  • SDK:HarmoneyOS    Developer Preview1
  • @ohos/lottie:2.0.10-rc.0


分享
微博
QQ
微信
回复
2024-05-27 18:17:13
相关问题
如何使用Swiper组件实现下拉刷新
203浏览 • 1回复 待解决
panGesture结合动画实现fling效果
417浏览 • 1回复 待解决
动画lottie能否设置播放次数
810浏览 • 1回复 待解决
lottie动画组件存在严重的内存泄漏
739浏览 • 1回复 待解决
refresh期望能够自定义loading动画
643浏览 • 1回复 待解决
如何实现下载断点续传
792浏览 • 0回复 待解决
有谁知道web组件如何下拉刷新
742浏览 • 1回复 待解决
tabs结合scroll实现吸顶效果
465浏览 • 1回复 待解决
下拉刷新和上拉加载的API为9的sdk
1500浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
755浏览 • 1回复 待解决
ListItemGroup 和Lazyforeach结合场景
425浏览 • 1回复 待解决
如何实现动画转场效果
408浏览 • 1回复 待解决