Ofset yolu - CSS Hileleri | CSS Almanak 2024

Bu özellik olarak hayata başladı motion-path. Bu ve diğer tüm ilgili hareket- * özellikleri, spesifikasyonda ofset- * olarak yeniden adlandırılıyor. Burada almanakta isimleri değiştiriyoruz. Şu anda kullanmak istiyorsanız, muhtemelen en iyisi her iki sözdizimini de kullanmaktır.

CSS'deki offset-pathözellik, bir öğenin animasyon sırasında izleyeceği bir hareket yolunu tanımlar. SVG yolu sözdiziminin kullanıldığı bir örnek:

.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"); )

Bu özellik canlandırılamaz, bunun yerine animasyonun yolunu tanımlar. Biz kullanmak motion-offsetanimasyon oluşturmak için özellik. İşte bir @keyframes animasyonuyla hareket ofsetini canlandırmanın basit bir örneği:

.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 */ ) )

CodePen'de CSS Hileleriyle (@ css-tricks) Bir Yol Boyunca Animasyon Yapmanın Kalem Basit Örneğine bakın.

Bu demoda, turuncu daire offset-pathCSS'de belirlediğimiz boyunca canlandırılıyor . Aslında bu yolu SVG'de tamamen aynı path()verilerle çizdik , ancak bu hareketi elde etmek için gerekli değil.

Bazı SVG düzenleme yazılımlarında bunun gibi ilginç bir yol çizdiğimizi varsayalım:

Şöyle bir yol bulurduk:

dÖzellik değeri Peşinde olduğumuz budur ve biz CSS düz taşımak ve olarak kullanabilirsiniz offset-path:

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem zEpLRo'ya bakın.

Yol sözdizimindeki birimsiz değerlere dikkat edin. CSS'yi SVG içindeki bir öğeye uyguluyorsanız, bu koordinat değerleri, söz konusu SVG'ler içinde ayarlanan koordinat sistemini kullanacaktır viewBox. Hareketi başka bir HTML öğesine uyguluyorsanız, bu değerler piksel olacaktır.

Ayrıca, öğenin bir tür ileriye bakacak şekilde otomatik olarak nasıl döndürüldüğünü göstermek için işaret eden bir parmak grafiği kullandığımızı da unutmayın. Bunu şununla kontrol edebilirsiniz 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 */ )

Değerler

Söyleyebileceğimiz kadar iyi path()ve nonebunun için çalışan tek değerler offset-path.

offset-pathÖzellik aşağıdaki tüm değerleri kabul gerekiyordu.

path(): SVG koordinatları sözdiziminde bir yol belirtir
url: Hareket yolu olarak kullanılacak bir SVG öğesinin kimliğine başvurur
basic-shape: Aşağıdakileri içeren CSS Şekilleri spesifikasyonuna göre bir şekil belirtir:
- circle()
- ellipse()
- inset()
- polygon()
Bu arada Clippy, Temel Şekil değerlerini oluşturmak için harika bir araçtır.
none: Hiçbir hareket yolu belirtmez

İşte bazı testler:

CodePen'de CSS-Tricks (@ css-tricks) tarafından yapılan Kalem hareket yolu değerleri testine bakın.

Bir SVG öğesine aynı SVG aracılığıyla tanımlanan bir yola başvurmasını söylemek bile url()işe yaramıyor gibi görünüyor.

Web Animasyonları API'si ile

Dan Wilson, Gelecekte Kullanım: CSS Hareket Yolları'nda bunların bir kısmını araştırdı. JavaScript'teki tüm bu şeylere Web Animasyonları API'si aracılığıyla erişebilirsiniz. Örneğin, offset-pathCSS'de bir tanımladığınızı varsayalım, yine de JavaScript aracılığıyla animasyonu kontrol edebilirsiniz:

CodePen'de CSS-Tricks (@ css-tricks) ile Kalem CSS MotionPath'e bakın.

Daha fazla örnek

Önüne bak! Bunların çoğu, hareket-* isimlendirmeden ofset-*'ye geçişten önce oluşturuldu. Bu kadar istekliysen, onları düzeltmek oldukça kolay olmalı.

Pen Whoosh'u görün! Yazan: Merih Akar (@merih) on CodePen.

CodePen'de Eric Willigers (@ericwilligers) tarafından hazırlanan Pen pJarJO'ya bakın.

CodePen'de Kseso (@Kseso) tarafından hareket yolunda Pen scalextric arabasına bakın.

CodePen'de Ali Klein (@AliKlein) tarafından hazırlanan Pen CSS Hareket Yolu Uçağına bakın.

CodePen'de 一丝 (@yisi) tarafından yazılan SVG Yolunda Kalem CSS Animate'e bakın.

CodePen'de Dan Wilson (@danwilson) tarafından hazırlanan Pen Motion Path Infinity konusuna bakın.

CodePen'de Dan Wilson (@danwilson) tarafından hazırlanan Kalem CSS Hareket Yolu Spiralini görün.

CodePen'de 一丝 (@yisi) tarafından Kalem zGzJYd'ye bakın.

Tarayıcı desteği

offset-pathMülkiyet hala bu yazının yazıldığı anda deneysel bir özellik olarak kabul edilir. Tarayıcı desteğinin mevcut olmaması, onu bir projede kullanmakta tereddüt etmenize neden oluyorsa, Sarah'nın gönderisinde de ele aldığı bu animasyon düzeyi için GSAP kullanmayı düşünebilirsiniz. Bu size şu anda en geniş tarayıcı desteğini sunacaktır.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom	Firefox	IE	Kenar	Safari
46	72	Hayır	79	Hayır

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Hayır

Chrome 46 ve Opera 33'ten (ve ilgili mobil sürümlerden) itibaren, Blink'te (işaret yok) "ilk desteğimiz" var.

Bunu yapmanın başka bir yolu var mı?

Sarah Drasner'ımız, SVG'nin animasyonlar için yerel yöntemi olan SMIL ve animateMotionnesneleri bir SVG yolu boyunca canlandırmak için nasıl kullanıldığı hakkında yazdı . Şöyle görünüyor:

Ancak SMIL kullanımdan kaldırılıyor! Yani bu tavsiye edilmiyor.

GreenSock, önerilen başka bir yoldur. Sarah, GSAP + SVG for Power Users: Bir Yol Boyunca Hareket (SVG gerekli değildir) bölümünde bundan bahsediyor. Misal:

CodePen'de Sarah Drasner (@sdras) tarafından autoRotate true / false için Kalem Demosuna bakın.