Nhập SVG Rive: Chuẩn bị hình chỉnh sửa được cho hoạt ảnh
Chuẩn bị SVG cho Rive, giữ phần chuyển động chỉnh sửa được, sửa ảnh mất và màu đổi, quyết định khi nào raster cần dò nét trước nhập.
Trên trang này
Bạn có thể nhập SVG vào Rive bằng kéo tệp vào trình chỉnh sửa hoặc dùng bảng Assets. Rive chuyển phần hình thành đối tượng vector của Rive có thể sửa. Kết quả nhập cần hai kiểm tra: trông đúng không và có chọn được phần định tạo hoạt ảnh không? Tài liệu SVG Rive giải thích chuyển đổi và giới hạn.
Bắt đầu với tệp vector gốc khi có. Nếu nguồn là PNG hoặc JPG, chọn giữ thành ảnh, vẽ các hình cần hoặc dò thành SVG trước. Dò nét hữu ích để khôi phục đường bao chỉnh sửa được; bạn vẫn cần tổ chức đường bao cho hoạt ảnh.
SVG trong Rive sẽ như thế nào?
Sau nhập, bạn làm việc với đối tượng Rive. SVG nguồn không nằm trong tệp .riv xuất, và runtime Rive hiện không chuyển tài nguyên SVG lúc chạy. Hoàn tất chuẩn bị và nhập SVG trong trình chỉnh sửa trước xuất tệp Rive. Cách xuất của Rive mô tả ranh giới này.
Phân biệt cũng quan trọng khi chọn phần hình. Lớp hình kiểm soát màu tô và đường viền, còn đường dẫn bên trong định nghĩa hình học. Mở hình trong Hierarchy để kiểm tra các đường dẫn. Chọn nhóm cha có thể làm cả minh họa chuyển động dù con chỉnh sửa được. Hướng dẫn hình và đường dẫn Rive cho thấy cấu trúc đó.
Nếu chính SVG nguồn không tách được, dùng chẩn đoán đối tượng và tách nhóm SVG để nhận diện nhóm, đường dẫn phức hợp hoặc ảnh nhúng trước đổi.
Chuẩn bị các phần trước xuất
Ghi chuyển động muốn có trước khi gộp hoặc làm phẳng hình. Xét đèn bàn: chụp gật, tay nghiêng và đế đứng yên. Các chuyển động gợi ý mảnh riêng có thể chọn, sắp xếp.
| Phần đèn | Thay đổi dự định | Quyết định chuẩn bị |
|---|---|---|
| Chụp | Xoay tại khớp | Giữ đường bao và chi tiết màu cùng nhau, riêng với tay |
| Tay | Nghiêng từ khớp đế | Giữ chọn độc lập với đế |
| Đế | Cố định | Giữ ngoài nhóm tay chuyển động |
| Chùm sáng | Đổi hiển thị | Tạo hình chọn riêng được nếu cần hiệu ứng này |
Cùng phương pháp áp dụng cho mí mắt nhân vật, bàn tay vẫy hoặc thành phần logo: đặt tên chuyển động rồi kiểm tra nguồn có mảnh cần để thực hiện không.
Đặt tên phần có ý nghĩa trong tài liệu nguồn và giữ bản gốc. Giữ chi tiết liên quan cùng nhau khi cần chuyển cùng. Tránh gộp toàn minh họa thành một đường dẫn chỉ để danh sách đối tượng ngắn.
Sau nhập, dùng nhóm Rive tổ chức mảnh và cho điều khiển biến đổi riêng. Rive cho tạo nhóm và đặt đối tượng vào trong Hierarchy. Cũng có thể nhóm lựa chọn bằng Command+G trên macOS hoặc Ctrl+G trên Windows. Tài liệu nhóm Rive trình bày điều khiển đó.
Nhập từ SVG, Figma hoặc Illustrator
Tệp SVG đã lưu
- Lưu bản SVG xuất riêng để bản gốc chỉnh sửa được còn sẵn.
- Kéo tệp vào Rive, hoặc bấm + trong Assets và chọn tệp nhập.
- Đặt phần hình ở nơi cần và mở cấu trúc trong Hierarchy.
- Chọn phần nhỏ, đổi màu tô rồi hoàn tác. Kiểm tra xem có phải chỉ vùng dự định thay đổi hay không.
Hai cách nhập tệp được mô tả trong tổng quan Assets Rive. Nhập thành công là đầu bước kiểm tra chỉnh sửa.
Figma
Dùng Copy as SVG cho phần hình dự định trong Figma rồi dán vào trình chỉnh Rive. Kiểm tra hình nhập và diện mạo trước sao chép phần còn lại của bố cục lớn. Đây là cách nhập Figma Rive mô tả.
Illustrator
Đặt kiểu SVG thành Presentation Attributes. Rive mô tả nhãn hơi khác cho các cách xuất Illustrator:
- Save As: trong SVG Options, đặt CSS Properties thành Presentation Attributes.
- Export As: trong SVG Options, đặt Styling thành Presentation Attributes.
- Sao chép và dán trực tiếp: kiểm tra tùy chọn kiểu Export As SVG, vì Illustrator dùng thiết lập đó cho cách này.
Cũng tắt Preserve Illustrator Editing Capabilities trong SVG bàn giao. Giữ bản gốc Illustrator riêng. Rive cảnh báo tùy chọn thêm dữ liệu Illustrator, tăng kích thước tệp và có thể gồm dữ liệu công cụ nhập không nhận. Hướng dẫn Illustrator của Rive là nguồn các thiết lập đó.
Khớp triệu chứng nhập với kiểm tra đầu
Rive hỗ trợ chuyển sắc tuyến tính và xuyên tâm nhưng không tái tạo mọi tính năng SVG. Bảng dưới chuyển danh sách tính năng không hỗ trợ thành thứ tự sửa. Cột kiểm tra đầu là gợi ý chẩn đoán, không đảm bảo về tệp của bạn.
| Điều thay đổi | Cách nhập được mô tả | Kiểm tra đầu trong bản sao nguồn |
|---|---|---|
| Ảnh chụp, chất liệu hoặc vùng minh họa mất | Bỏ ảnh nhúng | Tìm đối tượng ảnh; nhập raster gốc riêng hoặc chỉ dò vùng cần đường dẫn |
| Có chuyển sắc nhưng vị trí sai | Bỏ phép biến đổi chuyển sắc | Dựng lại hoặc chỉnh vị trí chuyển sắc; đừng tự xóa mọi chuyển sắc |
| Đường bao nét đứt thành liền | stroke-dasharray nhập thành đường viền liền | Nếu hình nét đứt phải cố định, chuyển thành hình học chỉnh sửa được và kiểm tra |
| Mặt nạ mềm thành ranh giới rõ | SVG mask nhập thành cắt vùng | Làm lại hiệu ứng hiển thị cho đích thay vì mong cùng vùng mờ mềm |
| Mờ, bóng hoặc hiệu ứng bộ lọc khác mất | Không hỗ trợ SVG filter | Thay diện mạo cần bằng hình được hỗ trợ hoặc dựng hiệu ứng trong Rive |
| Hình nghiêng đổi | Không hỗ trợ phép biến đổi skew | Áp dụng hình dạng dự định trực tiếp vào hình học đường dẫn trong bản xuất |
| Màu kế thừa thành trắng | Màu tô và đường viền dùng inherit mặc định trắng | Gán màu rõ ràng cho hình bị ảnh hưởng |
Nếu SVG Illustrator hiện đen, bắt đầu với thiết lập xuất Presentation Attributes rồi kiểm tra màu hình bị ảnh hưởng. Chỉ hình đen không nhận diện nguyên nhân. Không nên nhầm với màu trắng mặc định cho inherit mà Rive mô tả.
Với nội dung ảnh mất, hướng dẫn SVG raster nhúng giải thích kiểm tra tệp chứa đường dẫn thực hay ảnh trong vùng chứa SVG. Rive có thể nhập JPEG, PNG và WebP thành tài nguyên ảnh riêng theo danh sách loại tài nguyên. Giữ nền có chất liệu thành raster riêng có thể đúng.
Nếu nhập không bao giờ hoàn tất
Thử SVG nhỏ, đơn giản trong cùng phiên. Nếu cũng thất bại, lưu công việc và khởi động lại trình chỉnh trước khi dựng lại hình. Nếu chỉ một tệp thất bại, cô lập nhóm trong các bản xuất riêng đến khi tìm phần ảnh hưởng. Điều này tách vấn đề phiên khỏi vấn đề riêng tệp; không xác nhận giới hạn độ phức tạp chung.
Khi PerfectVector thuộc quy trình này
PerfectVector hữu ích khi nguồn raster và bạn cần đường bao vector chỉnh sửa được cho Rive. Với minh họa PNG hoặc JPG màu phẳng, chuyển ảnh thành đường dẫn SVG rồi kiểm tra trong trình chỉnh vector trước nhập. Kiểm tra đường bao, khe nhỏ và ranh giới giữa phần cần chuyển riêng. Bản dò tái dựng vùng nhìn thấy; không khôi phục tên lớp gốc hoặc quyết định khớp hoạt ảnh ở đâu.
Trở lại đèn. Nếu tay và đế thành một hình liền, tách hoặc vẽ lại ranh giới. Nếu phần chuyển động làm lộ vùng bị che trong nguồn, tự vẽ vùng thiếu. Làm trước khi dựng hoạt ảnh quanh cấu trúc nhập.
Dùng SVG gốc khi đã có đường dẫn phù hợp. Dùng công cụ vẽ có sẵn của Rive cho vài phần hình học đơn giản. Giữ ảnh chụp và chất liệu vẽ thành tài nguyên raster khi diện mạo quan trọng hơn đường bao chỉnh sửa được. Tổng quan vector hóa ảnh giải thích đánh đổi nguồn; hướng dẫn dò Adobe Animate trình bày quy trình riêng nếu đích là Animate.
Thử một chuyển động trước dựng hoạt ảnh
Trên bản làm việc, chọn chụp đèn và xoay nhẹ. Xác nhận chi tiết dự định theo chụp trong khi đế đứng yên. Hoàn tác, chọn tay và lặp lại. Nếu sai phần chuyển, kiểm tra bố trí cha-con trước sửa thêm đường dẫn.
Cũng kiểm tra điểm xoay. Trong Rive, con kế thừa biến đổi của cha, và gốc quyết định nơi xoay hoặc co giãn. Freeze cho phép đặt lại vị trí đối tượng cha mà không di chuyển đối tượng con; bật/tắt bằng Y và tắt sau chỉnh gốc. Làm theo hướng dẫn Freeze và Origin của Rive để dùng điều khiển.
Trước bắt tay hoàn thiện hoạt ảnh, xác nhận:
- mọi mảnh cần có đều chọn độc lập được;
- màu tô, đường bao, lỗ và chuyển sắc vẫn khớp diện mạo dự định;
- raster nhập riêng hiện nơi đã chọn giữ;
- chuyển động không lộ khe vô ý hay phần bị che thiếu;
- mỗi phần chuyển động xoay quanh đúng khớp;
- nguồn gốc và bản nhập sạch còn sẵn.
Câu hỏi thường gặp
Nhập SVG có làm chỉnh sửa được trong Rive không? Có, với tính năng SVG Rive hỗ trợ. Mở hình nhập trong Hierarchy để chọn phần cần. Nếu vài vùng vẫn như một đối tượng, kiểm tra nhóm và cấu trúc đường dẫn.
Vì sao ảnh trong SVG mất? Rive bỏ ảnh nhúng khi nhập SVG. Tìm raster gốc và nhập làm tài nguyên ảnh, hoặc dò hình phù hợp thành đường dẫn khi cần đường bao chỉnh sửa được.
Rive có hỗ trợ chuyển sắc SVG không? Có chuyển sắc tuyến tính và xuyên tâm. Phép biến đổi chuyển sắc bị bỏ, nên vị trí chuyển sắc có thể cần chỉnh sau nhập.
Dò PNG có tạo hoạt ảnh Rive không? Dò nét có thể tạo hình học SVG từ raster phù hợp. Bạn vẫn cần kiểm tra, tách phần chuyển động, đặt hệ phân cấp, gốc và dựng hoạt ảnh trong Rive.
Nguồn tham khảo
- Rive — SVG và tài nguyên vector — Chuyển thành đối tượng của Rive, nhập Illustrator/Figma, cách xuất runtime và tính năng SVG không hỗ trợ.
- Rive — Tài nguyên — Điều khiển nhập tệp và tài nguyên ảnh raster riêng.
- Rive — Tổng quan hình và đường dẫn — Kiểu hình và hình học đường dẫn trong lớp hình.
- Rive — Nhóm — Tổ chức phần và điều khiển nhóm trong Hierarchy.
- Rive — Freeze và Origin — Biến đổi cha-con và đặt lại gốc mà không di chuyển hình con.
Nếu hình bắt đầu từ PNG hoặc JPG và cần đường bao chỉnh sửa được, hãy chuẩn bị SVG bằng PerfectVector. Kiểm tra phần đã dò, nhập vào Rive và thử một chuyển động độc lập trước dựng phần hoạt ảnh còn lại.
Thêm từ blog
Nhập SVG Fabric.js: Giữ hình chỉnh sửa được trên canvas
Nhập SVG vào Fabric.js thành đối tượng chỉnh sửa được, đổi màu một phần và xuất một bản SVG đã kiểm tra. Làm theo ví dụ đã thử, phân biệt lỗi nguồn với lỗi API.
Hình SVG tùy chỉnh trong draw.io: Ảnh hay stencil?
Chọn ảnh SVG nhúng hoặc stencil XML theo định dạng riêng của draw.io trong draw.io. Kiểm tra màu chỉnh sửa được và điểm nối, rồi lưu đúng đối tượng vào thư viện tái sử dụng.