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