Jalur offset - Trik CSS | CSS Almanak 2024

Properti ini mulai hidup sebagai motion-path. Ini, dan semua properti motion- * terkait lainnya, diubah namanya menjadi offset- * dalam spesifikasi. Kami mengubah nama di sini di almanak. Jika Anda ingin menggunakannya sekarang, mungkin yang terbaik adalah menggunakan kedua sintaks tersebut.

The offset-pathproperti di CSS mendefinisikan jalur gerakan elemen untuk tindak selama animasi. Berikut adalah contoh menggunakan sintaks jalur 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"); )

Properti ini tidak dapat dianimasikan, melainkan mendefinisikan jalur untuk animasi. Kami menggunakan motion-offsetproperti untuk membuat animasi. Berikut adalah contoh sederhana menganimasikan motion-offset dengan animasi @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 */ ) )

Lihat Contoh Pena Sederhana untuk Membuat Animasi Sepanjang Jalan dengan CSS-Tricks (@ css-trick) di CodePen.

Dalam demo ini, lingkaran oranye sedang dianimasikan sepanjang yang offset-pathkita atur di CSS. Kami sebenarnya menggambar jalur itu di SVG dengan path()data yang sama persis , tetapi itu tidak perlu untuk mendapatkan mosi.

Katakanlah kita menggambar jalur yang funky seperti ini di beberapa perangkat lunak pengeditan SVG:

Kami akan menemukan jalan seperti:

Nilai datribut adalah apa yang kita cari, dan kita dapat memindahkannya langsung ke CSS dan menggunakannya sebagai offset-path:

Lihat Pen zEpLRo oleh CSS-Tricks (@ css-trick) di CodePen.

Perhatikan nilai unitless di sintaks jalur. Jika Anda menerapkan CSS ke elemen dalam SVG, nilai koordinat tersebut akan menggunakan sistem koordinat yang diatur dalam SVG itu viewBox. Jika Anda menerapkan gerakan ke beberapa elemen HTML lainnya, nilai tersebut akan menjadi piksel.

Perhatikan juga kami menggunakan grafik penunjuk jari untuk menunjukkan bagaimana elemen diputar secara otomatis sehingga agak menghadap ke depan. Anda dapat mengontrolnya dengan 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 */ )

Nilai

Sejauh yang kami tahu, path()dan nonesatu-satunya nilai kerja untuk offset-path.

The offset-pathproperti seharusnya menerima semua nilai-nilai berikut.

path(): Menentukan jalur dalam sintaks koordinat SVG
url: Referensi ID elemen SVG untuk digunakan sebagai jalur pergerakan
basic-shape: Menentukan bentuk sesuai dengan spesifikasi Bentuk CSS, yang meliputi:
- circle()
- ellipse()
- inset()
- polygon()
Clippy adalah alat yang luar biasa untuk menghasilkan nilai Bentuk Dasar.
none: Menentukan tidak ada jalur gerakan sama sekali

Berikut beberapa tesnya:

Lihat pengujian nilai jalur gerak Pena oleh CSS-Tricks (@ css-trick) di CodePen.

Bahkan memberi tahu elemen SVG untuk mereferensikan jalur yang mendefinisikan SVG yang sama melalui url()tampaknya tidak berhasil.

Dengan Web Animations API

Dan Wilson mengeksplorasi beberapa dari ini di Future Use: CSS Motion Paths. Anda memiliki akses ke semua hal yang sama di JavaScript melalui Web Animations API. Misalnya, Anda telah menentukan offset-pathdalam CSS, Anda masih dapat mengontrol animasi melalui JavaScript:

Lihat Pen CSS MotionPath oleh CSS-Tricks (@ css-trick) di CodePen.

Lebih Banyak Contoh

Perhatian! Banyak dari ini dibuat sebelum perubahan dari motion- * naming menjadi offset- *. Akan cukup mudah untuk memperbaikinya jika Anda mau.

Lihat Pen Whoosh! oleh Merih Akar (@merih) di CodePen.

Lihat Pen pJarJO oleh Eric Willigers (@ericwilligers) di CodePen.

Lihat mobil skalektrik Pena di jalur gerak oleh Kseso (@Kseso) di CodePen.

Lihat Pen CSS Motion Path Airplane oleh Ali Klein (@AliKlein) di CodePen.

Lihat Animasi Pena CSS di Jalur SVG oleh 一丝 (@yisi) di CodePen.

Lihat Pen Motion Path Infinity oleh Dan Wilson (@danwilson) di CodePen.

Lihat Spiral Jalur Gerakan CSS Pena oleh Dan Wilson (@danwilson) di CodePen.

Lihat Pen zGzJYd oleh 一丝 (@yisi) di CodePen.

Dukungan browser

The offset-pathproperti masih dianggap sebagai fitur eksperimental pada saat tulisan ini. Jika kurangnya dukungan browser saat ini membuat Anda ragu-ragu untuk menggunakannya pada suatu proyek, Anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk level animasi ini, yang juga dibahas oleh Sarah dalam postingannya. Ini akan menawarkan Anda dukungan browser terluas saat ini.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
46	72	Tidak	79	Tidak

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Tidak

Mulai Chrome 46 dan Opera 33 (dan versi seluler terkait), kami memiliki "dukungan awal" di Blink (tanpa tanda).

Apakah ada cara lain untuk melakukan ini?

Sarah Drasner kita sendiri menulis tentang SMIL, metode asli SVG untuk animasi, dan bagaimana animateMotiondigunakan untuk menganimasikan objek di sepanjang jalur SVG. Sepertinya:

Tapi SMIL tidak digunakan lagi! Jadi ini tidak disarankan.

GreenSock adalah cara lain yang disarankan. Sarah membicarakan hal ini di GSAP + SVG untuk Pengguna Daya: Gerak Sepanjang Jalur (SVG tidak diperlukan). Contoh:

Lihat Demo Pena untuk autoRotate benar / salah oleh Sarah Drasner (@sdras) di CodePen.