React中用lottie-web自定义antdm的PullToRefresh下拉刷新动画

需求：

1、有两个AE（Adobe After Effects）生成的动画json文件；2、antdm实现的下拉刷新组件PullToRefresh；3、需要自定义自己特色的下拉刷新动画特色；

分析

1、动画1 json为刷新时的；2、动画2 json为结束时的；3、1）当动画1展示时动画2隐藏；2）松开手指动画1开始播放； 3）动画1播放结束，动画2展示并播放； 4）动画2播放结束，动画1展示但不播放；

直接上代码：

import React, { useEffect } from 'react';
import lottie from 'lottie-web';
import { PullToRefresh } from 'antd-mobile-v5';
import refreshingJson from './animationJson/refreshing.json';
import endJson from './animationJson/end.json';
import './index.scss';

let refreshingAnimation;
let endAnimation;
export default (props) => {
  // 下拉刷新动画相关
  useEffect(() => {
    // 创建绑定动画
    refreshingAnimation = lottie.loadAnimation({
      container: document.getElementById('refreshingDom'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: refreshingJson,
    });
    endAnimation = lottie.loadAnimation({
      container: document.getElementById('completeDom'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: endJson,
    });

    // 第一部分动画完成
    refreshingAnimation.addEventListener('complete', () => {
      // dom1隐藏，dom2展示
      document.getElementById('refreshingDom').style.display = 'none';
      document.getElementById('completeDom').style.display = 'unset';
      // 动画2开始从第一帧播放
      endAnimation?.goToAndPlay(0);
    });
    // 第二部分动画完成
    endAnimation.addEventListener('complete', () => {
      // dom2隐藏，dom1展示
      // 本来想用一个flag在元素上判断display，但是无效，所以只能这样
      document.getElementById('refreshingDom').style.display = 'unset';
      document.getElementById('completeDom').style.display = 'none';
    });
    // 销毁
    return () => {
      refreshingAnimation.destroy();
      endAnimation.destroy();
    }
  }, [])

  const controlAnimation = (status) => {
    if (status === 'refreshing') {
      // 动画1播放
      refreshingAnimation?.goToAndPlay(0);
    }
  }

  return <PullToRefresh
    onRefresh={onRefresh}
    completeDelay={2300} // 完成动画后延迟的时间
    headHeight={60} // 头部高度
    threshold={40} // 下拉多少高度触发
    renderText={(status) =>
      <div className="bbt_refresh_animation">
        <div id="refreshingDom"></div>
        <div id="completeDom"></div>
        {controlAnimation(status)}
      </div>
    }
  >
    <div>动画哈哈哈哈哈</div>
  </PullToRefresh>;
};

参考链接

https://zhuanlan.zhihu.com/p/...https://mobile.ant.design/zh/...https://www.jianshu.com/p/1cf...

最后的吐槽

如果两端动画的json为一个json文件，动画是连贯的，其实并不会这么费劲。。。