Lottie ile Animasyon | CSS Hileleri

0
8

Web’de animasyonun sadece eğlenceli değil, aynı zamanda site ziyaretçilerini müşteriye çevirecek şekilde etkileşimde bulunduğuna inanıyorum. Twitter’daki “Beğen” düğmesini düşünün. Bir tweet’i “beğendiğinizde”, kalp düğmesinin etrafına küçük renkli baloncuklar yayılırken, son “beğendim” durumuna, kırmızı bir dolguya yerleşmeden önce düğme etrafında bir daireye dönüşür. Kalbin sadece ana hatları çizilmekten dolmaya gitmesi çok daha az heyecan verici olurdu. Bu heyecan ve memnuniyet, kullanıcı deneyimini geliştirmek için animasyonun nasıl kullanılabileceğinin mükemmel bir örneğidir.

Bu makale, Adobe After Effects animasyonunu Lottie ile web üzerinde işleme konseptini tanıtacak ve bu, Twitter düğmesi gibi gelişmiş animasyonları ulaşılabilir kılabilir.

Bodymovin, animasyonları JSON olarak dışa aktaran bir Adobe After Effects eklentisidir ve Lottie, bunları mobil cihazlarda ve web’de yerel olarak işleyen bir kütüphanedir. Hernan Torrisi tarafından oluşturuldu. Oh, After Effects kullanmıyorum diye düşünüyorsanız, bu makale muhtemelen benim için değil, bir dakika bekleyin. After Effects de kullanmıyorum, ancak Lottie’yi bir projede kullandım.

Elbette web’de animasyon yapmak için Lottie kullanmanıza gerek yok. Bir alternatif, animasyonları sıfırdan tasarlamaktır. Ancak bu, özellikle Lottie’nin iyi olduğu karmaşık animasyon türleri için zaman alıcı olabilir. Diğer bir alternatif, görüntüleyebilecekleri animasyon türlerinde sınırsız olan, ancak genellikle Bodymovin’in ürettiği JSON dosyalarının boyutunun iki katı olan GIF animasyonlarını kullanmaktır.

Öyleyse içine atlayalım ve nasıl çalıştığını görelim.

JSON’u edinin

Lottie’yi kullanmak için After Effects’ten gelen animasyonu içeren bir JSON dosyasına ihtiyacımız var. Neyse ki bizim için, Icons8’de JSON, GIF ve After Effects formatlarında birçok ücretsiz animasyonlu simge var.

Komut dosyasını HTML’ye ekleyin

Ayrıca Bodymovin oynatıcısının JavaScript kitaplığını HTML’mize almalı ve loadAnimation () yöntemini çağırmalıyız. Temel bilgiler burada gösterilmektedir:

var animation = bodymovin.loadAnimation ({// animationData: {/ * … * /}, container: document.getElementById (‘icon-container’), // gerekli yol: ‘data.json’, // gerekli oluşturucu : ‘svg’, // gerekli döngü: true, // isteğe bağlı otomatik oynatma: true, // isteğe bağlı ad: “Demo Animasyon”, // isteğe bağlı});

Animasyonu etkinleştirin

Animasyon konteynere yüklendikten sonra, nasıl etkinleştirilmesini istediğimize ve olay dinleyicileri ile hangi eylemin etkinleştirmesi gerektiğine göre yapılandırabiliriz. Üzerinde çalışmamız gereken özellikler:

konteyner: animasyonun yüklendiği DOM öğesi: animationrenderer’ı içeren JSON dosyasının göreli yolu: SVG, canvas ve HTMLloop dahil animasyonun formatı: animasyonun döngü otomatik olarak oynatılıp oynatılmayacağını belirtmek için boolean: boolean animasyonun yüklenir yüklenmez oynatılıp oynatılmayacağını belirlemek için isim: gelecekte referans için animasyon adı

Önceki örnekte animationData özelliğinin yorumlandığına dikkat edin. Yol özelliği ile birbirini dışlar ve dışa aktarılan animasyonlu verileri içeren bir nesnedir.

Bir örnek deneyelim

Icons8’deki bu animasyonlu oynatma / duraklatma kontrol simgesiyle Lottie’nin nasıl kullanılacağını göstermek istiyorum:

Bodymovin oynatıcı kitaplığı statik olarak burada barındırılır ve bu şekilde HTML’ye bırakılabilir, ancak bir paket olarak da mevcuttur:

npm lottie-web ### yükleyin veya iplik lottie-web ekleyin

Ve sonra, HTML dosyanıza, yüklenen paketteki dist klasöründeki komut dosyasını dahil edin. Kitaplığı Skypack’ten bir modül olarak da içe aktarabilirsiniz:

lottieWeb’i “https://cdn.skypack.dev/lottie-web” adresinden içe aktarın;

Şimdilik, duraklatma düğmemiz bir döngü içindedir ve ayrıca otomatik olarak oynatılır:

CodePen Embed Yedeklemesi

Bunu, animasyonun bir eylemle tetiklenmesi için değiştirelim.

Bir tetikleyici üzerinde animasyon

Otomatik oynatmayı kapatırsak, bir statik duraklama simgesi alırız çünkü After Effects’ten bu şekilde dışa aktarılmıştır.

CodePen Embed Yedeklemesi

Ama endişelenme! Lottie, animasyon örneklerine uygulanabilecek bazı yöntemler sağlar. Bununla birlikte, npm paketinin dokümantasyonu daha kapsamlıdır.

Burada birkaç şey yapmamız gerekiyor:

Başlangıçta “oynatma” durumu olarak gösterilmesini sağlayın. ClickAnimate’te sonraki tıklamalarda ikisi arasındaki “duraklatıldı” durumuna canlandırın.

GoToAndStop (değer, isFrame) yöntemi burada uygundur. Animasyon konteynere yüklendiğinde, bu yöntem animasyonu sağlanan değere gidecek ve orada duracak şekilde ayarlar. Bu durumda, animasyon değerini oyundayken bulmamız ve ayarlamamız gerekir. İkinci parametre, sağlanan değerin zamana mı yoksa çerçeveye mi dayalı olduğunu belirtir. Bu bir boole türüdür ve varsayılan yanlıştır (yani, zamana dayalı değer). Animasyonu oynatma karesine ayarlamak istediğimizden, bunu true olarak ayarladık.

Zamana dayalı bir değer, animasyonu zaman çizelgesinde belirli bir noktaya ayarlar. Örneğin, duraklatıldığında animasyonun başlangıcındaki zaman değeri 1’dir. Ancak, kare tabanlı bir değer, animasyonu belirli bir kare değerine ayarlar. TechTerms’e göre bir çerçeve, bir dizi görüntüdeki tek bir resimdir. Yani, animasyonun kare değerini 5 olarak ayarlarsam, animasyon animasyondaki beşinci kareye (bu durumda “görüntü dizisi”) gider.

CodePen Embed Yedeklemesi

Farklı değerleri denedikten sonra, animasyonun 11’den 16’ya kadar olan kare değerlerinden oynadığını öğrendim. Bu yüzden güvenli tarafta olmak için 14’ü seçtim.

Şimdi animasyonu, kullanıcı onu tıkladığında duraklayacak ve kullanıcı tekrar tıkladığında oynatılacak şekilde ayarlamalıyız. Ardından, playSegments (segmentler, forceFlag) yöntemine ihtiyacımız var. Segments parametresi, iki sayı içeren bir dizi türüdür. Birinci ve ikinci sayılar, sırasıyla yöntemin okuması gereken ilk ve son kareyi temsil eder. ForceFlag, yöntemin hemen çalıştırılıp çalıştırılmayacağını belirten bir mantıksal değerdir. Yanlış olarak ayarlanırsa, animasyon tetiklenmeden önce segmentler dizisindeki ilk kare olarak belirtilen değerde oynatılıncaya kadar bekler. Doğruysa, bölümleri hemen oynatır.

CodePen Embed Yedeklemesi

Burada, bölümlerin oynatmadan duraklatmaya ve duraklatmadan oynatmaya ne zaman oynatılacağını gösteren bir bayrak oluşturdum. Ayrıca forceFlag boolean değerini true olarak ayarladım çünkü hemen bir geçiş istiyorum.

İşte bizde var! After Effects’ten tarayıcıya bir animasyon oluşturduk! Teşekkürler Lottie!

Tuval?

SVG’yi oluşturucum olarak kullanmayı tercih ediyorum çünkü ölçeklemeyi destekliyor ve en keskin animasyonları oluşturduğunu düşünüyorum. Canvas o kadar güzel işlenmiyor ve ölçeklemeyi de desteklemiyor. Bununla birlikte, bir animasyonu oluşturmak için mevcut bir tuvali kullanmak istiyorsanız, yapmanız gereken bazı ekstra şeyler vardır.

Daha fazlasını yapmak

Animasyon örneklerinde, animasyonun nasıl davranması gerektiğini yapılandırmak için de kullanılabilen olaylar vardır.

Örneğin, aşağıdaki Kalemde, animasyona iki olay dinleyicisi ekledim ve olaylar tetiklendiğinde görüntülenecek bazı metinler ayarladım.

CodePen Embed Yedeklemesi

Tüm olaylar npm paketinin belgelerinde mevcuttur. Bununla birlikte, devam edin ve harika animasyonlar oluşturun diyorum!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz