Hoạt ảnh đường viền SVG: Chuẩn bị một tuyến vẽ duy nhất

Hoạt ảnh đường viền SVG có thể làm một đường hiện ra bằng cách di chuyển nét gạch dọc đường dẫn. Dùng stroke-dasharray để định nghĩa nét gạch và khoảng trống, rồi tạo hoạt ảnh cho stroke-dashoffset đến khi viền nhìn thấy. MDN mô tả chúng là thuộc tính tô vẽ đường viền.

Đường dẫn nguồn quyết định những gì trông như đang được vẽ. Đường hở có thể theo tuyến bút xuyên qua giữa biểu tượng. Đường bao có màu tô mô tả ranh giới biểu tượng. Thêm viền cho đường bao đó đưa hoạt ảnh quanh các mép; chỉ thiết lập nét gạch không làm màu tô hiện dần.

Bắt đầu với một hình nhỏ trước khi đặt thời gian cho toàn logo. Các ví dụ viết thủ công dưới đây phân biệt tuyến vẽ, hình có màu tô và chu vi để bạn chọn hình học hoạt ảnh cần.

Để di chuyển toàn bộ biểu tượng theo đường cong, dùng quy trình đường chuyển động SVG, giữ tuyến di chuyển riêng với hình.

Bắt đầu với đường dẫn hở có viền

Đường dẫn gốc này đi sang phải rồi lên trên. fill bị tắt, nên biểu tượng nhìn thấy đến hoàn toàn từ viền:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Dùng CSS này để hiện dần trong hai giây:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" hiệu chuẩn các thao tác dựa trên khoảng cách về độ dài được định nghĩa là 100. Tài liệu pathLength mô tả chuẩn hóa này. Một giá trị dash-array duy nhất lặp thành nét gạch và khoảng trống, nên 100 cung cấp nét gạch dài toàn đường theo sau là khoảng trống dài bằng nó. Dịch mẫu đó 100 ẩn viền trong ví dụ này; đưa độ dịch về không làm nó hiện ra.

Dùng số không đơn vị ở đây. stroke-dashoffset: 100% không thay thế cho 100 đơn vị đường dẫn đã chuẩn hóa. Tài liệu độ dịch nét gạch của MDN nói giá trị phần trăm dùng đường chéo chuẩn hóa của khung nhìn SVG, thay vì tổng độ dài đường dẫn.

Ví dụ dùng đầu nét butt để dễ kiểm tra điểm đầu khi dừng. Kiểu đầu nét khác có thể đổi diện mạo đầu nét gạch. Chọn đầu nét cho hình rồi kiểm tra khung đầu và cuối ở kích thước biểu tượng thực sự sẽ hiện. Với mẫu trang trí lặp, so sánh viền chấm và khoảng cách đầu nét trước khi chọn độ dài nét gạch và khoảng trống.

So sánh tuyến với đường bao có màu tô

Dải gấp khúc dày có thể trông giống đường có viền đó nhưng chứa hình học khác. Đường dẫn viết thủ công thứ hai này đi quanh ranh giới dải và đóng bằng Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Với màu sau, đổi độ dịch nét gạch không có hiệu ứng nhìn thấy:

.filled {
  fill: #ef8067;
  stroke: none;
}

Dải vẫn được tô vì không có viền để chia nét gạch. Đặc tả tô vẽ SVG của W3C phân biệt tô phần trong của hình với tô viền.

Nếu thay bằng fill: none, thêm viền và tạo hoạt ảnh cho đường khép kín đó, viền theo chu vi: dọc một mép, qua đầu rồi trở lại theo mép kia. Nó không thành một tuyến duy nhất đi qua tâm dải.

Khác biệt này cũng giải thích vì sao đồ lại có thể tạo đường cắt đôi. Trong hoạt ảnh, kết quả không mong muốn có thể là đường chạy quanh bên ngoài nét bút. Nếu hiệu ứng dự định cần tuyến giữa, dùng hướng dẫn SVG một đường để kiểm tra hoặc chuẩn bị hình học đó.

Kiểm tra đầu, giữa và kết thúc

Để kiểm tra ví dụ khi dừng, tắt hoạt ảnh và đặt stroke-dashoffset thành 100, 50 và 0. Những giá trị đó tương ứng điểm đầu, hiện nửa đường và trạng thái cuối của đường dẫn đã chuẩn hóa. Chúng không phải phần trăm được nhập vào thuộc tính CSS.

Giữ cả ba phiên bản trong trang thử nhỏ với nút cho các trạng thái đó. Thiết lập giữa đặc biệt hữu ích: hình hoàn chỉnh có thể trông giống nhau, nhưng tuyến vẽ rõ ra giữa quá trình hiện dần.

Chúng tôi kiểm tra các đường dẫn viết thủ công này trong trình duyệt ở độ dịch 100, 50 và 0, rồi chạy một lần hoạt ảnh dài hai giây. Dải có màu tô vẫn hiện trong khi tuyến và chu vi hiện dần khác nhau. Phép thử minh họa các đường dẫn gốc đó; không phải kết quả đồ lại từ PerfectVector hay phép thử mọi trình duyệt.

Kiểm tra màu của phần tử thực tế và kiểu đã tính nếu kết quả khác. Quy tắc CSS có thể ghi đè thuộc tính trình bày, và đường dẫn không có viền nhìn thấy không thể minh họa hiện dần nét gạch. Danh sách kiểm tra viền bị mất giúp tách vấn đề màu và hiển thị trước khi chỉnh thời gian hoạt ảnh.

Quyết định điểm bắt đầu và thứ tự đường dẫn

Đường dẫn đầu bắt đầu tại M30 90, đi ngang đến x=100 rồi dọc đến y=30. Trình tự đó cho quá trình hiện dần một hướng. Nếu bản vẽ cần bắt đầu ở đầu trên, chuẩn bị đường dẫn theo hướng đó thay vì mặc định hoạt ảnh biết chuyển động bút dự định.

Với logo có các dấu riêng, quyết định đường dẫn nào xuất hiện đầu và đường nào tiếp theo. Bắt đầu cùng hoạt ảnh trên mọi đường dẫn tạo hiện dần đồng thời. Chuỗi nối tiếp cần độ trễ rõ ràng hoặc cách bố trí dòng thời gian khác. Kiểm tra giao và chồng lấp tại trạng thái dừng vì hình sau có thể che viền còn đang vẽ.

Bản vẽ gồm nhiều đường dẫn con không nối nhau có thể cần tách thành phần tử để điều khiển thời gian hữu ích. Giữ thiết kế thị giác và quyết định tuyến hoạt ảnh riêng. Ghép những phần không liên quan chỉ để có một đường dẫn có thể tạo kết nối mà họa sĩ không định vẽ.

Thư viện hoạt ảnh có thể giúp điều khiển trình tự, nhưng đầu vào vẫn cần đúng hình học. Tài liệu hoạt ảnh SVG của Motion cung cấp vẽ đường qua giá trị pathLength có hoạt ảnh. Điều khiển thư viện đó là API riêng với hiệu chuẩn có sẵn trong SVG pathLength="100" dùng ở đây; đừng sao chép giá trị ví dụ này sang ví dụ kia mà chưa kiểm tra API.

Giữ hình hoàn chỉnh có sẵn khi không có chuyển động

Ví dụ CSS mặc định có độ dịch không và chỉ đổi trong lúc hoạt ảnh chạy. Truy vấn media giảm chuyển động tắt hiện dần và hiển thị đường hoàn chỉnh. Hướng dẫn prefers-reduced-motion của MDN giải thích cách truy vấn phát hiện tùy chọn người dùng.

Với minh họa tương tác, cung cấp điều khiển kết quả tĩnh cùng nút phát lại. Với biểu tượng giao diện, giữ nhãn chữ nhìn thấy hoặc tên trợ năng giải thích hành động. Hoạt ảnh không nên là cách duy nhất để người đọc hiểu ý nghĩa hình.

Thử trạng thái đầu, gián đoạn và hoàn tất trong vị trí thực tế. Nếu biểu tượng thiết yếu vẫn vô hình khi hoạt ảnh không chạy, sửa kiểu cơ sở trước khi mở rộng hiệu ứng lên toàn giao diện. Minh họa riêng thành công không xác lập mọi kết quả về trình duyệt, công nghệ trợ giúp hay hiệu năng.

Chuẩn bị hình raster mà không hứa có tuyến bút

Nếu mất bản vector gốc và hình PNG hoặc JPG phẳng cần hình chỉnh sửa được, quy trình ảnh sang vector của PerfectVector có thể chuẩn bị một bản SVG để đánh giá. So sánh hình bao, lỗ và vùng riêng với nguồn, rồi kiểm tra đường dẫn tải xuống trong trình chỉnh sửa. Dùng hình học đó làm hình cần đánh giá trước khi lên kế hoạch hoạt ảnh.

Vector hóa không xác định thứ tự bút gốc, tạo dòng thời gian hay bảo đảm đường tâm đơn. Nếu hiện dần cần một tuyến đi qua nét, chủ động vẽ hoặc chuẩn bị tuyến đó. Giữ bản vector gốc hiện có khi có. SVG chỉ nhúng ảnh raster cũng cần kiểm tra ảnh nhúng trước khi mặc định biểu tượng nhìn thấy là hình học đường dẫn chỉnh sửa được.

Chấp nhận hình tĩnh trước, rồi chấp nhận trình tự vẽ hiện dần. Các hướng dẫn chỉnh sửa trên blog trình bày dọn nguồn trước lớp hoạt ảnh.

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

Vì sao SVG vẫn nhìn thấy ở đầu hoạt ảnh đường viền? Kiểm tra xem phần nhìn thấy có phải màu tô không. Thiết lập dash-array và dash-offset ảnh hưởng viền, nên vùng có màu tô có thể vẫn hiện khi viền ẩn.

Vì sao hoạt ảnh vẽ quanh cả hai phía của một đường? Đường dẫn có thể mô tả đường bao khép kín quanh nét dày. Tô viền đường dẫn đó đi theo chu vi. Chuẩn bị tuyến vẽ hở khi hiệu ứng cần một đường đi qua tâm.

Tôi có thể dùng 100% cho toàn độ dài đường dẫn không? Không thể coi đó là thay thế chung trong stroke-dashoffset. Phần trăm của nó chỉ đường chéo chuẩn hóa của khung nhìn. Ví dụ dùng pathLength="100" có sẵn trong SVG với giá trị nét gạch không đơn vị.

Chuyển PNG sang SVG có làm nó sẵn sàng cho hoạt ảnh chữ viết tay không? Vector hóa không kéo theo bảo đảm tự động về thứ tự bút hay đường tâm. Kiểm tra hình học tạo ra và chuẩn bị riêng đường vẽ cùng thời gian.

Nguồn tham khảo

1. MDN — stroke-dasharray — Định nghĩa độ dài nét gạch và khoảng trống luân phiên cho màu viền.
2. MDN — stroke-dashoffset — Giải thích độ dịch mẫu và tham chiếu phần trăm dùng.
3. MDN — pathLength — Mô tả hiệu chuẩn khoảng cách có sẵn trong SVG cho đường dẫn và viền.
4. W3C — Tô vẽ SVG — Phân biệt hành vi màu tô và viền.
5. MDN — prefers-reduced-motion — Mô tả tùy chọn người dùng để cung cấp kết quả tĩnh.
6. Motion — Hoạt ảnh SVG — Mô tả API vẽ đường riêng của thư viện.

Thử một tuyến ở đầu, nửa đường và kết thúc trước khi sắp trình tự toàn hình. Nếu nguồn là hình raster, hãy chuẩn bị một bản SVG chỉnh sửa được để đánh giá, kiểm tra hình học và lên kế hoạch tuyến vẽ riêng.