Lottie Creator MCP

ทางการ

Lottie Creator MCP นำผู้ช่วย AI ของคุณเข้าสู่ขั้นตอนการทำงานแอนิเมชันโดยตรง — ให้สิทธิ์เข้าถึง LottieFiles Creator อย่างเต็มรูปแบบ เพื่อให้สามารถสร้างและแก้ไขแอนิเมชัน Lottie ในนามของคุณผ่านภาษาธรรมชาติ

ดูบน lottie.link

คุณทำอะไรได้บ้างด้วย Lottie Creator MCP?

Create animations from scratch — describe an animation like a loading spinner or character motion and the AI builds it in Lottie Creator layer by layer.
Edit existing animations — ask the AI to change colors, adjust timing, swap easing curves, rename layers, or refactor a scene using the current file state.
Batch generate animation variants — produce multiple versions at once, such as dark/light themes, different sizes, or brand color variations.
Inspect animations for accessibility and brand — request analysis for contrast issues, motion speed, color consistency, or brand alignment, then apply fixes.
Manage scenes and layers — create and switch scenes, set visibility and blend modes, apply masks and mattes, and animate transforms like position, rotation, and scale.
Animate with keyframes and easing — add, read, or remove keyframes on properties such as opacity, color, and path, and set linear or cubic-bezier easing.

เอกสาร

Lottie Creator MCP

undefined

Lottie Creator MCP

Lottie Creator MCP นำผู้ช่วย AI ของคุณเข้าสู่ขั้นตอนการทำงานด้านแอนิเมชันโดยตรง — ให้สิทธิ์เข้าถึง LottieFiles Creator อย่างเต็มรูปแบบ เพื่อให้สามารถสร้างและแก้ไข Lottie แอนิเมชันแทนคุณผ่านภาษาธรรมชาติ คุณสามารถดูวิธีการติดตั้งได้ด้านล่าง

เซิร์ฟเวอร์ MCP เป็นส่วนหนึ่งของอินเทอร์เฟซมาตรฐานสำหรับเอเจนต์ AI ในการโต้ตอบกับแหล่งข้อมูลโดยใช้ Model Context Protocol Lottie Creator MCP เชื่อมต่อผู้ช่วย AI อย่าง Claude, Cursor และ Windsurf เข้ากับ Creator API ผ่านบริดจ์ภายในเครื่อง — หมายความว่า AI ของคุณจะได้รับสิทธิ์เข้าถึง Creator อย่างเต็มรูปแบบเช่นเดียวกับคุณ

เมื่อเปิดใช้งาน MCP คุณสามารถ:

✦ สร้างแอนิเมชันตั้งแต่เริ่มต้น

อธิบายสิ่งที่คุณต้องการ — สปินเนอร์โหลด, แถบความคืบหน้า, แอนิเมชันตัวละคร — แล้ว AI ของคุณจะสร้างมันขึ้นใน Creator โดยตรง ทีละเลเยอร์

✦ แก้ไขและปรับเปลี่ยนแอนิเมชันที่มีอยู่

เปลี่ยนสี, ปรับจังหวะเวลา, สลับเส้นโค้ง easing, เปลี่ยนชื่อเลเยอร์ หรือปรับโครงสร้างทั้งซีน AI ของคุณอ่านสถานะปัจจุบันของไฟล์และแก้ไขแบบเรียลไทม์

✦ สร้างแอนิเมชันหลายรูปแบบพร้อมกัน

สร้างแอนิเมชันหลายเวอร์ชันในครั้งเดียวโดยอัตโนมัติ — ธีมมืดและสว่าง, ขนาดต่างๆ, สีที่แตกต่างตามแบรนด์

✦ วิเคราะห์แอนิเมชันเพื่อการเข้าถึงและแบรนด์

ขอให้ AI ตรวจสอบแอนิเมชันเพื่อหาปัญหาคอนทราสต์, ความเร็วในการเคลื่อนไหว, ความสม่ำเสมอของสี หรือความสอดคล้องกับแนวทางแบรนด์ของคุณ — และแก้ไขสิ่งที่พบ

✦ ผสานรวมเข้ากับขั้นตอนการทำงานของโปรเจกต์

สร้างแอสเซทแอนิเมชันได้ทันทีขณะทำงานในโปรเจกต์ที่ใหญ่กว่า

หากต้องการใช้ MCP ให้ติดตั้งในไคลเอนต์ AI ของคุณและเปิดใช้งานใน LottieFiles Creator หัวข้อด้านล่างจะแนะนำแต่ละขั้นตอน

ข้อกำหนดเบื้องต้น

ก่อนการติดตั้ง ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าสิ่งต่อไปนี้:

✅ 📦 Node.js 18+: จำเป็นสำหรับการรันแพ็คเกจ MCP ผ่าน npx ดาวน์โหลด Node.js →

✅ 🎬 LottieFiles Creator: เปิด creator.lottiefiles.com ในเบราว์เซอร์ของคุณและเปิดแท็บนี้ทิ้งไว้

✅ 🤖 AI ที่รองรับ MCP: Claude, Cursor, Windsurf, VS Code Copilot หรือผู้ช่วยอื่นๆ ที่รองรับ MCP

ขั้นแรก ไปที่ ไฟล์ Creator MCP README ซึ่งคุณสามารถเข้าถึงสตริงและคำสั่ง MCP ได้

การติดตั้ง MCP

สำหรับเครื่องมือ AI ทั้งหมดของคุณ คุณสามารถใช้การกำหนดค่าต่อไปนี้:

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

เอกสารนี้ครอบคลุมขั้นตอนการติดตั้งสำหรับไคลเอนต์ MCP ที่เรารองรับบางส่วน สำหรับรายการคู่มือการติดตั้งสำหรับไคลเอนต์ MCP ที่รองรับ ดูรายการด้านล่าง:

ไคลเอนต์ MCP ที่รองรับ

ทำตามคำแนะนำสำหรับไคลเอนต์เฉพาะของคุณเพื่อติดตั้งและเชื่อมต่อ Lottie Creator MCP ไคลเอนต์บางตัวยังรองรับสกิล ซึ่งเพิ่มความรู้ด้านการออกแบบโมชันเพื่อให้ AI ของคุณสามารถสร้างแอนิเมชันที่ตั้งใจและประณีตยิ่งขึ้น 🖇️ นี่คือ สกิลการออกแบบโมชัน ของ LottieFiles

ทำตามขั้นตอนสำหรับไคลเอนต์ MCP ของคุณ:

**1. เปิดการตั้งค่า Claude Desktop**

ไปที่ **Settings → Developer** และคลิก **"Edit Config"** การดำเนินการนี้จะเปิดไฟล์กำหนดค่า JSON บนคอมพิวเตอร์ของคุณ ซึ่งคุณสามารถแก้ไขได้ใน VS Code, Cursor หรือโปรแกรมแก้ไขข้อความใดๆ

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. เพิ่มการกำหนดค่า MCP**

วางข้อความต่อไปนี้ลงในไฟล์กำหนดค่าภายในออบเจกต์ `mcpServers` คุณอาจต้องเพิ่มหรือลบวงเล็บ/เครื่องหมายจุลภาคเพื่อให้ JSON ถูกต้อง

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

นี่คือตัวอย่างลักษณะของไฟล์กำหนดค่าหลังจากวางการกำหนดค่าข้างต้น:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. ตรวจสอบว่าเชื่อมต่อแล้ว**

คลิกปุ่ม **"+"** ในแชท ไปที่ **Connectors** และยืนยันว่าสวิตช์ `lottiefiles-creator` เปิดอยู่

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ**

เพียงเท่านี้ Claude Code จะติดตั้งและลงทะเบียน MCP โดยอัตโนมัติ

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **การใช้ Lottie Creator MCP สำหรับ Cursor**

1. กด `Cmd + Shift + P` (Mac) หรือ `Ctrl + Shift + P` (Windows/Linux) → ค้นหา **"Cursor Settings"**
2. ในแถบด้านข้างไปที่ **Tools & MCPs**
3. คลิก **"Add custom MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. วาง:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

บันทึกและ **รีสตาร์ท Cursor อย่างสมบูรณ์** (ออกและเปิดใหม่ - ไม่ใช่แค่โหลดซ้ำ)

หลังจากรีสตาร์ท ไปที่ **Settings → Tools & MCP** แล้วคุณควรเห็นจุดสีเขียวถัดจาก `lottiefiles-creator` เพื่อยืนยันว่าเชื่อมต่อแล้ว

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**ตัวเลือก A: ติดตั้งผ่านดีปลิงก์**

1. คลิก [ดีปลิงก์เซิร์ฟเวอร์ LottieFiles MCP](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) การดำเนินการนี้จะเปิดการกำหนดค่า MCP ใน VS Code
2. กดปุ่ม **Install**

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**ตัวเลือก B: CLI หรือไฟล์กำหนดค่า**

หรือผ่าน CLI:

Terminal

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

หรือเพิ่มลงใน `.vscode/mcp.json` ของคุณ:

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ คุณต้องมี [GitHub Copilot](https://github.com/features/copilot) ที่เปิดใช้งานในบัญชีของคุณเพื่อใช้เครื่องมือ MCP ใน VS Code

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ทำตามเอกสารการตั้งค่า MCP ของ Antigravity และใช้การกำหนดค่าข้างต้น ทำตามเอกสารการตั้งค่า MCP ของ Cline และใช้การกำหนดค่าข้างต้น ทำตาม [คู่มือการกำหนดค่า MCP](https://github.com/openai/codex/blob/main/docs/config.md) โดยใช้:

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

หรือเพิ่มผ่าน CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. เริ่ม `copilot` 2. รัน `/mcp add` 3. กำหนดค่า: - ชื่อเซิร์ฟเวอร์: `lottiefiles-creator` - ประเภทเซิร์ฟเวอร์: `Local` - คำสั่ง: `npx -y @lottiefiles/creator-mcp@latest` ทำตามเอกสารการตั้งค่า MCP ของ VS Code และใช้การกำหนดค่าข้างต้น หรือผ่าน CLI:

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` ทำตามเอกสารการตั้งค่า MCP ของ Gemini Code Assist และใช้การกำหนดค่าข้างต้น ทำตามเอกสารการตั้งค่า MCP ของ JetBrains และใช้การกำหนดค่าข้างต้น ทำตามเอกสารการตั้งค่า MCP ของ Kiro และใช้การกำหนดค่าข้างต้น ทำตามเอกสารการตั้งค่า MCP ของ Qoder และใช้การกำหนดค่าข้างต้น เพิ่มเซิร์ฟเวอร์ MCP ในเครื่องด้วย:

- ชื่อ: `lottiefiles-creator`
- คำสั่ง: `npx`
- อาร์กิวเมนต์: `y @lottiefiles/creator-mcp@latest`

ทำตามเอกสารการตั้งค่า MCP ของ Warp และใช้การกำหนดค่าข้างต้น ทำตามเอกสารการตั้งค่า MCP ของ Windsurf และใช้การกำหนดค่าข้างต้น

การเชื่อมต่อกับ Lottie Creator

เปิด Lottie Creator

ไปที่ creator.lottiefiles.com ในเบราว์เซอร์ของคุณและเปิดแท็บนี้ทิ้งไว้ตลอดเซสชัน MCP สื่อสารกับ Creator ผ่านแท็บเบราว์เซอร์นี้

เปิดใช้งาน MCP ใน Creator

ใน Creator ไปที่ Settings → MCP Settings → Enable MCP

Lottie Creator Settings → MCP Settings with Enable MCP

ยืนยันการเชื่อมต่อ

คุณควรเห็นการแจ้งเตือนใน Creator: Local MCP bridge connected

Lottie Creator notification: Local MCP bridge connected

หากคุณเห็นข้อความนี้ แสดงว่าคุณพร้อมแล้วและสามารถเริ่มป้อนคำสั่งได้! โปรดทราบว่า คุณภาพของแอนิเมชันขึ้นอยู่กับโมเดลที่คุณใช้เป็นอย่างมาก ดังนั้นควรใช้โมเดลที่ดีที่สุดที่มีให้คุณ

Lottie Creator top bar with a blue MCP connection indicator next to the file name

เกี่ยวกับสกิล

สกิลให้คำแนะนำว่าเอเจนต์ควรจัดการกับงานแอนิเมชันอย่างไร — โดยใช้การเรียกใช้เครื่องมือ MCP ร่วมกับความรู้เชิงลึกด้านการออกแบบโมชันที่ฝังไว้เป็นคำสั่งที่ใช้ซ้ำได้

ในขณะที่ Lottie Creator MCP เปิดเผยเครื่องมือแต่ละตัว (สร้างเลเยอร์, ตั้งค่าคีย์เฟรม, ปรับการเติมสี) สกิลช่วยให้ AI ของคุณเข้าใจ วิธีการใช้เครื่องมือเหล่านั้นอย่างดี สิ่งต่างๆ เช่น การรู้ว่าเส้นโค้ง easing ใดเหมาะกับการเด้งเทียบกับการเฟด, วิธีการจัดลำดับการเข้ามาของหลายองค์ประกอบ หรือวิธีการจัดโครงสร้างจังหวะเวลาเพื่อให้แอนิเมชันรู้สึกตั้งใจมากกว่าเป็นกลไก

สกิลไม่ได้แทนที่การเชื่อมต่อ MCP หรือเพิ่มเครื่องมือใหม่ แต่ลดการคาดเดาโดยบรรจุความเชี่ยวชาญด้านการออกแบบโมชันลงในคำสั่งที่ AI ของคุณใช้โดยอัตโนมัติทุกครั้งที่ทำงานกับแอนิเมชัน

ติดตั้งสกิลการออกแบบโมชัน

รันคำสั่งนี้หนึ่งครั้งในเทอร์มินัลของคุณ ใช้งานได้กับเอเจนต์กว่า 40 ตัว รวมถึง Claude Code, Cursor, Codex และ GitHub Copilot

Terminal

npx skills add LottieFiles/motion-design-skill

✨ แนะนำอย่างยิ่ง ความแตกต่างระหว่าง AI ที่สร้างแอนิเมชันที่แข็งทื่อเป็นกลไก กับ AI ที่สร้างโมชันที่ประณีตและตั้งใจ เกือบทั้งหมดขึ้นอยู่กับว่ามีบริบทนี้หรือไม่ ติดตั้งเพียงครั้งเดียวและจะมีผลกับทุกเซสชันแอนิเมชัน

ดูสกิลฉบับเต็มบน GitHub → LottieFiles/motion-design-skill

ความสามารถ

MCP ให้ AI ของคุณเข้าถึง Creator API ได้อย่างเต็มรูปแบบ นี่คือทุกสิ่งที่สามารถทำได้:

🎬 การจัดการซีน

สร้างซีน — ตั้งชื่อ, ขนาด, อัตราเฟรม, ระยะเวลา
สลับระหว่างซีน
ตั้งค่าสีพื้นหลัง (ตัวอย่างเท่านั้น ไม่ส่งออก)
อ่านคุณสมบัติของซีน — เลเยอร์, ขนาด, อัตราเฟรม
ส่งออกซีนเป็น Lottie JSON
นำเข้า Lottie JSON, dotLottie, SVG หรือรูปภาพ

🗂 การจัดการเลเยอร์

ตั้งค่าการมองเห็น, สถานะล็อก และโฟกัส
ควบคุมจังหวะเวลา — เฟรมเริ่มต้น, เฟรมสิ้นสุด, ออฟเซ็ต
ตั้งค่าโหมดการผสม (16 โหมด รวมถึง multiply, screen, overlay)
ใช้และสร้างแอนิเมชันมาสก์และแมตต์
จัดตำแหน่งและพลิกเลเยอร์
สร้างแอนิเมชันการแปลง — ตำแหน่ง, การหมุน, มาตราส่วน, การเอียง

🔷 การสร้างรูปทรง

สี่เหลี่ยมผืนผ้า — ตำแหน่ง, ขนาด, ความมนของมุม
วงรี — ตำแหน่ง, ขนาด
รูปหลายเหลี่ยม — จุด, รัศมี, ความมน
ดาว — รัศมีภายใน/ภายนอก, จำนวนแฉก
พาธ — bezier แบบกำหนดเองพร้อมการควบคุมแทนเจนต์เต็มรูปแบบ
กลุ่ม — จัดกลุ่มรูปทรงที่มีอยู่เข้าด้วยกัน

🎨 การเติมสีและเส้นขีด

การเติมสีทึบ — RGB แบบคงที่หรือแบบแอนิเมชัน
การเติมแบบไล่ระดับสีเชิงเส้น — จุดเริ่มต้น/สิ้นสุดที่กำหนดเอง
การเติมแบบไล่ระดับสีรัศมี — มุมไฮไลต์และความยาว
เส้นขีดสีทึบและแบบไล่ระดับสี — พร้อมความกว้างที่สร้างแอนิเมชันได้
Trim paths — สร้างแอนิเมชันการวาด (เริ่มต้น %, สิ้นสุด %, ออฟเซ็ต)

⏱️ แอนิเมชันและคีย์เฟรม

เพิ่มคีย์เฟรมที่เฟรมเฉพาะพร้อมค่า
ตั้งค่าคงที่ (ไม่มีแอนิเมชัน)
อ่าน, ตรวจสอบ และลบคีย์เฟรม
ตั้งค่า easing — Linear หรือ Cubic Bezier (x1, y1, x2, y2)
สร้างแอนิเมชัน: ตำแหน่ง, การหมุน, มาตราส่วน, ความทึบ, สี, พาธ และอื่นๆ

🖼 แอสเซทและการเล่น

แสดงรายการ, โคลน และลบแอสเซท (ซีนและรูปภาพ)
อ่านคุณสมบัติของรูปภาพ — ความกว้าง, ความสูง, URI base64
เล่น, หยุดชั่วคราว และข้ามไปยังเฟรมที่ระบุ
อ่านเฟรมปัจจุบันและสถานะการเล่น
อ่านโหนดและคีย์เฟรมที่เลือก

เร็วๆ นี้: State Machines และ Motion Tokens

แนวทางปฏิบัติที่ดีที่สุด

ติดตั้งทักษะการออกแบบการเคลื่อนไหวเพื่อคุณภาพที่ดีขึ้น: MCP มอบเครื่องมือให้กับ AI ของคุณ ทักษะการออกแบบการเคลื่อนไหวมอบวิจารณญาณในการใช้งานเครื่องมือเหล่านั้นอย่างเหมาะสม — เส้นโค้ง easing, หลักการจังหวะเวลา, การออกแบบท่าเต้น หนึ่งคำสั่ง ผลลัพธ์ที่ดีขึ้นอย่างเห็นได้ชัด ทักษะการออกแบบการเคลื่อนไหวสามารถพบได้ ที่นี่
เริ่มต้นด้วย SVG ของคุณเอง จากนั้นจึงแอนิเมท: AI อาจคาดเดาไม่ได้เมื่อสร้างรูปทรงภาพประกอบจากศูนย์ เพื่อผลลัพธ์ที่ดีที่สุด ให้นำเข้าสินทรัพย์ SVG ที่มีอยู่ของคุณเข้าสู่ Creator ก่อน จากนั้นขอให้ AI ของคุณแอนิเมท วิธีนี้จะช่วยรักษาสไตล์ภาพของคุณให้สม่ำเสมอ และให้ AI มุ่งเน้นไปที่สิ่งที่มันทำได้ดีที่สุด — การเคลื่อนไหว จังหวะเวลา และการจัดลำดับ
- ทดลองใช้ลิงก์รีมิกซ์เหล่านี้
  - เหรียญตรา: https://lottie.link/metal
  - สภาพอากาศ: https://lottie.link/weather
  - กราฟ: https://lottie.link/graph
  - ตู้จดหมาย: https://lottie.link/mailbox1
ใช้โมเดลที่ดีที่สุดที่คุณมีอยู่เสมอ: คุณภาพของแอนิเมชันแปรผันตรงกับโมเดล หากคุณสามารถเข้าถึง Claude Sonnet หรือ Opus ได้ ให้ใช้แทนโมเดลที่เล็กกว่า — ความแตกต่างในการจัดการจังหวะเวลา การจัดลำดับ และการให้เหตุผลเชิงพื้นที่จะเห็นได้ชัดเจน
ตั้งชื่อเลเยอร์ของคุณก่อนที่จะป้อนพรอมต์: AI อ่านชื่อเลเยอร์ของคุณเพื่อทำความเข้าใจโครงสร้างของแอนิเมชัน เลเยอร์ที่มีชื่อดี เช่น left_arm, right_leg, bg_circle และ text_headline ช่วยให้มันกำหนดเป้าหมายองค์ประกอบที่ถูกต้อง หลีกเลี่ยงข้อผิดพลาด และจัดการอย่างเป็นระเบียบในฉากที่ซับซ้อน ชื่อทั่วไป เช่น Shape 1 หรือ Group 4 ทำให้ AI ต่อยอดงานของคุณได้อย่างแม่นยำยากขึ้น
แบ่งแอนิเมชันที่ซับซ้อนออกเป็นขั้นตอน: แทนที่จะ "สร้างแอนิเมชัน onboarding ทั้งหมดให้ฉัน" ให้ทำทีละฉาก สร้างฉาก → เพิ่มรูปทรง → เพิ่มคีย์เฟรม → ปรับแต่งจังหวะเวลา ขั้นตอนที่เล็กลงช่วยให้คุณควบคุมได้มากขึ้น และทำให้จับและแก้ไขข้อผิดพลาดได้ง่ายขึ้น
ระบุจังหวะเวลาและความรู้สึกให้ชัดเจน: "การเฟดที่นุ่มนวล" นั้นคลุมเครือ "การเฟดเข้า 400ms แบบ ease-out" ให้สิ่งที่ AI ใช้ทำงานได้ ยิ่งคุณอธิบายความรู้สึกได้มากเท่าไหร่ — ฉับไว, เด้งดึ๋ง, ช้าและแบบภาพยนตร์ — ผลลัพธ์แรกก็จะยิ่งใกล้เคียงกับสิ่งที่คุณจินตนาการมากขึ้นเท่านั้น