官网首页上难免会有一些比较炫酷的 动画效果,代码控制太复杂且不需求交互,gif 又会失真,直接使用 lottie 一劳永逸;
之前只在 小程序 端 用过 lottie ,官网上写的很清楚,主要是 处理一下兼容和兜底方案;
将设计是给的 lottie json 传到 生成代码 可以预览效果,也会生成代码;
出现如下情况,需要设计师上传贴图:
代码段:
import React from '@alipay/bigfish/react';
import '@lottiefiles/lottie-player';
export default () => {
const animationData =
'https://gw.alipayobjects.com/os/bmw-prod/f3eb9918-d36f-44da-8ee0-ec35c07c3809.json';
return (
{/* @ts-ignore */}
<lottie-player
autoplay // 自动播放
loop // 循环
data-aspm-click="d153153"
mode="normal"
src={animationData}
style={{ width: 177, height: 104, cursor: 'pointer' }}
onClick={() => Login()}
/>
);
};