PerfectVector
Bởi Irene Kim11 phút đọc

Nhập SVG vào Apple Motion: Kiểm tra trước khi tạo hoạt ảnh

Nhập SVG tĩnh vào Apple Motion, kiểm tra độ trong suốt và tính năng không hỗ trợ, rồi quyết định hình có cần đối tượng riêng trước khi tạo hoạt ảnh không.

Trên trang này

Apple Motion hỗ trợ nhập SVG. Hướng dẫn tính năng Motion 6.3 của Apple liệt kê hỗ trợ SVG, nên lời khuyên cũ yêu cầu mọi SVG đi qua định dạng khác không phải điểm bắt đầu đáng tin cậy cho phiên bản đó. Bắt đầu với tệp tĩnh, nhập như media và kiểm tra kết quả trước khi dựng hoạt ảnh.

Có ba câu hỏi khác nhau: hình có hiện không, độ trong suốt có đúng không và bạn có điều khiển được các phần cần di chuyển độc lập không? Hình hiện trong khung vẽ chỉ trả lời câu đầu. Nó không xác lập rằng mỗi đường dẫn SVG đã thành hình có sẵn của Motion.

Quy trình này dùng biểu tượng vòng và đĩa đơn giản để các kiểm tra rõ ràng. Đây là quy trình theo tài liệu để thử trong phiên bản đã cài, không phải báo cáo phép thử nhập trong ứng dụng Motion thực tế.

Khớp quy trình với phiên bản Motion và nhiệm vụ

Kiểm tra phiên bản cài trước khi theo bài diễn đàn cũ hoặc nhập bộ sưu tập lớn. Hướng dẫn SVG hiện tại của Apple mô tả cả cách dùng hỗ trợ và giới hạn cụ thể. Nếu cài đặt khác phiên bản tài liệu, kiểm tra hướng dẫn tương ứng trước khi chẩn đoán hình.

Quyết định điều gì cần xảy ra sau nhập:

Kết quả dự địnhBản bàn giao phải cung cấpKiểm tra chấp nhận
Di chuyển hoặc co giãn toàn biểu tượngĐồ họa tĩnh hiển thị đúngCả thiết kế phản hồi cùng nhau
Di chuyển đĩa nhỏ độc lậpĐối tượng điều khiển riêng đượcDi chuyển đĩa không đổi vòng
Uốn lại vòng theo thời gianHình có sẵn của Motion phù hợp hoặc cấu trúc chỉnh sửa khácCó điều khiển hình học cần thiết
Giữ hoạt ảnh SVG hiện cóCách bàn giao hoạt ảnh được lên kế hoạch riêngKhung hình và thời gian dự định giữ qua cách đó

Hàng cuối đặc biệt quan trọng. Tài liệu SVG Motion nói SVG có hoạt ảnh chỉ hiện khung đầu. Nhập tệp có hoạt ảnh không giống nhập hoạt ảnh của nó.

Nếu chọn giữa ứng dụng hoạt ảnh, hướng dẫn đồ lại logo After Effects và quy trình đồ lại Adobe Animate giải thích đối tượng đích riêng của chúng. Lệnh và loại đối tượng của chúng không thể hoán đổi với nhập media Motion.

Bắt đầu với nguồn có thể kiểm tra

Lưu ví dụ gốc này thành orbit-mark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
  <circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
  <circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>

Vòng xanh mòng két có tâm rỗng. Đĩa san hô nhỏ hơn ở trên và bên phải, tách bởi khe. Tệp không có hình chữ nhật nền, chữ, tham chiếu ảnh bên ngoài, mã kịch bản hay hoạt ảnh. Những lựa chọn đó làm nó thành mốc cơ sở hữu ích để kiểm tra biểu tượng cầu kỳ hơn sau này.

Mở trong trình chỉnh sửa nguồn trước. Kiểm tra lỗ vòng, khe và ranh giới khung. Giữ bản gốc chỉnh sửa được, vì sửa hình và sửa thiết lập nhập là hai nhiệm vụ khác nhau.

Với tệp của bạn, chỉ đơn giản hóa bản bàn giao ở nơi tính năng cụ thể gây lỗi. Thiết kế có chữ cần chiến lược phông rõ ràng; dùng danh sách kiểm tra phông SVG thay đổi trước xuất. Giữ văn bản chỉnh sửa được trong bản gốc dù bản bàn giao cần chữ thành đường bao. Đừng đồ lại vector đã dùng được chỉ vì ứng dụng đích khác.

Minh họa so sánh biểu tượng vòng và đĩa điều khiển như một hình với cùng vòng và đĩa được chuẩn bị thành đối tượng riêng
Minh họa: đồ họa toàn bộ và các phần điều khiển độc lập là bản bàn giao khác nhau. Di chuyển riêng đĩa san hô là phép kiểm tra thực tế; biểu tượng sắc nét không chứng minh đã chuyển thành hình có sẵn của Motion.

Nhập vào composition rồi kiểm tra media

Chọn nhóm nơi muốn biểu tượng xuất hiện. Trong quy trình nhập Motion hiện tại, chọn File > Import > Media hoặc nhấn Command-I, chọn SVG và nhập. Bạn cũng có thể kéo tệp từ Finder vào khung vẽ hoặc nhóm trong danh sách Layers.

Sau nhập, tìm hình trong khung vẽ và lớp của nó trong nhóm dự định. Tránh chỉ đánh giá tệp qua việc tên xuất hiện trong danh sách Media. Apple cũng mô tả nhập vào danh sách đó mà không thêm media vào composition; trong trường hợp ấy, nó chưa hiện trong khung vẽ hoặc danh sách Layers.

Đặt biểu tượng trên nền tương phản để kiểm tra. Nhìn tâm rỗng và khoảng giữa hai phần. Nền tối của trình xem có thể khiến nội dung thiếu và nội dung trong suốt trông giống nhau gây nhầm.

Để kiểm tra thay nền trong Motion, nhấp Media ở khung Project và chọn đối tượng SVG. Mở Media Inspector. Trang SVG của Apple mô tả Use Background Color và các điều khiển màu liên quan. Tắt tùy chọn thay nền khi muốn giữ vùng trong suốt của nguồn; chỉ bật khi màu thay thế là có chủ đích.

Hình chữ nhật không trong suốt đã vẽ bên trong SVG là vấn đề riêng. Tắt tùy chọn nền media không xóa đường dẫn thuộc hình. Hướng dẫn nền SVG trong suốt trình bày chẩn đoán ở mức nguồn đó.

Thử điều khiển các phần trước khi thêm keyframe

Chọn biểu tượng nhập vào và đổi vị trí nhỏ có thể hoàn tác. Nếu vòng và đĩa di chuyển cùng nhau, đó là hành vi hữu ích cho đồ họa đơn. Khôi phục vị trí rồi xem hoạt ảnh dự định có cần kiểm soát thêm không.

Với đĩa di chuyển độc lập, thử chỉ chọn và di chuyển phần đó. Chỉ chấp nhận bản bàn giao khi vòng đứng yên và có thể thao tác độc lập với đối tượng mong muốn. Tên nhóm SVG, khe nhìn thấy hay hình thu nhỏ lớp tự nó không đủ bằng chứng.

Nếu đối tượng có sẵn không cung cấp điều khiển cần, chọn cấu trúc có điều khiển đó. Với ví dụ đơn giản này, vẽ vòng và đĩa thành các hình riêng bằng công cụ của Motion là lựa chọn hợp lý. Hướng dẫn hình đơn giản của Apple giải thích công cụ Circle cùng điều khiển màu và viền. Dựng vòng có viền và màu tô rỗng, đĩa có màu tô đặc, rồi kiểm tra riêng khả năng chọn từng đối tượng.

Với hình cầu kỳ hơn, lựa chọn khác là chuẩn bị tệp nguồn riêng cho các phần cần di chuyển độc lập. Giữ khung chung và ghi căn chỉnh dự định trong trình chỉnh sửa nguồn. Xác minh vị trí sau nhập; tập hợp tệp không tự là bố cục sẵn sàng tạo hoạt ảnh.

Đây là quyết định về đối tượng cần, không phải lời hứa nhập SVG tách hình thành các hình có sẵn của Motion. Nếu cần biến dạng từng điểm, xác lập rằng cấu trúc chọn cung cấp điều khiển hình học cần trước khi bắt tay làm hoạt ảnh.

Chẩn đoán nội dung không hỗ trợ bằng bản đơn giản hơn

Giới hạn SVG của Apple xác định vài lý do tệp khác trình chỉnh sửa nguồn. Dùng triệu chứng để chọn kiểm tra tiếp.

Triệu chứngGiới hạn được mô tả hoặc kiểm tra có thể cầnBước tiếp
SVG có hoạt ảnh đứng yênMotion hiển thị khung đầuCoi bản nhập là tĩnh; lên kế hoạch chuyển động riêng
SVG có hiệu ứng hiện dần trông trốngKhung đầu có thể trong suốtXuất trạng thái tĩnh nhìn thấy để bàn giao hình
Tệp chứa phông tùy chỉnh không nhập đượcSVG có phông tùy chỉnh không được hỗ trợChuẩn bị bản bàn giao phù hợp và giữ bản gốc chỉnh sửa được
Ảnh mong đợi thành hình thay thếTham chiếu ảnh bên ngoài không được hỗ trợThay phụ thuộc bằng tài nguyên bàn giao tự chứa phù hợp và thử
Nội dung liên kết hoặc kịch bản bị thiếuĐối tượng JavaScript và liên kết nhúng không hiệnBỏ phụ thuộc vào hành vi tương tác
Hình bán trong suốt trông khácCác mức độ đục (opacity) khác nhau của hình có thể kết xuất khácSo sánh bản đơn giản hóa và kết quả tổng hợp dự định

Đừng diễn giải giới hạn tham chiếu ngoài thành bằng chứng mọi tính năng SVG tự chứa có thể có đều hoạt động. Tệp cơ sở nhỏ hơn giúp tách phụ thuộc, nhưng hình cuối vẫn cần kiểm tra riêng.

Khi diện mạo tĩnh đúng, kiểm tra biểu tượng ở kích thước nhỏ nhất và lớn nhất dùng trong composition. Quan sát lỗ trong vòng và khe cạnh đĩa. Sau đó kiểm tra đoạn xuất ngắn ở độ phân giải bàn giao dự định. Hình học nguồn vector không bỏ nhu cầu kiểm tra tổng hợp, hiệu ứng và khung video cuối.

Chuẩn bị biểu tượng chỉ có raster cho Motion

Nếu mất biểu tượng chỉnh sửa được và chỉ còn PNG hoặc JPG đơn giản, quy trình ảnh sang vector của PerfectVector có thể giúp chuẩn bị một bản SVG tĩnh để đánh giá. Cắt sát biểu tượng, kiểm tra bản xem trước để tìm lỗ vòng bị lấp, đĩa bị ghép hoặc hình nền không mong muốn, rồi so với nguồn. Tải hình được chấp nhận rồi lặp lại kiểm tra nhập và đối tượng độc lập.

Vector hóa không khôi phục keyframe, thời gian, lớp có sẵn của Motion hay bộ điều khiển hoạt ảnh. Dùng bản vector gốc hiện có khi có. Giữ ảnh chụp và ảnh nhiều hiệu ứng ở raster khi giữ diện mạo tốt hơn; vẽ vòng và đĩa đơn giản trực tiếp trong Motion khi yêu cầu thực sự là điều khiển đối tượng có sẵn của Motion.

Trước khi giao dự án cho người khác, ghi tên tệp nguồn, phiên bản Motion, lựa chọn nền và những phần phải giữ riêng. Kèm bản gốc chỉnh sửa được cùng tham chiếu cho thấy bố trí dự định. Các quy trình hình trên blog trình bày quyết định chuẩn bị trước bàn giao đó.

Câu hỏi thường gặp

Apple Motion có nhập SVG trực tiếp không? Có. Tài liệu Motion 6.3 của Apple liệt kê hỗ trợ SVG. Dùng quy trình nhập cho phiên bản cài, rồi kiểm tra hình và các điều khiển cần.

Nhập SVG có giữ hoạt ảnh của nó không? Không. Motion chỉ hiện khung đầu của SVG có hoạt ảnh. Nếu khung đó trong suốt, hình nhập có thể trống.

Vì sao SVG có nền màu trong Motion? Kiểm tra Use Background Color trong Media Inspector và tìm hình nền không trong suốt trong nguồn. Thiết lập nền media và hình chữ nhật vẽ trong SVG là hai nguyên nhân riêng.

Mỗi đường dẫn SVG có thành hình Motion chỉnh sửa được không? Đừng mặc định từ nhập thành công. Thử xem có các phần và điều khiển hình học cần không. Chuẩn bị đối tượng riêng hoặc dùng cấu trúc phù hợp bằng công cụ của Motion khi hoạt ảnh yêu cầu điều khiển độc lập.

Nguồn tham khảo

  1. Apple — Có gì mới trong Motion — Hỗ trợ SVG được mô tả của Motion 6.3.
  2. Apple — Làm việc với tệp SVG trong Motion — Điều khiển độ trong suốt và giới hạn tính năng SVG.
  3. Apple — Nhập media vào Motion — Nhập media, đặt nhóm và nhập chỉ vào danh sách Media.
  4. Apple — Vẽ hình đơn giản trong Motion — Lựa chọn thay thế bằng công cụ của Motion cho hình học đơn giản điều khiển riêng.

Kiểm tra diện mạo và cấu trúc đối tượng của một biểu tượng trước khi chuẩn bị toàn trình tự. Nếu chỉ còn hình raster, hãy chuẩn bị một bản SVG tĩnh để đánh giá, kiểm tra các phần riêng và xác minh tệp đã chấp nhận trong Motion trước khi tạo hoạt ảnh.

Thêm từ blog

Bắt đầu với SVG gọn sạch hơn
và dễ chỉnh sửa hơn