Cách chọn và kết xuất hiệu ứng chuyển động với Awesome AI Motion

Awesome AI Motion là gì?

Awesome AI Motion là một cẩm nang hướng dẫn về lĩnh vực thiết kế chuyển động, được xây dựng cho cả con người và các tác nhân lập trình AI. Thay vì chỉ chọn hoạt ảnh dựa trên diện mạo, bạn có thể bắt đầu từ điều mà một cảnh cần truyền đạt, sau đó chọn hiệu ứng, công thức hoặc hướng thiết kế phù hợp.

Kho lưu trữ này gồm 637 kỹ thuật, 128 đoạn tham khảo, 11 công thức và 7 hướng thiết kế. Mỗi thẻ hiệu ứng có thể bao gồm định nghĩa, các tham số đã tinh chỉnh, ví dụ, tài liệu tham khảo nguồn và prompt dành cho Claude Code và Codex.

Cẩm nang hữu ích khi bạn cần thiết kế cảnh giới thiệu sản phẩm, chuỗi tiêu đề, phần mở đầu nội dung giáo dục, đoạn mở đầu video ngắn, câu chuyện dữ liệu, phần trình diễn giao diện người dùng hoặc các cảnh chuyển động khác.

Tính năng chính

• Thẻ hiệu ứng dễ đọc với AI: Các tác nhân có thể kiểm tra một thẻ trước khi điều chỉnh chuyển động của thẻ đó.
• Tài liệu tham khảo đã kết xuất: Hiệu ứng đã kết xuất có thể bao gồm sân khấu HTML, đoạn phim MP4, bản xem trước GIF động và hình ảnh áp phích.
• Khám phá theo mục đích: Các bảng quyết định giúp bạn chọn chuyển động dựa trên mục tiêu hoặc phương tiện của cảnh.
• Công thức kết hợp: Các công thức cho thấy nhiều hiệu ứng phối hợp với nhau như thế nào trong một cảnh được định thời gian.
• Hướng thiết kế: Các tài liệu hướng dẫn giúp lập kế hoạch cho những sản phẩm lớn hơn như video quảng bá, video ngắn và slide trình chiếu. Các tài liệu này được viết bằng tiếng Hàn.
• So sánh trong trình duyệt: Website của dự án hỗ trợ lọc, phát chậm và so sánh tối đa bốn đoạn phim.
• Kết xuất cục bộ: Tập lệnh kết xuất được cung cấp có thể tạo các bản sao tùy chỉnh mà không thay đổi hiệu ứng tham khảo.
• Siêu dữ liệu có cấu trúc: Tệp index.json chuẩn giúp bạn có thể truy vấn trực tiếp danh mục.

Ví dụ về các chuyển động hiện có

Bộ sưu tập bao gồm nhiều loại chuyển động, từ chuyển động máy quay và kiểu chữ đến chuyển cảnh, hiệu ứng xuất hiện, thị sai, hiệu ứng ánh sáng và biến đổi hình dạng. Một số ví dụ nổi bật gồm Infinite Canvas Pan, Camera Fly-through, Infinite Zoom, Kinetic Type Sweep, Giant Mask Reveal, Morph Match Cut, Noise Dissolve, Ken Burns và Particle Scatter & Assemble.

Particle Scatter & Assemble là một trong những hiệu ứng tham khảo đã kết xuất của kho lưu trữ.

Chọn điểm bắt đầu phù hợp

Kho lưu trữ cung cấp nhiều điểm truy cập. Hãy chọn một điểm tùy theo nhiệm vụ bạn muốn hoàn thành:

• Website: duyệt, phát, lọc, làm chậm và so sánh trực quan các đoạn phim.
• Nội dung tài liệu: điều hướng cẩm nang mà không cần mở từng thẻ hiệu ứng.
• Danh mục đầy đủ: xem các kỹ thuật được nhóm theo dòng chuyển động và kiểm tra tình trạng đoạn phim.
• Bảng quyết định: chọn hiệu ứng theo mục đích hoặc phương tiện.
• Công thức: kết hợp các hiệu ứng thành một cảnh hoàn chỉnh có định thời gian.
• Hướng thiết kế: lập kế hoạch cho một sản phẩm chuyển động quy mô lớn hơn.
• Quy trình tác nhân: thực hiện quy trình gồm xác định mục đích, chọn thẻ, điều chỉnh, kết xuất và xác minh.

Cài đặt và thiết lập

Bước 1: Sao chép cẩm nang

Sao chép kho lưu trữ và truy cập vào thư mục của kho:

git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motion

Bạn không cần cài đặt dependency chỉ để duyệt website, đọc các thẻ hiệu ứng hoặc kết nối cẩm nang dưới dạng kỹ năng cho tác nhân.

Bước 2: Chuẩn bị dependency kết xuất tùy chọn

Kết xuất cục bộ yêu cầu Node.js 20 trở lên, ffmpeg trong đường dẫn hệ thống và Playwright với Chromium. Chỉ chạy các lệnh sau khi những dependency này chưa có:

npm install
npx playwright install chromium
ffmpeg -version

Bước cài đặt package là tùy chọn nếu Playwright đã có sẵn trên toàn hệ thống. Bạn cũng có thể bỏ qua lệnh cài đặt Chromium khi đã có bản cài đặt Chromium phù hợp.

Bước 3: Kết nối cẩm nang với Claude Code

Tạo thư mục kỹ năng của Claude Code và liên kết kho lưu trữ vào đó:

mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motion

Liên kết tượng trưng rất thuận tiện vì kỹ năng sử dụng bản checkout hiện tại. Nếu môi trường của bạn không phù hợp với liên kết, hãy sao chép thư mục thay thế:

mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motion

Chỉ chọn một phương thức và đảm bảo đường dẫn đích chưa được sử dụng. Với Codex, hãy đặt cùng liên kết hoặc bản sao vào ~/.codex/skills/.

Một skill được sao chép sẽ không tự động nhận các thay đổi về sau trong repository. Hãy cập nhật hoặc thay thế bản sao khi hướng dẫn thay đổi.

Cách sử dụng cơ bản

Yêu cầu agent chọn một hiệu ứng

Mô tả mục tiêu giao tiếp của cảnh, sau đó yêu cầu agent tham khảo thẻ hiệu ứng phù hợp và giữ nguyên các giá trị mặc định đã được tinh chỉnh. Ví dụ:

Chọn chuyển động cho phần giới thiệu sản phẩm. Đọc thẻ hiệu ứng và sử dụng các tham số mặc định.

Yêu cầu này cung cấp cho agent một mục đích rõ ràng, hướng agent đến phần triển khai đã được ghi chép và tránh việc đoán các giá trị hoạt ảnh tùy ý.

Bạn cũng có thể diễn đạt yêu cầu theo các mục tiêu khác mà không cần chỉ định trước một hiệu ứng:

Chọn chuyển động cho phần mở đầu mang tính giáo dục. Xem lại hướng dẫn và xác định hiệu ứng hoặc công thức phù hợp trước khi điều chỉnh.

Hướng dẫn bao gồm các ví dụ về công thức như Phần mở đầu giáo dục, Hook Shorts, Mở đầu tiêu đề, Demo giao diện sản phẩm, Câu chuyện dữ liệu, Giải thích khái niệm, Trước và sau, và Cảnh cuộn dạng thẻ.

Đọc thủ công một thẻ hiệu ứng

Mỗi thẻ nằm tại:

effects/<slug>/README.md

Ví dụ, thẻ hiệu ứng chuyển cảnh mặt nạ nằm tại effects/mask-reveal/README.md. Hãy đọc định nghĩa, tham số, ví dụ, prompt và nguồn của thẻ trước khi sửa đổi hiệu ứng. Khi một hiệu ứng có các tệp phương tiện đã render, thư mục của hiệu ứng cũng có thể chứa:

• index.html cho sân khấu chuyển động
• clip.mp4 cho đầu ra video
• preview.gif cho bản xem trước động
• poster.jpg cho hình ảnh tĩnh

Render clip tùy chỉnh đầu tiên

Chạy trình render được cung cấp cho hiệu ứng chuyển cảnh mặt nạ. Lệnh này thay đổi văn bản hiển thị, tạo một sân khấu có thể nhúng và ghi kết quả vào một thư mục staging riêng:

node scripts/render.mjs effects/mask-reveal \
  --embed --text "Make it move" --out .staging/my-first-motion

Sau khi render, hãy kiểm tra các tệp được tạo:

• .staging/my-first-motion/clip.mp4
• .staging/my-first-motion/preview.gif
• .staging/my-first-motion/poster.jpg

Vì đầu ra được ghi vào .staging/my-first-motion, hiệu ứng gốc vẫn nguyên vẹn và có thể tái sử dụng.

Quy trình lựa chọn thực tế

1. Xác định mục đích của cảnh. Quyết định liệu chuyển động cần giới thiệu sản phẩm, thiết lập thứ bậc, giải thích một khái niệm, thể hiện sự biến đổi hay hướng sự chú ý.
2. Duyệt hoặc truy vấn danh mục. Sử dụng website để khám phá trực quan, các bảng quyết định để lựa chọn theo mục đích hoặc index.json để đọc siêu dữ liệu có cấu trúc.
3. Mở thẻ hiệu ứng. Xem lại định nghĩa, các tham số đã tinh chỉnh, ví dụ, prompt và tham chiếu nguồn.
4. Kiểm tra công thức khi một hiệu ứng là chưa đủ. Các công thức minh họa cách sắp xếp hiệu ứng thành một cảnh có thời lượng.
5. Điều chỉnh một bản sao. Giữ nguyên phần triển khai tham chiếu và gửi các tệp được tạo vào một thư mục đầu ra riêng.
6. Render và xác minh. Kiểm tra MP4, GIF, poster và sân khấu thay vì chỉ giả định đầu ra chính xác dựa trên mã nguồn.

Mẹo nâng cao

So sánh các ứng viên trước khi quyết định

Sử dụng website của dự án để so sánh tối đa bốn clip. Phát chậm có thể giúp đánh giá thời điểm, easing, masking và chuyển cảnh dễ hơn. Điều này đặc biệt hữu ích khi nhiều kỹ thuật cùng đáp ứng một mục tiêu giao tiếp nhưng tạo ra mức độ năng lượng hoặc nhấn mạnh khác nhau.

Bắt đầu với giá trị mặc định rồi điều chỉnh

Các thẻ hiệu ứng cung cấp các tham số đã được tinh chỉnh. Yêu cầu agent bắt đầu với những giá trị đó trước khi thay đổi thời điểm hoặc cách trình bày. Điều này giữ nguyên hành vi dự kiến và cung cấp một cơ sở ổn định để đánh giá các thay đổi về sau.

Giữ đầu ra được tạo bên ngoài các thư mục tham chiếu

Không ghi các bản render tùy chỉnh vào effects/ hoặc recipes/. Hãy sử dụng một vị trí như .staging/ để các clip tham chiếu vẫn nguyên vẹn và những thay đổi trong repository dễ kiểm tra hơn.

Sử dụng công thức cho các cảnh hoàn chỉnh

Một hiệu ứng riêng lẻ thể hiện một kỹ thuật chuyển động, còn một công thức kết hợp nhiều kỹ thuật thành một chuỗi. Hãy bắt đầu bằng một công thức khi sản phẩm cần có phần mở đầu, chuyển cảnh, phần nội dung và phần kết thay vì chỉ một hoạt ảnh riêng lẻ.

Sử dụng dữ liệu có cấu trúc để tự động hóa

index.json ở cấp gốc là danh mục chuẩn. Các công cụ và agent có thể đọc trực tiếp tệp này thay vì thu thập dữ liệu từ các trang thẻ. Danh mục đầy đủ phù hợp hơn với việc duyệt thủ công vì nhóm các kỹ thuật theo nhóm chuyển động và báo cáo trạng thái clip.

Duy trì skill được liên kết và skill được sao chép theo cách khác nhau

Liên kết tượng trưng tiếp tục trỏ đến bản checkout của bạn, vì vậy việc kéo các bản cập nhật từ repository cũng cập nhật nội dung mà agent đọc. Skill được sao chép là độc lập và phải được làm mới thủ công sau khi hướng dẫn nguồn thay đổi.

Xác thực các đóng góp cho danh mục

Khi thêm hiệu ứng, cải thiện giá trị mặc định hoặc cập nhật clip tham chiếu, hãy làm theo hướng dẫn đóng góp của repository. Cập nhật nguồn hoặc trình tạo liên quan thay vì xem tài liệu được tạo là nguồn dữ liệu chính. Sau đó, tạo lại và kiểm tra dự án:

node scripts/build.mjs
node scripts/check.mjs

Các đóng góp nên giữ cho chuyển động dễ theo dõi, sử dụng sân khấu dùng chung và xác minh kết quả được kết xuất.

Kiểm tra giấy phép trước khi phân phối lại

Tác phẩm gốc của dự án được cấp phép theo MIT. Các tham chiếu nguồn và giấy phép của thành phần được ghi trong ATTRIBUTIONS.md và trên từng thẻ hiệu ứng. GSAP và các phông chữ đi kèm vẫn giữ giấy phép riêng, vì vậy hãy tham khảo thông tin ghi công trước khi phân phối lại những tài sản đó.

Kết luận

Awesome AI Motion biến một thư viện tham khảo chuyển động lớn thành quy trình thực tế cho con người và các tác nhân lập trình. Hãy bắt đầu từ mục đích của cảnh, chọn một hiệu ứng hoặc công thức đã được ghi chép, giữ nguyên các giá trị mặc định đã tinh chỉnh, kết xuất vào một thư mục riêng và xác minh các tài sản thu được. Quy trình này giúp bạn chuyển từ ý tưởng sáng tạo đến một đoạn chuyển động có thể tái sử dụng mà không ghi đè lên các bản triển khai tham chiếu của hướng dẫn.