Lottie

作者 mindrally97184105b5da无许可证269 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5周前更新

Expert guidelines for implementing performant Lottie animations on the web

仅含说明Software Development Design & Creative

AI 生成的概览

在网页上实现高性能 Lottie 动画的指南，涵盖 dotLottie、React 与原生 JavaScript。

功能: 提供在网页中添加 Lottie 动画的专家指导，涵盖 dotLottie 格式选择、React 与原生 JS 播放器的安装、播放控制、懒加载、渲染器选择、交互、无障碍与清理。文档包含 React 组件示例代码以及性能与文件大小目标。产出是实施指导，而非生成的文件。
适用场景: 适用于在 Web 前端添加或优化 Lottie 动画时，尤其是涉及性能、文件大小、无障碍或 React 集成的问题。也适合开发者在渲染器、格式或加载策略之间做选择。
运行要求: 需要一个 JavaScript 或 React Web 项目，并通过 npm 安装 dotLottie 播放器包。安装依赖或转换动画可能需要网络访问。该技能不附带脚本，仅为说明文档。

Lottie Animation Guidelines

You are an expert in Lottie animations, web performance, and JavaScript. Follow these guidelines when implementing Lottie animations.

Core Principles

Use dotLottie Format

Prefer .lottie (dotLottie) format over .json - up to 90% smaller file size
dotLottie bundles all assets (images, fonts) into a single compressed file
Use the free dotLottie converter at lottiefiles.com

Installation

bash

# For Reactnpm install @lottiefiles/dotlottie-react
# For vanilla JSnpm install @lottiefiles/dotlottie-web

# For Reactnpm install @lottiefiles/dotlottie-react
# For vanilla JSnpm install @lottiefiles/dotlottie-web

React Implementation

Basic Usage

tsx

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
function Animation() {  return (    <DotLottieReact      src="/animations/loading.lottie"      loop      autoplay    />  );}

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
function Animation() {  return (    <DotLottieReact      src="/animations/loading.lottie"      loop      autoplay    />  );}

Control Animation Playback

tsx

import { DotLottieReact } from "@lottiefiles/dotlottie-react";import { useState } from "react";
function ControlledAnimation() {  const [dotLottie, setDotLottie] = useState(null);
  const dotLottieRefCallback = (dotLottie) => {    setDotLottie(dotLottie);  };
  return (    <>      <DotLottieReact        src="/animation.lottie"        dotLottieRefCallback={dotLottieRefCallback}      />      <button onClick={() => dotLottie?.play()}>Play</button>      <button onClick={() => dotLottie?.pause()}>Pause</button>      <button onClick={() => dotLottie?.stop()}>Stop</button>    </>  );}

import { DotLottieReact } from "@lottiefiles/dotlottie-react";import { useState } from "react";
function ControlledAnimation() {  const [dotLottie, setDotLottie] = useState(null);
  const dotLottieRefCallback = (dotLottie) => {    setDotLottie(dotLottie);  };
  return (    <>      <DotLottieReact        src="/animation.lottie"        dotLottieRefCallback={dotLottieRefCallback}      />      <button onClick={() => dotLottie?.play()}>Play</button>      <button onClick={() => dotLottie?.pause()}>Pause</button>      <button onClick={() => dotLottie?.stop()}>Stop</button>    </>  );}

Performance Optimization

Lazy Loading

tsx

import { useEffect, useRef, useState } from "react";import { DotLottieReact } from "@lottiefiles/dotlottie-react";
function LazyLottie({ src }) {  const [isVisible, setIsVisible] = useState(false);  const containerRef = useRef(null);
  useEffect(() => {    const observer = new IntersectionObserver(      ([entry]) => {        if (entry.isIntersecting) {          setIsVisible(true);          observer.disconnect();        }      },      { rootMargin: "100px" }    );
    if (containerRef.current) {      observer.observe(containerRef.current);    }
    return () => observer.disconnect();  }, []);
  return (    <div ref={containerRef}>      {isVisible && <DotLottieReact src={src} autoplay loop />}    </div>  );}

import { useEffect, useRef, useState } from "react";import { DotLottieReact } from "@lottiefiles/dotlottie-react";
function LazyLottie({ src }) {  const [isVisible, setIsVisible] = useState(false);  const containerRef = useRef(null);
  useEffect(() => {    const observer = new IntersectionObserver(      ([entry]) => {        if (entry.isIntersecting) {          setIsVisible(true);          observer.disconnect();        }      },      { rootMargin: "100px" }    );
    if (containerRef.current) {      observer.observe(containerRef.current);    }
    return () => observer.disconnect();  }, []);
  return (    <div ref={containerRef}>      {isVisible && <DotLottieReact src={src} autoplay loop />}    </div>  );}

Choose the Right Renderer

tsx

// SVG renderer - best quality, good for simple animations<DotLottieReact src="/animation.lottie" renderer="svg" />
// Canvas renderer - better performance for complex animations<DotLottieReact src="/animation.lottie" renderer="canvas" />
// Use canvas for:// - Complex animations with many elements// - Lower-powered devices// - Animations with filters/effects

// SVG renderer - best quality, good for simple animations<DotLottieReact src="/animation.lottie" renderer="svg" />
// Canvas renderer - better performance for complex animations<DotLottieReact src="/animation.lottie" renderer="canvas" />
// Use canvas for:// - Complex animations with many elements// - Lower-powered devices// - Animations with filters/effects

Reduce DOM Elements

Reuse identical graphic elements in After Effects
Simplify paths and reduce keyframes
Avoid unnecessary layers
Target under 1000 DOM elements per animation

Animation Design Best Practices

Avoid Performance-Heavy Features

AVOID:- Masks (use alpha matte sparingly)- Complex blur effects- 3D layers- Expressions- Uncompressed images- Large image assets
PREFER:- Simple shapes (fills, strokes)- Transform animations (position, scale, rotation)- Opacity changes- Path animations

AVOID:- Masks (use alpha matte sparingly)- Complex blur effects- 3D layers- Expressions- Uncompressed images- Large image assets
PREFER:- Simple shapes (fills, strokes)- Transform animations (position, scale, rotation)- Opacity changes- Path animations

Optimize Images in Animations

- Compress images to match display size- If max display is 400x400, don't use 1000x1000 images- Use vector graphics when possible- Consider converting images to shapes

- Compress images to match display size- If max display is 400x400, don't use 1000x1000 images- Use vector graphics when possible- Consider converting images to shapes

Interactivity

Cursor/Mouse Interaction

Scroll-Linked Animation

tsx

import { useScroll, useTransform } from "motion/react";
function ScrollLottie() {  const { scrollYProgress } = useScroll();  const [dotLottie, setDotLottie] = useState(null);
  useEffect(() => {    if (!dotLottie) return;
    const unsubscribe = scrollYProgress.on("change", (progress) => {      dotLottie.setFrame(progress * dotLottie.totalFrames);    });
    return unsubscribe;  }, [dotLottie, scrollYProgress]);
  return (    <DotLottieReact      src="/scroll-animation.lottie"      dotLottieRefCallback={setDotLottie}      autoplay={false}    />  );}

import { useScroll, useTransform } from "motion/react";
function ScrollLottie() {  const { scrollYProgress } = useScroll();  const [dotLottie, setDotLottie] = useState(null);
  useEffect(() => {    if (!dotLottie) return;
    const unsubscribe = scrollYProgress.on("change", (progress) => {      dotLottie.setFrame(progress * dotLottie.totalFrames);    });
    return unsubscribe;  }, [dotLottie, scrollYProgress]);
  return (    <DotLottieReact      src="/scroll-animation.lottie"      dotLottieRefCallback={setDotLottie}      autoplay={false}    />  );}

Segment Playback

tsx

function SegmentAnimation() {  const [dotLottie, setDotLottie] = useState(null);
  const playSegment = (start, end) => {    dotLottie?.setSegment(start, end);    dotLottie?.play();  };
  return (    <>      <DotLottieReact        src="/multi-state.lottie"        dotLottieRefCallback={setDotLottie}        autoplay={false}      />      <button onClick={() => playSegment(0, 30)}>State 1</button>      <button onClick={() => playSegment(30, 60)}>State 2</button>    </>  );}

function SegmentAnimation() {  const [dotLottie, setDotLottie] = useState(null);
  const playSegment = (start, end) => {    dotLottie?.setSegment(start, end);    dotLottie?.play();  };
  return (    <>      <DotLottieReact        src="/multi-state.lottie"        dotLottieRefCallback={setDotLottie}        autoplay={false}      />      <button onClick={() => playSegment(0, 30)}>State 1</button>      <button onClick={() => playSegment(30, 60)}>State 2</button>    </>  );}

Accessibility

Respect Reduced Motion

tsx

function AccessibleAnimation() {  const prefersReducedMotion = window.matchMedia(    "(prefers-reduced-motion: reduce)"  ).matches;
  if (prefersReducedMotion) {    return <img src="/static-fallback.svg" alt="Animation description" />;  }
  return (    <DotLottieReact      src="/animation.lottie"      autoplay      loop      aria-label="Decorative loading animation"    />  );}

function AccessibleAnimation() {  const prefersReducedMotion = window.matchMedia(    "(prefers-reduced-motion: reduce)"  ).matches;
  if (prefersReducedMotion) {    return <img src="/static-fallback.svg" alt="Animation description" />;  }
  return (    <DotLottieReact      src="/animation.lottie"      autoplay      loop      aria-label="Decorative loading animation"    />  );}

Provide Fallbacks

tsx

function AnimationWithFallback() {  const [hasError, setHasError] = useState(false);
  if (hasError) {    return <img src="/fallback.gif" alt="Animation" />;  }
  return (    <DotLottieReact      src="/animation.lottie"      autoplay      onError={() => setHasError(true)}    />  );}

function AnimationWithFallback() {  const [hasError, setHasError] = useState(false);
  if (hasError) {    return <img src="/fallback.gif" alt="Animation" />;  }
  return (    <DotLottieReact      src="/animation.lottie"      autoplay      onError={() => setHasError(true)}    />  );}

Loading Strategy

Use Preloader for Large Animations

tsx

function AnimationWithPreloader() {  const [isLoaded, setIsLoaded] = useState(false);
  return (    <div className="animation-container">      {!isLoaded && (        <img src="/first-frame.webp" alt="" className="preloader" />      )}      <DotLottieReact        src="/large-animation.lottie"        onLoad={() => setIsLoaded(true)}        style={{ opacity: isLoaded ? 1 : 0 }}        autoplay      />    </div>  );}

function AnimationWithPreloader() {  const [isLoaded, setIsLoaded] = useState(false);
  return (    <div className="animation-container">      {!isLoaded && (        <img src="/first-frame.webp" alt="" className="preloader" />      )}      <DotLottieReact        src="/large-animation.lottie"        onLoad={() => setIsLoaded(true)}        style={{ opacity: isLoaded ? 1 : 0 }}        autoplay      />    </div>  );}

File Size Guidelines

Cleanup

Proper Cleanup in React

Best Practices Summary

Use dotLottie format for smaller file sizes
Lazy load animations not in viewport
Use canvas renderer for complex animations
Avoid masks, blurs, and expressions
Compress and optimize image assets
Respect reduced motion preferences
Provide static fallbacks for errors
Clean up animations on unmount
Keep DOM element count low
Use preloaders for large animations

来源与署名

来源：mindrally/skills位于lottie提交9718410

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Animation Complexity	Target Size	Max DOM Elements
Simple icons	< 10KB	< 100
UI animations	< 50KB	< 500
Complex scenes	< 150KB	< 1500
Hero animations	< 300KB	< 2500

Lottie

Lottie Animation Guidelines

Core Principles

Use dotLottie Format

Installation

React Implementation

Basic Usage

Control Animation Playback

Performance Optimization

Lazy Loading

Choose the Right Renderer

Reduce DOM Elements

Animation Design Best Practices

Avoid Performance-Heavy Features

Optimize Images in Animations

Interactivity

Cursor/Mouse Interaction

Scroll-Linked Animation

Segment Playback

Accessibility

Respect Reduced Motion

Provide Fallbacks

Loading Strategy

Use Preloader for Large Animations

File Size Guidelines

Cleanup

Proper Cleanup in React

Best Practices Summary

来源与署名

更多来自 mindrally/skills 的技能

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices