Ta nieruchomość rozpoczęła życie jako motion-path. Ta i wszystkie inne powiązane właściwości motion- * zmieniają nazwę na offset- * w specyfikacji. Zmieniamy nazwiska tutaj w almanachu. Jeśli chcesz go teraz użyć, prawdopodobnie najlepiej użyć obu składni.
offset-pathNieruchomość w CSS definiuje ścieżkę ruchu dla elementu do naśladowania podczas animacji. Oto przykład wykorzystujący składnię ścieżki 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"); )Ta właściwość nie może być animowana, raczej definiuje ścieżkę animacji. Używamy motion-offsetwłaściwości do tworzenia animacji. Oto prosty przykład animacji przesunięcia ruchu za pomocą animacji @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 */ ) )Zobacz prosty przykład pióra animacji wzdłuż ścieżki za pomocą sztuczek CSS (@ css-tricks) w CodePen.
W tym demo pomarańczowe kółko jest animowane wzdłuż linii offset-pathustawionej w CSS. Właściwie narysowaliśmy tę ścieżkę w SVG z dokładnie tymi samymi path()danymi, ale nie jest to konieczne, aby uzyskać ruch.
Powiedzmy, że narysowaliśmy fajną ścieżkę, taką jak ta w niektórych programach do edycji SVG:
Znaleźlibyśmy ścieżkę taką jak:
Wartość datrybutu jest tym, czego szukamy, i możemy przenieść ją bezpośrednio do CSS i użyć jako offset-path:
Zobacz Pen zEpLRo autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Zwróć uwagę na wartości bez jednostek w składni ścieżki. Jeśli stosujesz CSS do elementu w SVG, te wartości współrzędnych będą używać układu współrzędnych ustawionego w tych SVG viewBox. Jeśli zastosujesz ruch do innego elementu HTML, te wartości będą pikselami.
Zauważ również, że użyliśmy grafiki przedstawiającej palec wskazujący, aby pokazać, jak element jest automatycznie obracany, tak aby był skierowany do przodu. Możesz to kontrolować za pomocą 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 */ )Wartości
To najlepsze, co możemy powiedzieć path()i nonesą to jedyne wartości robocze offset-path.
offset-pathNieruchomość ma przyjąć wszystkie następujące wartości.
path(): Określa ścieżkę w składni współrzędnych SVGurl: Odwołuje się do identyfikatora elementu SVG, który ma być używany jako ścieżka ruchubasic-shape: Określa kształt zgodnie ze specyfikacją CSS Shapes, która obejmuje:circle()ellipse()inset()polygon()
Nawiasem mówiąc, Clippy to niesamowite narzędzie do generowania wartości Basic Shape.
none: W ogóle nie określa ścieżki ruchu
Oto kilka testów:
Zobacz test wartości ścieżki ruchu pióra przez CSS-Tricks (@ css-tricks) w CodePen.
url()Wydaje się, że nawet polecenie elementowi SVG, aby odwoływał się do ścieżki zdefiniowanej przez ten sam plik SVG , nie działa.
Dzięki interfejsowi API animacji sieci Web
Dan Wilson zbadał niektóre z tego w części Future Use: CSS Motion Paths. Masz dostęp do wszystkich tych samych rzeczy w JavaScript poprzez interfejs API animacji sieci Web. Na przykład, załóżmy, że zdefiniowałeś a offset-pathw CSS, nadal możesz sterować animacją za pomocą JavaScript:
Zobacz Pen CSS MotionPath autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Więcej przykładów
Heads-up! Wiele z nich powstało przed przejściem z nazewnictwa motion- * na offset- *. Powinno być całkiem łatwe, jeśli masz takie skłonności.
Zobacz Pen Whoosh! autor: Merih Akar (@merih) na CodePen.
Zobacz Pen pJarJO autorstwa Erica Willigersa (@ericwilligers) na CodePen.
Zobacz samochód Pen scalextric on motion-path autorstwa Kseso (@Kseso) na CodePen.
Zobacz Pen CSS Motion Path Airplane autorstwa Ali Klein (@AliKlein) na CodePen.
Zobacz Pen CSS Animate on SVG Path autorstwa 一丝 (@yisi) na CodePen.
Zobacz Pen Motion Path Infinity autorstwa Dana Wilsona (@danwilson) na CodePen.
Zobacz Spiralę ścieżki ruchu CSS pióra autorstwa Dana Wilsona (@danwilson) w witrynie CodePen.
Zobacz Pen zGzJYd autorstwa 一丝 (@yisi) na CodePen.
Wsparcie przeglądarki
W offset-pathchwili pisania tego tekstu nieruchomość jest nadal uważana za funkcję eksperymentalną. Jeśli obecny brak obsługi przeglądarek sprawia, że wahasz się przed użyciem jej w projekcie, możesz rozważyć użycie GSAP na tym poziomie animacji, o czym Sarah również wspomina w swoim poście. Zapewni to w tej chwili najszerszą obsługę przeglądarek.
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 46 | 72 | Nie | 79 | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |
Od Chrome 46 i Opera 33 (i powiązanych wersji mobilnych) mamy „początkową pomoc” w Blink (bez flagi).
Czy jest inny sposób, aby to zrobić?
Nasza własna Sarah Drasner napisała o SMIL, natywnej metodzie SVG do animacji, oraz o tym, jak animateMotionjest używana do animowania obiektów wzdłuż ścieżki SVG. To wygląda jak:
Ale SMIL jest przestarzały! Więc to nie jest zalecane.
GreenSock to jednak inny sposób, który jest zalecany. Sarah mówi o tym w GSAP + SVG dla zaawansowanych użytkowników: ruch wzdłuż ścieżki (SVG nie jest wymagane). Przykład:
Zobacz Demo pióra dla autoRotate true / false autorstwa Sarah Drasner (@sdras) w CodePen.
Dodatkowe informacje
- Specyfikacja: Moduł ścieżki ruchu, poziom 1 Spec
- Zbiór przykładów na CodePen
- Przyszłe wykorzystanie: ścieżki ruchu CSS autorstwa Dana Wilsona
- Motion Paths - Past, Present and Future autorstwa Cassie Evans
- Bilet do WebKit # 139128
- Bilet Mozilli nr 1186329
- Żądanie funkcji Microsoft Edge
- Stan platformy Chrome: ścieżka ruchu CSS i przykład
- MDN: motion (linki do innych powiązanych właściwości)