lottie

راهنمای ساخت، خروجی‌گیری و استفاده از انیمیشن‌های Lottie و بسته‌های dotLottie

این Skill مشخصات Lottie و dotLottie را توضیح می‌دهد و برای خروجی‌گیری انیمیشن به‌صورت JSON، ساخت بسته‌های .lottie و پیاده‌سازی آن‌ها در Web، React و Remotion راهنمایی می‌کند.

با آن می‌توانید قابلیت‌ها و محدودیت‌های Lottie را بشناسید، سازگاری ویژگی‌های After Effects را بررسی کنید و بین Lottie و Rive برای پروژه‌تان انتخاب دقیق‌تری داشته باشید.

چه چیزی می‌گیرید

• راهنمای ساختار و مشخصات Lottie Spec v1.0 و dotLottie v2.0
• بررسی قابلیت‌ها، محدودیت‌ها و ویژگی‌های پشتیبانی‌شده در Lottie
• نمونه پیاده‌سازی با lottie-web، lottie-react و Remotion
• توضیح فرایند خروجی‌گیری از After Effects، Figma و ابزارهای تخصصی Lottie
• مقایسه کاربردی Lottie و Rive برای انیمیشن‌های تعاملی و ازپیش‌طراحی‌شده

برای چه کاری خوب است

• توسعه‌دهندگان Web و React که می‌خواهند انیمیشن‌های برداری را در محصول اجرا کنند
• طراحان موشن و تیم‌هایی که از After Effects یا Figma خروجی Lottie می‌گیرند
• پروژه‌هایی که به انیمیشن‌های سبک، قابل‌حمل و چندسکویی نیاز دارند

برای چه کاری نیست

• ساخت انیمیشن‌های کاملاً تعاملی با state machine؛ برای این کاربرد Rive مناسب‌تر است
• افکت‌های پیچیده سه‌بعدی یا ویژگی‌هایی که Lottie پشتیبانی نمی‌کند
• پروژه‌هایی که به تولید مستقیم فایل ویدئویی نهایی به‌جای انیمیشن قابل‌اجرا نیاز دارند

دربارهٔ این اسکیل

Lottie Specification

Industry-standard vector animation format.

Standards Reference

Format Details

File Extension: .json (legacy), .lot (IANA registered)
MIME Type: video/lottie+json
Compression: None (JSON), gzip optional

Capabilities

• Vector graphics (shapes, paths, masks)
• Keyframe animation
• Easing curves (cubic bezier)
• Layer compositions
• Text layers
• Image assets (embedded or external)
• Expressions (limited)

Limitations

• No native interactivity (requires external code)
• Limited After Effects feature support
• No state machines (use Rive for that)
• Some effects not supported (3D, certain blurs)

Creation Tools

dotLottie v2.0 Structure

.lottie (ZIP archive)
├── manifest.json          # Required
├── animations/
│   ├── animation_1.json
│   └── animation_2.json
├── images/                # Optional
└── themes/                # v2.0

When to Use Lottie vs Rive

Implementation

Web (lottie-web)

import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

React

import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie animationData={animationData} loop={true} />

Remotion

import { Lottie } from '@remotion/lottie';
import animationData from './animation.json';

<Lottie animationData={animationData} />

See references/lottie-spec.md for full specification details.
See references/dotlottie-spec.md for packaging format.
See references/supported-features.md for AE compatibility matrix.

دانلود ZIP