Offset-đường dẫn - Thủ thuật CSS

Tài sản này bắt đầu cuộc sống như motion-path. Điều này và tất cả các thuộc tính chuyển động- * liên quan khác, đang được đổi tên thành offset- * trong thông số kỹ thuật. Chúng tôi đang thay đổi tên ở đây trong niên giám. Nếu bạn muốn sử dụng nó ngay bây giờ, có lẽ tốt nhất là sử dụng cả hai cú pháp.

Các offset-pathbất động sản trong CSS định nghĩa một con đường chuyển động cho một yếu tố để theo trong phim hoạt hình. Đây là một ví dụ sử dụng cú pháp đường dẫn SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Thuộc tính này không thể là hoạt ảnh, thay vào đó nó xác định đường dẫn cho hoạt ảnh. Chúng tôi sử dụng thuộc motion-offsettính để tạo hoạt ảnh. Dưới đây là một ví dụ đơn giản về tạo hiệu ứng chuyển động bù trừ với hoạt ảnh @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Xem Ví dụ đơn giản về Pen về hoạt ảnh dọc theo đường dẫn bằng CSS-Tricks (@ css-trick) trên CodePen.

Trong bản trình diễn này, vòng tròn màu cam đang được làm động dọc theo hình offset-pathchúng tôi đặt trong CSS. Chúng tôi thực sự đã vẽ đường dẫn đó trong SVG với cùng một path()dữ liệu, nhưng điều đó không cần thiết để có được chuyển động.

Giả sử chúng tôi đã vẽ một đường dẫn thú vị như thế này trong một số phần mềm chỉnh sửa SVG:

Chúng tôi sẽ tìm thấy một con đường như:

Các dgiá trị thuộc tính là những gì chúng tôi sau đó, và chúng ta có thể di chuyển nó thẳng đến CSS và sử dụng nó như là offset-path:

Xem Pen zEpLRo của CSS-Tricks (@ css-trick) trên CodePen.

Lưu ý các giá trị không đơn vị trong cú pháp đường dẫn. Nếu bạn đang áp dụng CSS cho một phần tử trong SVG, các giá trị tọa độ đó sẽ sử dụng hệ thống tọa độ được thiết lập trong SVG đó viewBox. Nếu bạn đang áp dụng chuyển động cho một số phần tử HTML khác, các giá trị đó sẽ là pixel.

Cũng lưu ý rằng chúng tôi đã sử dụng hình ảnh một ngón tay trỏ để cho thấy cách phần tử được tự động xoay để nó hướng về phía trước. Bạn có thể kiểm soát điều đó bằng offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Giá trị

Tốt nhất như chúng tôi có thể nói, path()và nonelà giá trị hoạt động duy nhất cho offset-path.

Các offset-pathtài sản có nghĩa vụ phải chấp nhận tất cả các giá trị sau.

path(): Chỉ định một đường dẫn trong cú pháp tọa độ SVG
url: Tham chiếu ID của phần tử SVG được sử dụng làm đường di chuyển
basic-shape: Chỉ định một hình dạng phù hợp với đặc tả CSS Shapes, bao gồm:
- circle()
- ellipse()
- inset()
- polygon()
Nhân tiện, Clippy là một công cụ tuyệt vời để tạo các giá trị Hình dạng cơ bản.
none: Chỉ định không có đường chuyển động nào cả

Dưới đây là một số thử nghiệm:

Xem bài kiểm tra giá trị đường chuyển động của Pen bằng CSS-Tricks (@ css-trick) trên CodePen.

Ngay cả việc yêu cầu một phần tử SVG tham chiếu đến một đường dẫn được xác định cùng một SVG qua url()dường như không hoạt động.

Với API hoạt ảnh trên web

Dan Wilson đã khám phá một số điều này trong Sử dụng tương lai: Đường dẫn chuyển động CSS. Bạn có quyền truy cập vào tất cả những thứ tương tự này trong JavaScript thông qua API Web Animations. Ví dụ: giả sử bạn đã xác định một offset-pathtrong CSS, bạn vẫn có thể kiểm soát hoạt ảnh thông qua JavaScript:

Xem Pen CSS MotionPath bằng CSS-Tricks (@ css-trick) trên CodePen.

Các ví dụ khác

Đứng lên! Rất nhiều trong số này đã được tạo ra trước khi thay đổi từ đặt tên chuyển động- * sang offset- *. Sẽ khá dễ dàng để sửa chúng nếu bạn quá nghiêng.

Xem Pen Whoosh! bởi Merih Akar (@merih) trên CodePen.

Xem Pen pJarJO của Eric Willigers (@ericwilligers) trên CodePen.

Xem chiếc xe theo tỷ lệ Pen trên đường chuyển động của Kseso (@Kseso) trên CodePen.

Xem Pen CSS Motion Path Airplane của Ali Klein (@AliKlein) trên CodePen.

Xem Pen CSS Animate trên SVG Path của 一丝 (@yisi) trên CodePen.

Xem Pen Motion Path Infinity của Dan Wilson (@danwilson) trên CodePen.

Xem Pen CSS Motion Path Spiral của Dan Wilson (@danwilson) trên CodePen.

Xem Pen zGzJYd của 一丝 (@yisi) trên CodePen.

Hỗ trợ trình duyệt

Tài offset-pathsản vẫn được coi là một tính năng thử nghiệm tại thời điểm viết bài này. Nếu việc thiếu hỗ trợ trình duyệt hiện tại khiến bạn do dự khi sử dụng nó trong một dự án, thì bạn có thể muốn xem xét sử dụng GSAP cho mức hoạt ảnh này, Sarah cũng đề cập trong bài đăng của mình. Điều này sẽ cung cấp cho bạn hỗ trợ trình duyệt rộng nhất tại thời điểm này.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
46	72	Không	79	Không

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	81	Không

Kể từ Chrome 46 và Opera 33 (và các phiên bản di động có liên quan), chúng tôi có "hỗ trợ ban đầu" trong Blink (không có cờ).

Có một cách khác để làm điều này?

Sarah Drasner của chính chúng tôi đã viết về SMIL, phương pháp gốc của SVG cho hoạt ảnh và cách animateMotionđược sử dụng để tạo hoạt ảnh cho các đối tượng dọc theo đường dẫn SVG. Nó có vẻ như:

Nhưng SMIL không được dùng nữa! Vì vậy, điều này không được khuyến khích.

GreenSock là một cách khác, được khuyến khích. Sarah nói về điều này trong GSAP + SVG dành cho người dùng thành thạo: Chuyển động dọc đường (không bắt buộc phải có SVG). Thí dụ:

Xem Pen Demo để biết Tự động xác định đúng / sai của Sarah Drasner (@sdras) trên CodePen.