Chuyển hình SVG: khớp đường dẫn trước khi tạo chuyển động

Nếu đường bao cần giữ nguyên trong khi toàn bộ biểu trưng xoay, thay vào đó hãy đặt tâm xoay SVG chung.

Chuyển hình SVG thay đổi hình học giữa hai trạng thái. Với nội suy dữ liệu đường dẫn có sẵn trong SVG, chuẩn bị cấu trúc lệnh khớp nhau và quyết định điểm nào cần tương ứng. Hai hình đầu cuối đẹp vẫn có thể tạo hình bị co sập hoặc xoắn ở giữa.

Quy tắc chuyển động dữ liệu đường dẫn của W3C yêu cầu cùng số lượng và loại lệnh theo cùng thứ tự để nội suy mượt. Đó là yêu cầu cấu trúc. Nó không quyết định góc nào của logo nên trở thành góc nào trong trạng thái kế tiếp.

Bắt đầu với cặp hình nhỏ dễ kiểm tra. Các ví dụ tự tạo bên dưới dùng hình vuông, hình thoi và hình vuông cố ý đảo hướng để tách hai quyết định đó.

Dựng hai đường dẫn có các góc tương ứng

Hình vuông và hình thoi viết thủ công này đều dùng M L L L Z: đi tới góc đầu, vẽ ba đường thẳng và khép hình. Mỗi cặp tọa độ có vị trí tương ứng trong đường dẫn kia.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

Phần tử SVG animate thay đổi thuộc tính theo thời gian. Ở đây nó đổi d trong hai giây. fill="freeze" của chuyển động giữ trạng thái cuối; fill xanh lá của đường dẫn là cài đặt tô/vẽ riêng.

Giữ ví dụ trong trang HTML độc lập khi kiểm tra. Nó tự bắt đầu mà không cần tập lệnh kiểm tra bên dưới. Với điều khiển trong sản phẩm thực tế, quyết định khi nào nên phát và cung cấp trạng thái tĩnh phù hợp giao diện.

Ánh xạ góc được xác định rõ:

Cả hai đường bao đi quanh chu vi theo cùng hướng. Góc đầu di chuyển về đỉnh hình thoi, góc thứ hai về bên phải, v.v. Đây là lựa chọn thiết kế có chủ ý, không phải diễn giải ý nghĩa của hai hình.

Tạm dừng phép nội suy thực tế

Kiểm tra đầu, giữa và cuối trước khi chỉnh easing hoặc thêm hiệu ứng trang trí. Với SVG trên, hàm trợ giúp này tạm dừng dòng thời gian và chuyển tới thời điểm tính bằng giây:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN mô tả pauseAnimations() và setCurrentTime() để điều khiển dòng thời gian SVG. Nối hàm trợ giúp với các nút có giá trị 0, 1 và 2. Đây là ba vị trí trong một phép nội suy, không phải ba hình thay thế.

Tại một giây, nội suy tuyến tính đặt mỗi tọa độ ở giữa hai giá trị đầu cuối. Vì vậy góc đầu tại 55, 25. Toàn bộ hình giữa trong ví dụ tự tạo này là:

M55 25L135 55L105 135L25 105Z

Chúng tôi kiểm tra hoạt ảnh dùng cơ chế có sẵn của SVG này trong trình duyệt ở đầu, giữa, cuối, rồi phát một lần. Hình giữa vẫn là tứ giác được tô, và phát tới hình thoi. Quan sát đó áp dụng cho những đường dẫn viết thủ công trong trình duyệt được thử; không phải kết quả chuyển đổi PerfectVector hay kiểm tra tương thích giữa trình duyệt.

Số lệnh bằng nhau vẫn có thể tạo chuyển hình kém

Giữ hình vuông đầu nhưng đảo thứ tự góc của hình vuông đích:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Hai đầu trông như cùng hình vuông. Cả hai chuỗi vẫn dùng M L L L Z. Nhưng góc thứ hai và thứ tư giờ đi qua hình để đổi chỗ. Ở giữa, tọa độ của chúng trùng nhau:

M30 30L80 80L130 130L80 80Z

Cả bốn điểm nằm trên đường chéo. Trong phép thử trình duyệt của chúng tôi, hình vuông được tô co sập thành đường chéo ở giữa rồi trở lại hình vuông ở cuối. Cấu trúc lệnh khớp cho phép nội suy; ghép sai điểm làm kết quả ngoài ý muốn.

Khi cặp hình xuất ra bị xoắn, kiểm tra điểm đầu và hướng đi trong mỗi đường dẫn. Sau đó kiểm tra góc và đặc điểm đường cong có nằm ở vị trí tương ứng không. Thêm nút bừa bãi có thể làm điều đó khó thấy hơn. Hướng dẫn làm sạch nút giúp đơn giản hóa hình tĩnh, nhưng hãy giữ quan hệ tương ứng bạn đã thiết lập giữa hai trạng thái.

Tính đến lỗ và các phần riêng

Logo có thể chứa ranh giới ngoài, khoảng trống và điểm nhấn rời. Coi chúng là những phần cần phần tương ứng được chọn có chủ ý trong trạng thái kế tiếp. Trước khi tạo chuyển động, liệt kê phần nào đổi thành phần nào. Nếu một trạng thái có lỗ còn trạng thái kia không, quyết định cách lỗ biến mất thay vì cho rằng số nút khớp sẽ giải quyết.

Tài liệu fill-rule giải thích SVG quyết định vùng nào nằm trong đường dẫn thế nào. Giữ hành vi tô dự định khi chuẩn bị và thử đường dẫn ghép. Nếu lỗ đã trông sai trong trạng thái đầu cuối tĩnh, dùng hướng dẫn xử lý lỗ bị tô kín trước khi thêm chuyển tiếp.

Thứ tự kiểm tra thực tế là:

1. Xác nhận dáng bao ngoài, lỗ và chi tiết rời của mỗi đầu.
2. Xác định đường dẫn con hoặc phần tử riêng tương ứng.
3. Căn điểm đầu, hướng và đặc điểm hữu ích của chúng.
4. Kiểm tra trạng thái trung gian để tìm ranh giới bắt chéo hoặc chi tiết biến mất.
5. Chỉ điều chỉnh thời gian sau khi chấp nhận hình học đó.

Phần tử riêng có thể dễ điều khiển hơn khi điểm nhấn nhỏ cần mờ dần hoặc di chuyển độc lập. Lựa chọn đó thuộc thiết kế chuyển động; không cần ép nó vào một đường dẫn ghép.

Kiểm tra quy tắc của cơ chế chuyển động bạn dùng

Ví dụ dùng cơ chế có sẵn của SVG chủ động dùng lệnh khớp nhau. Thư viện có thể thực hiện thêm bước chuẩn bị nên yêu cầu của nó có thể khác.

Tài liệu MorphSVG của GSAP mô tả chuyển dữ liệu đường dẫn thành đường cong bậc ba và thêm điểm khi cần. Nó cũng có điều khiển ánh xạ như shapeIndex. Dùng các điều khiển đó để xem xét quan hệ tương ứng thay vì cho rằng hai hình xuất độc lập đã khớp.

KUTE.js mô tả mô hình chuẩn bị khác trong hướng dẫn SVG Morph, bao gồm quy trình riêng cho đường dẫn con. Kiểm tra phiên bản và thành phần thực sự dùng trước khi áp dụng hạn chế đường dẫn của cơ chế có sẵn trong SVG hoặc lời khuyên của thư viện khác.

Chọn cặp nhỏ đại diện cho cơ chế đó và kiểm tra hình học trung gian. Phép thử vuông sang thoi thành công không xác định hành vi của logo ghép chi tiết. Giữ bản sao nguồn để phân biệt thay đổi được đưa vào khi chuẩn bị chuyển động với thiết kế gốc.

Chuẩn bị hình raster trước khi ghép các trạng thái

Nếu mất bản vector gốc và chỉ còn PNG hoặc JPG, quy trình ảnh sang vector của PerfectVector có thể giúp chuẩn bị một bản SVG chỉnh sửa được. So sánh dáng bao ngoài, lỗ và vùng riêng với nguồn, rồi kiểm tra đường dẫn tải xuống. Hướng dẫn chỉnh sửa SVG trình bày bước làm sạch tiếp theo.

Vector hóa hai ảnh không thiết lập quan hệ ngữ nghĩa giữa các điểm hoặc tạo chuyển hình hoàn chỉnh. Chấp nhận từng hình tĩnh trước, rồi chuẩn bị cặp cho công cụ chuyển động đã chọn. Nếu đã có bản vector gốc chỉnh sửa được, làm việc từ đó thay vì đồ lại bản raster.

Thử hình giữa sau mỗi thay đổi có ý nghĩa của cặp. Hình đầu cuối đơn giản hơn chỉ hữu ích nếu chuyển tiếp vẫn theo các đặc điểm dự định. Các bài chỉnh sửa trong blog cung cấp hướng dẫn chuẩn bị nguồn liên quan.

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

Đường dẫn SVG có cần cùng số điểm để chuyển hình không? Với nội suy dữ liệu đường dẫn có sẵn trong SVG, cấu trúc lệnh khớp quan trọng, bao gồm loại và thứ tự lệnh. Thư viện có thể chuẩn hóa các cấu trúc khác nhau, nên kiểm tra tài liệu riêng của nó thay vì chỉ dựa vào số điểm.

Vì sao chuyển hình SVG xoắn dù các đầu trông đúng? Các điểm có thể tương ứng theo thứ tự ngoài ý muốn. Kiểm tra điểm đầu, hướng và cách ghép đặc điểm, rồi kiểm tra hình giữa. Dáng bao ngoài đầu cuối giống hệt có thể che giấu hình trung gian co sập.

Hai tệp SVG riêng có thể tự động chuyển hình không? Công cụ chuyển động cần hình học tương thích hoặc chuẩn hóa và ánh xạ hữu ích giữa các trạng thái. Chỉ hai phần mở rộng tệp không cung cấp ánh xạ đó; kiểm tra đường dẫn, lỗ và phần riêng.

Chuyển hai PNG sang SVG có tạo cặp chuyển hình đã khớp không? Không. Chuyển đổi chuẩn bị các bản vector tĩnh. Bạn vẫn cần ghép phần và điểm, chọn cơ chế chuyển động và kiểm tra chuyển tiếp.

Nguồn tham khảo

1. W3C — đường dẫn SVG — Xác định cấu trúc nội suy dữ liệu đường dẫn có sẵn trong SVG và ghép tham số.
2. MDN — animate — Mô tả chuyển động thuộc tính theo thời gian.
3. MDN — pauseAnimations — Hỗ trợ tạm dừng dòng thời gian kiểm tra.
4. MDN — setCurrentTime — Mô tả chuyển tới thời điểm của dòng thời gian SVG bằng giây.
5. MDN — fill-rule — Giải thích hành vi vùng trong của hình ghép.
6. GSAP — MorphSVG — Mô tả chuẩn hóa và điều khiển ánh xạ điểm.
7. KUTE.js — SVG Morph — Mô tả chuẩn bị theo thành phần và quy trình đường dẫn con.

Ghép các phần và kiểm tra hình giữa trước khi tinh chỉnh thời gian. Nếu hình ban đầu là raster, chuẩn bị một bản SVG, xác minh hình học tĩnh rồi dựng các trạng thái chuyển động tương ứng.