Tạo hoạt ảnh vẽ tay sống động với kỹ năng Motion

Kỹ năng Motion làm được gì

Kỹ năng Motion For Anything You Draw giúp nhà thiết kế và kỹ sư tạo chuyển động cho hình minh họa được vẽ bằng mã, khiến chúng có sức sống thay vì giống một chuỗi hình ảnh bị thay thế. Kỹ năng này áp dụng cho nhân vật, sinh vật, cây cối, vải vóc, lửa, khói, nước, thời tiết, ánh sáng, máy móc, biểu tượng, logo, biểu đồ và toàn bộ cảnh.

Dự án tập trung vào những chi tiết khiến hoạt ảnh trở nên đáng tin: một đồng hồ cho toàn bộ cảnh, chuyển động quanh các trục xoay thực, những phần chuyển động trễ hơn một nhịp, trạng thái chờ liên tục, đường đi mượt qua các tư thế chính, biên độ tiết chế và các đường cong thời gian rõ ràng.

Kỹ năng này cũng giải quyết những vấn đề phổ biến trong hoạt ảnh do tác nhân tạo ra. Thay vì để mỗi tư thế sử dụng một tween độc lập có easing, kỹ năng khuyến khích chuyển động phối hợp, chuyển tiếp tự nhiên, chớp mắt dễ nhận biết, các điểm tiếp xúc ổn định và chuyển động phụ tinh tế.

Cài đặt kỹ năng

Cài đặt kỹ năng bằng lệnh skills:

npx skills@latest add rossark0/rossark-motion-skill

Sau khi cài đặt, kỹ năng cung cấp tài liệu tham khảo, mẫu có thể tái sử dụng, công cụ phân tích và các cảnh ví dụ. Engine đi kèm hỗ trợ cả mẫu React Native và SwiftUI.

Tìm hiểu repository

Đọc hướng dẫn chính của kỹ năng

Bắt đầu với SKILL.md. Tệp này mô tả các nguyên tắc cốt lõi, công thức cho nhiều chủ thể, khuôn mặt sống động, diễn xuất toàn thân, hành động dựa trên cảnh, chuyển động giao diện, các lỗi thường gặp, phân tích video tham khảo và quy trình được đề xuất.

Tạo ghi chú chuyển động dành riêng cho dự án

Sao chép MOTION.md đặt cạnh hình minh họa của bạn và hoàn thành Phần 2 trong quá trình làm việc. Ghi lại vị trí của mã hoạt ảnh, các quy tắc dự án tuân theo, những gì hình minh họa không thể thực hiện và cách bạn xác minh các thay đổi. Kỹ năng đọc tệp này trước tiên, nên tệp cung cấp cho tác nhân bối cảnh quan trọng của dự án trước khi tác nhân sửa đổi hoặc tạo chuyển động.

Chọn engine hoạt ảnh

Repository bao gồm một engine cho mỗi framework UI được hỗ trợ:

• motion.ts cho React Native.
• Motion.swift cho SwiftUI.

Engine bao gồm đồng hồ lặp và đồng hồ chạy một lần, track, flow, seg, wave, loop, bell, seeded và các đường cong chuyển động. Hãy sử dụng các mẫu khuôn mặt sống động đi kèm khi hình vẽ của bạn cần mắt và miệng chuyển động.

Xây dựng hoạt ảnh từng bước

1. Mô tả hình minh họa và các giới hạn của nó. Sử dụng MOTION.md để ghi lại cấu trúc hình vẽ hiện có, hình học khả dụng và các ràng buộc.
2. Chia cảnh thành các phần. Xác định thân, đầu, tay chân, đạo cụ, bóng, đặc điểm khuôn mặt và các thành phần phụ. Quyết định phần nào xoay quanh trục thực và phần nào nên chuyển động trễ.
3. Chọn một đồng hồ dùng chung. Điều phối cảnh bằng một dòng thời gian duy nhất thay vì cung cấp cho mỗi thành phần một tween không liên quan. Điều này giúp các điểm tiếp xúc và phản ứng được đồng bộ.
4. Xác định các hành động chính. Lên kế hoạch cho những sự kiện như bước vào, tiếp đất, đá, chớp mắt, nhìn, vẫy tay, phát triển hoặc ổn định. Kết nối các tư thế này bằng chuyển động mượt với các hàm hỗ trợ có sẵn của engine, bao gồm flow để di chuyển qua các tư thế chính.
5. Thêm chuyển động phụ. Để đầu, cẳng tay, tóc buộc hai bên, mũ, lon, bóng hoặc các phần rời khác chuyển động theo hành động chính với độ trễ nhẹ.
6. Kiểm tra các điểm tiếp xúc. Đảm bảo bàn chân chạm đất, tay vẫn gắn với quai cầm, vật bị ném bắt đầu và kết thúc ở đúng vị trí, đồng thời các va chạm vẫn giữ được thể tích của hình vẽ.
7. Xem lại kết quả theo từng khung hình. Sử dụng các công cụ phân tích và đầu ra đã kết xuất của repository để tìm những chuyển động quá nhỏ, quá đột ngột hoặc sai thời điểm.

Sử dụng các mẫu khuôn mặt sống động

liveFace.tsx và LiveFace.swift cung cấp mắt và miệng sống động có thể lướt, chớp và mỉm cười. Bạn cung cấp hình học và màu sắc, cho phép mẫu thêm chuyển động khuôn mặt mà không cần vẽ riêng từng biểu cảm.

Giữ cho các thay đổi trên khuôn mặt dễ nhận biết và liên tục. Tránh chớp mắt cực nhanh khiến hình ảnh trông như bị nhấp nháy, đồng thời tránh chuyển thẳng từ biểu cảm này sang biểu cảm khác. Những chuyển động nhỏ của mắt và độ trễ nhẹ giữa đầu với hướng nhìn có thể khiến nhân vật trông chú ý hơn.

Nghiên cứu các ví dụ đi kèm

Reveal

Cảnh Reveal minh họa diễn xuất toàn thân trong khung điện thoại. Một bóng người bay vào với đôi chân đung đưa, một đứa trẻ rơi xuống theo trọng lực rồi co lại khi tiếp đất, một quả bóng lăn vào, đôi mắt dõi theo nó, và nhân vật đá, xoay người, vẫy tay rồi tiếp tục ở trạng thái chờ. Chuỗi này là một vòng lặp dài chín giây ở 60 khung hình mỗi giây và sử dụng một đồng hồ cảnh.

Garden

Cảnh Garden kết hợp diễn xuất nhân vật với sự thay đổi của môi trường. Các giọt nước đi theo những cung đã tạo bằng seed, đất sẫm màu, thân cây phát triển qua hai lần đẩy, lá lần lượt bung ra, cánh hoa mở cùng một chuyển động xoắn, và một con bướm đáp xuống trong khi thân cây phản ứng với sức nặng của nó. Đầu và mắt nhân vật dõi theo con bướm, còn tóc buộc hai bên, mũ và bình tưới nước chuyển động trễ theo.

Chef

Cảnh Chef thể hiện nhịp điệu, trọng lực, sự chuẩn bị, bất ngờ và tiếp xúc. Một chiếc bánh pancake được lật lên, tiếp đất với hiệu ứng co lại, rồi bay quá cao ở lần thử thứ hai, đập vào mũ đầu bếp, lắc lư, trượt xuống và được bắt lại trong chảo. Chuyển động của hơi nước và ngọn lửa sử dụng các wave bổ sung, còn bàn tay được đặt chính xác lên quai cầm.

Orbit

Cảnh quỹ đạo minh họa cách sắp xếp theo chiều sâu. Các thẻ quay quanh một chú chim, xuất hiện ở phía trước, phía sau hoặc nhìn nghiêng theo vị trí của chúng. Chú chim lơ lửng và nghiêng mình, đôi cánh vỗ nhẹ, chân và chỏm lông chuyển động theo, còn các tia sáng lấp lánh xuất hiện tại những thời điểm được tạo sẵn trong vòng lặp.

Kết xuất các bản demo SwiftUI

Trên macOS 14 trở lên, biên dịch các mẫu SwiftUI và cảnh demo bằng:

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Kết xuất cảnh Reveal ở tốc độ 60 khung hình/giây vào một thư mục khung hình:

/tmp/render-demo reveal /tmp/frames phone fps=60

Dùng garden, chef hoặc orbit thay cho reveal để kết xuất các cảnh khác. Chuyển chuỗi khung hình đã kết xuất thành MP4 bằng FFmpeg:

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

Việc kết xuất cung cấp một cách nhất quán để kiểm tra toàn bộ tiến trình thời gian, so sánh các phiên bản và xác minh rằng hoạt ảnh vẫn ổn định ở tốc độ khung hình mục tiêu.

Phân tích chuyển động tham chiếu

Khi có video tham chiếu, hãy nghiên cứu video trước khi xây dựng. Những chuyển động nhỏ khó nhận thấy trong thời gian thực có thể quyết định kết quả trông tự nhiên hay máy móc.

• sheet.sh tạo bảng liên hệ từ video ở tốc độ khung hình đầy đủ, giúp dễ kiểm tra thời điểm và các thay đổi giữa từng khung hình.
• track_edges.py đo các đường biên của đối tượng theo từng khung hình, giúp phát hiện những rung nhẹ, sự lơ lửng và đung đưa.
• sample_colors.py đọc màu chính xác từ một khung hình video.

Dùng các phép đo này để xác định thời điểm, biên độ và khoảng cách của chuyển động trước khi chuyển chúng thành mã. Một tham chiếu có thể tạo cảm giác sống động nhờ sự chuyển trọng lượng nhẹ, chuyển động tiếp diễn có độ trễ hoặc thay đổi gần như không nhìn thấy trong đường nét.

Mẹo chuyển động nâng cao

Ưu tiên thời điểm phối hợp

Dùng một đồng hồ cho toàn cảnh và để các hành động liên quan chia sẻ các mối quan hệ về thời gian. Cú đá, chuyển động của mắt, xoay đầu và quỹ đạo quả bóng nên cùng truyền tải một sự kiện thay vì xuất hiện như những hoạt ảnh độc lập.

Dùng chuyển động tiếp diễn và chuẩn bị

Các bộ phận phụ không nhất thiết phải dừng lại khi phần thân chính dừng. Hãy để những thành phần lỏng tiếp tục trong chốc lát, ổn định lại hoặc phản ứng với gia tốc. Điều này đặc biệt hữu ích cho tóc, tóc buộc hai bên, mũ, quần áo, tay chân, bóng đổ và các vật được mang theo.

Duy trì chuyển động khi chờ

Nhân vật và cảnh không nên đóng băng giữa các hành động chính. Hô hấp, chớp mắt, lơ lửng, đung đưa hoặc các chuyển động biên độ nhỏ khác có thể giữ cho vòng lặp luôn sống động mà không làm phân tán khỏi hành động chính.

Giữ thể tích khi va chạm

Co và giãn nên hỗ trợ hình vẽ thay vì làm biến dạng tùy tiện. Các ví dụ Reveal và Chef dùng hiệu ứng co khi tiếp đất, đồng thời giữ cho nhân vật hoặc vật thể dễ nhận biết và gắn kết với cảnh.

Dùng biến thiên có hạt giống khi cần lặp lại

Với các chi tiết lặp lại như tia sáng lấp lánh hoặc giọt nước, hãy dùng hành vi có hạt giống khi chuyển động cần thay đổi nhưng vẫn có thể tái tạo. Thời điểm có thể tái tạo giúp việc gỡ lỗi và so sánh kết quả kết xuất dễ dàng hơn.

Áp dụng hướng dẫn về chuyển động giao diện

Đối với chuyển động trong giao diện, hãy tham khảo các nguyên tắc được dự án dẫn chiếu, bao gồm các kỹ năng của Emil Kowalski và Family values của Benji Taylor. Giữ chuyển động giao diện có mục đích và nhất quán với thiết kế xung quanh.

Kết luận

Motion cung cấp nền tảng thực tiễn để biến tác phẩm đồ họa được vẽ bằng mã thành hoạt ảnh giàu biểu cảm. Cài đặt bằng npx, ghi lại dự án trong MOTION.md, xây dựng dựa trên một đồng hồ dùng chung, sử dụng các mẫu React Native hoặc SwiftUI, rồi kiểm tra kết quả bằng các khung hình đã kết xuất và công cụ phân tích. Mục tiêu cốt lõi rất đơn giản: kết nối các tư thế một cách mượt mà, phối hợp toàn bộ cảnh và cung cấp cho từng phần thời điểm cùng chuyển động tiếp diễn cần thiết để tạo cảm giác sống động.