一,引入lottie库
点击查看代码
npm i --save react-lottie @types/react-lottie
二,下载lottie的json文件
去iconfont.cn中可以在库中下载lottie文件(注意版权问题)
三,在项目中使用lottie
点击查看代码
import * as React from "react";
import Lottie from "react-lottie";
import * as myLottie from "../../assets/lottie.json";
export interface HelloProps {
compiler: string;
framework: string;
}
// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
render() {
const options = {
loop: true,
autoplay: true,
animationData: myLottie,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div>
<h1>
Hello from {this.props.compiler} and {this.props.framework}!
</h1>
<Lottie options={options} height={100} width={100} />
</div>
);
}
}