@zhaoo/react-lottie v1.0.0

react-lottie

Lottie player for React

Props

参考官方

基本入参

事件入参

Ref

动画实例以及控制方法可通过 ref 实时操作。

实例

方法

type AnimationItem = {
    name: string;  // 名称
    isLoaded: boolean;  // 是否加载实例
    currentFrame: number;  // 当前播放帧
    currentRawFrame: number;  // 当前原始帧
    firstFrame: number;  // 首帧（片段播放时）
    totalFrames: number;  // 帧总数
    frameRate: number;  // 帧率（FPS）
    frameMult: number;
    playSpeed: number;  // 播放速度
    playDirection: number;  // 播放顺序
    playCount: number;  // 播放次数
    isPaused: boolean;  // 是否暂停
    autoplay: boolean;  // 是否自动播放
    loop: boolean;  // 是否循环
    renderer: any;  // 渲染方式
    animationID: string;  // ID
    assetsPath: string;  // 资源路径
    timeCompleted: number;  // 播放帧数
    segmentPos: number;  // 片段位置
    isSubframeEnabled: boolean;  // 是否开启帧优化
    segments: AnimationSegment | AnimationSegment[]; // 片段列表
}

type LottiePlayer = {
    play(name?: string): void;
    pause(name?: string): void;
    stop(name?: string): void;
    setSpeed(speed: number, name?: string): void;
    setDirection(direction: AnimationDirection, name?: string): void;
    searchAnimations(animationData?: any, standalone?: boolean, renderer?: string): void;  // 搜索动画
    loadAnimation(params: AnimationConfigWithPath | AnimationConfigWithData): AnimationItem;  // 加载动画实例
    destroy(name?: string): void;
    registerAnimation(element: Element, animationData?: any): void;  // 重新加载动画
    setQuality(quality: string | number): void;  // 设置质量
    setLocationHref(href: string): void;  // 设置跳转链接
};

高端操作

插槽

方式一（不支持Canvas渲染模式）：

首先分享个黑科技，设计师在 AE 图层命名时，如果在后面加 #xxx 或 .xxx，Lottie 就会生成对应 ID 或 Class 的元素。通过这个 ID 或 Class 就可以定位到对应 DOM 元素，做替换操作。react-lottie 做了封装操作，执行如下代码即可：

// 替换文本
ref.current.slotText({
  id: 'attention',
  text: '你好， 兆兆！'
});

// 替换图片
ref.current.slotImage({
  className: 'avatar',
  src: '...'
});

方式二：

lottie-api 提供了查找方法，可以通过“合成名称”和“图层名称”定位到 DOM 元素，做替换操作。合成名称和图层名称可以在 AE 中查看。react-lottie 做了封装操作，执行如下代码即可：

// 替换文本
ref.current.slotText({
 comp: '合成1',
 layer: '文本',
 text: '你好， 兆兆！'
});

By the way: 该方法只支持替换文本，不支持替换图像。翻了一下源码，lottie-api 作者才写了个壳...