Đường chuyển động SVG: Đưa biểu tượng theo đường cong

Dùng animateMotion để di chuyển phần tử SVG theo một tuyến, và đặt mpath bên trong để tham chiếu đường dẫn hiện có. rotate="auto" xoay hình đang di chuyển theo hướng của tuyến. Gốc tọa độ cục bộ của hình là điểm chạy dọc đường dẫn, nên biểu tượng nhập vào cần một điểm neo được chọn có chủ đích.

Cách này hữu ích khi mũi tên, biểu tượng hoặc hình minh họa nhỏ tùy chỉnh cần di chuyển mà không đổi hình dạng. Với đường trông như tự vẽ ra, dùng hoạt ảnh đường viền. Với hình bao biến thành hình bao khác, dùng biến hình đường dẫn. Những kỹ thuật này giải quyết các nhiệm vụ thị giác khác nhau.

Giữ tuyến riêng với hình

Tuyến xác định nơi biểu tượng di chuyển. Biểu tượng xác định những gì người đọc nhìn thấy. Tài liệu animateMotion của MDN mô tả phần tử chuyển động, còn tài liệu mpath chỉ cách tái sử dụng đường dẫn bằng tham chiếu.

Ví dụ gốc dưới đây có mũi tên xanh mòng két và chấm vàng. Mũi tên hướng theo chiều X dương, giúp dễ kiểm tra hiệu ứng xoay tự động. Hình được vẽ quanh (0, 0) thay vì nằm xa trên một khung xuất lớn.

Lưu đoạn này thành motion.html rồi mở trong trình duyệt. Biểu tượng tĩnh xuất hiện trước. Nhấn Play để chạy một lượt bốn giây; Show static khôi phục hình minh họa ban đầu.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

Đường cong xám nhìn thấy là một use riêng của tuyến. Xóa use đó nếu đường dẫn nên vô hình; giữ định nghĩa trong defs để hoạt ảnh vẫn tham chiếu được. Phần tử chuyển động nằm trong nhóm chứa mũi tên và chấm cần di chuyển cùng nhau.

fill="freeze" giữ trạng thái cuối của hoạt ảnh. Nó không liên quan đến màu tô xanh mòng két của mũi tên. Ví dụ chạy một lần, giúp kiểm tra vị trí cuối dễ hơn vòng lặp vô tận.

Sửa biểu tượng trôi khỏi tuyến

Chuyển động áp dụng vào hệ tọa độ của phần tử. Nó không tự tìm tâm thị giác của logo. Nếu các đường dẫn nhập vào chiếm tọa độ quanh (200, 120), di chuyển nhóm bao quanh theo tuyến vẫn giữ độ lệch đó bên trong nhóm.

Chọn điểm trên hình cần chạm tuyến, rồi tịnh tiến điểm đó về (0, 0) bên trong nhóm di chuyển. Với điểm neo tại (200, 120), cấu trúc là:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

Phép tịnh tiến bên trong chuẩn bị hình; nhóm bên ngoài nhận chuyển động. Giữ hai nhiệm vụ đó riêng khi thêm phép co giãn hoặc xoay hiệu chỉnh. Đặc tả hoạt ảnh SVG định nghĩa chuyển động là phép biến đổi bổ sung, nên các phép biến đổi hiện có vẫn ảnh hưởng vị trí cuối.

Với huy hiệu, tâm có thể là điểm neo hợp lý. Với xe, bạn có thể muốn điểm tiếp xúc bánh xe; với con trỏ, bạn có thể muốn đầu nhọn. Tâm khung bao chỉ là phỏng đoán khởi đầu. Kiểm tra điểm tiếp xúc dự định tại nhiều vị trí trên tuyến.

Phép xoay tại chỗ có vấn đề tâm xoay riêng. Hướng dẫn transform-origin SVG giải thích trường hợp đó mà không thêm tuyến di chuyển.

Chọn xem hình có nên xoay không

Những giá trị này được mô tả trong tài liệu xoay chuyển động của MDN. auto-reverse đổi hướng quay mặt; nó không đảo thứ tự đi dọc tuyến.

Nếu nguồn hướng lên trên, auto không biết hướng lên nghĩa là phía trước. Xoay nhóm hình bên trong cho đến khi nó hướng theo chiều X dương, rồi áp dụng chuyển động lên nhóm bên ngoài. Tránh xoay chính tuyến chỉ để sửa hướng cục bộ của biểu tượng.

Góc tuyến nhọn có thể gây đổi hướng đột ngột. Tuyến cong là điểm bắt đầu tốt hơn khi bạn muốn cú xoay trông mượt. Cũng hãy chừa chỗ quanh tuyến: biểu tượng có thể vượt đường tâm của đường dẫn và bị cắt gần mép khung nhìn SVG.

Kiểm tra đầu, giữa và cuối

Chúng tôi mở cùng tuyến và biểu tượng trong Chrome rồi dùng công cụ thử nhỏ để dừng dòng thời gian SVG ở 0, 2 và 4 giây. Biểu tượng bắt đầu ở dưới bên trái, đi qua gần đỉnh và kết thúc ở dưới bên phải. Với auto, hướng của nó thay đổi dọc đường cong. Với xoay đặt thành 0, vị trí giữa không đổi nhưng mũi tên giữ nằm ngang.

Phép kiểm tra đó áp dụng cho mẫu này trong một trình duyệt. Nó không kiểm tra nhập hoạt ảnh vào công cụ thiết kế hay bảo đảm cho mọi chế độ nhúng trình duyệt.

Với hình của bạn:

1. Kiểm tra điểm tiếp xúc ở đầu tuyến. Sửa độ lệch nguồn trước khi chỉnh thời gian.
2. Dừng gần các chỗ uốn và xác nhận phần mong muốn của biểu tượng theo đường.
3. So sánh xoay tự động với cố định. Chọn theo hình, nhất là khi hình có chữ.
4. Kiểm tra tư thế cuối xem có bị cắt và xác nhận phát lại bắt đầu đúng.
5. Thử ngữ cảnh bàn giao thực tế. Ví dụ này dùng SVG nội tuyến trong trang HTML với điều khiển JavaScript.

animateMotion mặc định dùng chuyển động với tốc độ đều theo quãng đường, như MDN mô tả. Vì thế, nửa thời lượng biểu diễn xấp xỉ nửa quãng đường đã đi, không nhất thiết là tham số đường cong ở giữa các điểm điều khiển. Tư thế hai giây trên tuyến bậc ba bất đối xứng của chúng tôi nằm hơi bên phải đỉnh hình học.

Cung cấp bản tĩnh hữu ích

Ví dụ bắt đầu với use tĩnh của biểu tượng, và chuyển động chỉ bắt đầu sau khi kích hoạt nút Play. Nếu JavaScript không chạy, hình tĩnh vẫn hiện. Khi tùy chọn giảm chuyển động được bật, hàm xử lý giữ nguyên trạng thái đó.

Tính năng media prefers-reduced-motion cho phép trang đáp ứng tùy chọn chuyển động của người dùng. Ở đây JavaScript đọc tùy chọn trước khi bắt đầu chuyển động SVG, và khôi phục bản tĩnh nếu tùy chọn thay đổi.

Chúng tôi cũng thử nhánh tĩnh bằng công tắc riêng để xem trước chế độ giảm chuyển động trong công cụ thử: nó ẩn nhóm có hoạt ảnh và hiển thị biểu tượng ở vị trí đầu. Công tắc đó thử logic dự phòng của chúng tôi; nó không đổi thiết lập trợ năng của máy tính.

Khi có thể, hãy giữ ý nghĩa ngoài hoạt ảnh. Người dùng không nên phải xem biểu tượng di chuyển để biết trạng thái hay đọc hướng dẫn thiết yếu. Với biểu tượng trang trí cạnh văn bản đã mô tả rõ, điều chỉnh nhãn trợ năng để tránh thông báo cùng nội dung hai lần.

Chuẩn bị họa tiết riêng trước khi tạo hoạt ảnh

Nếu họa tiết tùy chỉnh chỉ có PNG hoặc JPG, PerfectVector có thể giúp khôi phục hình SVG chỉnh sửa được trước khi bạn dựng chuyển động. Kiểm tra hình bao khôi phục và các lỗ nhỏ, nhóm những phần cần di chuyển cùng nhau rồi chọn điểm neo. PerfectVector cung cấp hình học nguồn; tuyến, thời gian và hành vi chuyển động được tạo riêng.

SVG hiện có có thể chuyển thẳng sang nhóm và chuẩn bị điểm neo. Với mũi tên đơn giản như minh họa này, vẽ hình học trực tiếp cũng thực tế. Tổng quan vector hóa ảnh giải thích khi nào đồ lại nguồn raster hữu ích.

Với biểu trưng tùy chỉnh chỉ có raster, hãy thử ảnh của bạn trong PerfectVector, kiểm tra đường bao và chi tiết nhỏ, rồi thử SVG đó tại đầu, giữa và cuối tuyến. Giữ bản tĩnh bên cạnh bản có hoạt ảnh.

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

Vì sao biểu tượng di chuyển bên cạnh đường dẫn thay vì trên đường dẫn? Hình có thể bị lệch khỏi gốc tọa độ cục bộ. Chọn điểm cần theo tuyến và tịnh tiến điểm đó về gốc tọa độ bên trong nhóm di chuyển. Kiểm tra kết quả ở đầu và tại chỗ uốn.

Xoay tự động có đổi hình dạng biểu tượng không? Không. Chuyển động đổi vị trí và hướng của hình. Nó không biến đổi hình học đường dẫn. Hướng phía trước của nguồn nên theo chiều X dương cho cách xoay tự động trong ví dụ này.

Tôi có thể xóa đường dẫn hướng nhìn thấy không? Có. Giữ định nghĩa tuyến và ID của nó, nhưng xóa phần tử riêng vẽ đường dẫn hướng. Chuyển động vẫn có thể tham chiếu đường dẫn qua mpath.

Nguồn tham khảo

1. MDN animateMotion — Mô tả đường chuyển động, giá trị xoay và chuyển động với tốc độ đều theo quãng đường mặc định.
2. MDN mpath — Giải thích tham chiếu tuyến hiện có bên trong phần tử chuyển động.
3. Đặc tả hoạt ảnh SVG — Định nghĩa biến đổi chuyển động và quan hệ với tọa độ hình.
4. MDN thuộc tính rotate — Mô tả hướng chuyển động cố định, tự động và quay mặt ngược.
5. MDN tùy chọn giảm chuyển động — Giải thích phát hiện tùy chọn chuyển động của người dùng.