CSS Hareket Yolu ile Eğlence

Faydalı Alternatif Metin Yazma

Bir yol boyunca bir öğeyi canlandırmak, geliştiriciler olarak normalde büyük bir eski JS kitaplığına (örneğin GSAP) için. Ama yeni ile CSS Hareket Yolu modülü, sadece CSS kullanarak süslü yol animasyonları oluşturabiliriz!

Bu özelliklerle uğraşan birkaç eğlenceli küçük animasyon oluşturdum – bu makalede yer alan bazı tekniklerin üzerinden geçeceğiz.

Kalemi Gör SVG ile CSS Hareket Yolu (yalnızca Chrome) Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi. Kalemi Gör CSS Hareket Yolu spirografı Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Basit yol animasyonu

Bir yol animasyonu oluşturmak için kullanmamız gereken offset-path birlikte canlandırmak istediğimiz yolun bir değeriyle (sözdizimi bir SVG yolu gibidir) ve offset-distance Emlak:

.obj {
offset-path: path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0');
animation: move 2000ms;
}

@keyframes move {
100% {
offset-distance: 100%;
}
}

İşte basit bir örnek:

Kalemi Gör Basit ofset yolu animasyonu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ayrıca, animasyonlu nesnenin dönme davranışını ve konumunu kullanarak da değiştirebiliriz. offset-rotate ve offset-position sırasıyla, bu da bazı harika etkilere izin verebilir. Bu demoda etkisini görebilirsiniz offset-rotate varsayılanla karşılaştırıldığında: ikinci nesne yola göre dönmez, ancak sabit kalır.

Kalemi Gör Ofset-döndürme ile ofset yolu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

SVG ile hareket yolu

Ayrıca elementlerin ilerlediği gerçek yolu gösterebilmekle de ilgilendim. Yukarıdaki demolarda bunu, HTML’de aynı yol koordinatlarına sahip bir SVG ekleyerek ve mutlak konumlandırma kullanarak yapıyorum. Spesifikasyon, bir URL’nin path() işlevi (benzer clip-path), bu, basitçe SVG yol kimliğini ekleyebileceğimiz ve yolu CSS’de kopyalamaktan kaçınabileceğimiz anlamına gelir. (Birçok koordinatlı karmaşık bir yol eklediğimizde CSS dosyamız çok dağınık oluyor!) Ancak bu henüz hiçbir yerde desteklenmiyor gibi görünüyor, bu yüzden yol koordinatlarını kullanmakla yetinmek zorunda kalacağız.

Bu aynı zamanda, SVG’mizi ölçekleyemediğimiz ve yol eşleşmesini sağlayamadığımız için animasyonu duyarlı hale getirme konusunda daha az kontrole sahip olduğumuz anlamına gelir. SVG genişliğini değiştirmeye çalışırsak, yol orijinal boyutunda kalır. (Başka bir şekilde davranmasını sağlayamadığım için durumun böyle olduğundan oldukça eminim – bir çözümünüz varsa, lütfen bana bildirin!)

Yolu “çizmek”

Bir öğeyi yalnızca yol boyunca hareket ettirmekle kalmaz, aynı zamanda yolu çiziyormuş gibi görünmesini de sağlayabiliriz. SVG yollarını zaten “çizebiliriz”. stroke-dashoffset ve stroke-dasharray CSS’deki özellikler – işin püf noktası, stroke-dasharray yolun uzunluğuna değer, ardından bu ofset değerinden 0’a animasyon:

.path {
stroke-dasharray: 520;
stroke-dashoffset: 520;
animation: draw 1000ms;
}

@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}

(CSS Tricks’ten bu makale daha ince ayrıntılara böler.)

“Çizim” animasyonunu aynı süre ve zamanlama işleviyle (yavaşlatma) kullanırsak, offset-path animasyon, sonra bunlar aynı anda gerçekleşecek ve yol, animasyonlu öğe tarafından çiziliyormuş gibi görünecektir.

Bu makalenin başındaki iki demodan ikincisinde, nesneyi yol boyunca hareket ettiren animasyon, kontur animasyonunun her döngüsü için iki kez döner. kullanma stroke-dashoffset çizgi çizilir ve sonra tekrar dışarı çıkar (pozitiften negatif bir ofset değerine gider), bu nedenle çizilir ve ardından silinir:

.path {
stroke-dasharray: 520;
stroke-dashoffset: 520;
animation: draw 1000ms;
}

@keyframes draw {
0% {
stroke-dashoffset: 520;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -520;
}
}

ile daha akıcı animasyon box-shadow

Bu animasyonların küçük bir püf noktası daha var: İlk örneği oluştururken, oldukça hızlı olduğu için animasyonun bazı noktalarda gergin göründüğünü fark ettim. Animasyonu daha doğal hissettirmek için nesne hareket ederken bir kutu gölgesi ekledim – bu bir tür hareket bulanıklığı efekti yaratır ve çok daha yumuşak hissettirir:

@keyframes move {
10% {
opacity: 1;
offset-distance: 0%;
}
30% {
box-shadow: -0.5rem 0 0.3rem salmon;
}
70% {
box-shadow: -0.5rem 0 0.3rem salmon;
}
90% {
opacity: 1;
offset-distance: 100%;
box-shadow: none;
}
100% {
opacity: 0;
offset-distance: 100%;
}
}

tarayıcı desteği

Yazma sırasında, offset-path yalnızca Chrome’da desteklenir – Firefox’ta şu şekilde etkinleştirilebilir: layout.css.motion-path.enabled bayrağı ve sonraki Firefox sürümünde standart olarak desteklenecek şekilde ayarlanmıştır.

Kaynaklar

Dan Wilson yararlı bir seçim yarattı Codepen demoları Hareket Yolunun farklı özelliklerini gösteren. O da yeni yayınlandı bir makale üstünde. (Teşekkürler Adam Kuhn bana onun yönüne işaret ettiğin için!)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.