Harta ini memulakan kehidupan sebagai motion-path. Ini, dan semua sifat gerakan-* lain yang berkaitan, dinamakan semula sebagai ofset- * dalam spesifikasi. Kami menukar nama di sini dalam almanak. Sekiranya anda mahu menggunakannya sekarang, mungkin sebaiknya gunakan kedua-dua sintaks tersebut.
The offset-pathharta di CSS mentakrifkan jalan pergerakan dengan elemen untuk follow ketika animasi. Berikut adalah contoh menggunakan sintaks jalan 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 boleh dianimasikan, melainkan menentukan jalan untuk animasi. Kami menggunakan motion-offsetharta tanah untuk membuat animasi. Berikut adalah contoh mudah animasi gerakan-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 Mudah Pen Animasi Sepanjang Jalan oleh CSS-Tricks (@ css-tricks) di CodePen.
Dalam demo ini, lingkaran oren sedang dianimasikan di sepanjang yang offset-pathkita tetapkan di CSS. Kami benar-benar membuat jalan itu di SVG dengan path()data yang sama , tetapi itu tidak perlu dilakukan.
Katakanlah kita membuat jalan yang menyeronokkan seperti ini dalam beberapa perisian penyuntingan SVG:
Kami akan menemui jalan seperti:
Yang dnilai atribut adalah apa yang kita kejar, dan kita boleh bergerak terus ke CSS dan menggunakannya sebagai offset-path:
Lihat Pen zEpLRo oleh CSS-Tricks (@ css-tricks) di CodePen.
Perhatikan nilai tanpa unit dalam sintaks jalan. Sekiranya anda menerapkan CSS ke elemen dalam SVG, nilai koordinat tersebut akan menggunakan sistem koordinat yang disiapkan dalam SVG tersebut viewBox. Sekiranya anda menerapkan gerakan ke beberapa elemen HTML yang lain, nilainya akan menjadi piksel.
Perhatikan juga bahawa kami menggunakan grafik jari yang menunjuk untuk menunjukkan bagaimana elemen diputar secara automatik sehingga agak menghadap ke hadapan. Anda boleh mengawalnya 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
Sebaik mungkin yang kami tahu, path()dan nonesatu-satunya nilai yang berfungsi untuk offset-path.
The offset-pathharta sepatutnya menerima segala nilai-nilai berikut.
path(): Menentukan jalan dalam sintaks koordinat SVGurl: Merujuk ID elemen SVG untuk digunakan sebagai jalan pergerakanbasic-shape: Menentukan bentuk sesuai dengan spesifikasi Bentuk CSS, yang meliputi:circle()ellipse()inset()polygon()
Clippy adalah alat hebat untuk menghasilkan nilai Bentuk Asas.
none: Menentukan tidak ada jalan gerakan sama sekali
Berikut adalah beberapa ujian:
Lihat ujian nilai jalan gerakan Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Bahkan memberitahu elemen SVG untuk merujuk jalan yang ditentukan melalui SVG yang sama url()sepertinya tidak berfungsi.
Dengan API Animasi Web
Dan Wilson meneroka beberapa perkara ini di Future Use: CSS Motion Paths. Anda mempunyai akses ke semua perkara yang sama dalam JavaScript melalui Web Animations API. Sebagai contoh, katakan anda telah menentukan offset-pathCSS, anda masih dapat mengawal animasi melalui JavaScript:
Lihat Pen CSS MotionPath oleh CSS-Tricks (@ css-tricks) di CodePen.
Lebih Banyak Contoh
Awas! Sebilangan besar ini dibuat sebelum perubahan dari gerakan- * penamaan menjadi ofset- *. Sekiranya mudah untuk memperbaikinya sekiranya anda cenderung.
Lihat Pen Whoosh! oleh Merih Akar (@merih) di CodePen.
Lihat Pen pJarJO oleh Eric Willigers (@ericwilligers) di CodePen.
Lihat kereta skalaxtric Pen di jalan bergerak oleh Kseso (@Kseso) di CodePen.
Lihat Pesawat Laluan Gerak Pen CSS oleh Ali Klein (@AliKlein) di CodePen.
Lihat Pen CSS Animate di SVG Path oleh 一丝 (@yisi) di CodePen.
Lihat Pen Motion Path Infinity oleh Dan Wilson (@danwilson) di CodePen.
Lihat Pen Spiral Motion Path Spiral oleh Dan Wilson (@danwilson) di CodePen.
Lihat Pen zGzJYd oleh 一丝 (@yisi) di CodePen.
Sokongan penyemak imbas
The offset-pathharta masih dianggap ciri eksperimen pada masa penulisan ini. Sekiranya kekurangan sokongan penyemak imbas semasa membuat anda ragu untuk menggunakannya pada projek, maka anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk tahap animasi ini, yang juga diliputi oleh Sarah dalam siarannya. Ini akan memberi anda sokongan penyemak imbas terluas buat masa ini.
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 46 | 72 | Tidak | 79 | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |
Pada Chrome 46 dan Opera 33 (dan versi mudah alih yang berkaitan), kami mempunyai "sokongan awal" di Blink (tanpa bendera).
Adakah cara lain untuk melakukan ini?
Sarah Drasner kita sendiri menulis mengenai SMIL, kaedah asli SVG untuk animasi, dan bagaimana animateMotionia digunakan untuk menghidupkan objek di sepanjang jalan SVG. Ia kelihatan seperti:
Tetapi SMIL sudah tidak digunakan lagi! Jadi ini tidak digalakkan.
GreenSock adalah cara lain, yang disyorkan. Sarah bercakap mengenai perkara ini dalam GSAP + SVG untuk Pengguna Kuasa: Gerakan Sepanjang Jalan (SVG tidak diperlukan). Contoh:
Lihat Pen Demo untuk autoRotate true / false oleh Sarah Drasner (@sdras) di CodePen.
Maklumat tambahan
- Spesifikasi: Modul Laluan Gerak Spesifikasi Tahap 1
- Koleksi Contoh di CodePen
- Penggunaan Masa Depan: Laluan Gerak CSS oleh Dan Wilson
- Jalur Gerak - Masa Lalu, Sekarang dan Masa Depan oleh Cassie Evans
- Tiket WebKit # 139128
- Tiket Mozilla # 1186329
- Permintaan ciri Microsoft Edge
- Status Platform Chrome: Laluan dan contoh Pergerakan CSS
- MDN: gerakan (pautan ke sifat lain yang berkaitan)