@crello/ react-lottie (英语)
Airbnb的反射/脚本包装 乐天网 莉比,别这样.
演示
https://crello.github.io/ react-lotie/ 页面存档备份,存于互联网档案馆
您可以在 ./examples 文件夹 -- 启动方式 yarn start
安装
yarn add @crello/react-lottie 或者说 npm install --save @crello/react-lottie
使用量
最基本的反应- lottie 示例 :
import React from 'react';
import { Lottie } from '@crello/react-lottie'
import animationData from './myAwesomeAnimation.json'
export const BasicLottieComponent = () => <Lottie config={{animationData: animationData}}>
Lottie 组件创建 <div> 传递给lottie 配置为 container 一、导 言 此 div 包含渲染器的所选类型输出 : 'svg'| 'html' | 'canvas'。 。 。 . <Lottie> 接受 style 财务报告和审定财务报表 className 适用于 container。 。 。 .
任何浏览器事件都应被添加到实际包裹的元素上 <Lottie> 例如:
<div onClick={..}>
<Lottie/>
<div>
参数
道具
{
height?: string - valid css value e.g. '100px' [default: `100%`],
width?: string - valid css value e.g. '100px' [default: `100%`],
playingState?: 'playing' | 'stopped' | 'paused' [default: `playing`],
segments?: AnimationSegment | AnimationSegment[],
speed?: number - animation playback speed [default: `1`],
style?: styles passed to lottie container,
direction?: AnimationDirection - [default: `1`],
lottieEventListeners?: ReactLottieEvent[] - see available events in AnimationEventName from 'lottie-web',
config: ReactLottieConfig - config with mandatory `path` or `animationData`,
}
配置
{
animationData: any - an Object with the exported animation data,
path: string - remote data,
renderer?: 'svg' | 'canvas' | 'html' - choose renderer [default: `svg`],
loop?: boolean | number - loop boolean or count [default: `false`],
autoplay?: boolean - it will start playing as soon as it is ready [default: `true`],
name?: string - animation name for future reference,
rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig,
}
再来
详情请见@crello/ react-lotie 出口数字 : Lottie, (中文(简体) ), ReactLottieConfig, (中文(简体) ), ReactLottieOwnProps, (中文(简体) ), ReactLottiePlayingState
并检查提供的类型 lottie-web 本身: AnimationDirection, (中文(简体) ), AnimationSegment, (中文(简体) ), AnimationEventName, (中文(简体) ), AnimationEventCallback, (中文(简体) ), AnimationItem, (中文(简体) ), BaseRendererConfig, (中文(简体) ), SVGRendererConfig, (中文(简体) ), CanvasRendererConfig, (中文(简体) ), HTMLRendererConfig, (中文(简体) ), AnimationConfig, (中文(简体) ), AnimationConfigWithPath, (中文(简体) ), AnimationConfigWithData, (中文(简体) ), Lottie
更多的Lottie动画,你可以找到 乐器文件
许可证
麻省理工学院