需要：
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文件，动画是连贯的，其实并不会这么吃力。。。