Lottie'ye Başlarken: Airbnb'nin Harika Animasyon Çerçevesine Genel Bir Bakış

Son zamanlarda burada, Delicious Brains Inc'de daha fazla animasyon çalışması yapıyordum ve sonunda Airbnb'nin övgüler alan Lottie çerçevesini denemeye karar verdim.

Lottie, animasyonları web sitenize veya uygulamanıza entegre etmeyi çok kolaylaştıran bir React Native, Android ve iOS JavaScript kitaplığıdır.

Kullanıcıların animasyonları doğrudan Adobe After Effects'ten çerçeve ile anında kullanılabilecek bir JSON dosyasına aktarmalarına izin verdiği için daha çok bir tasarımcı aracıdır.

Animasyonları genellikle sıfırdan yeniden oluşturmak zorunda olan bir geliştiriciyseniz, bu gönderiyi birlikte çalıştığınız tasarımcılarla paylaşmak isteyebilirsiniz. Ancak hayatınızı ne kadar kolaylaştırabileceğini tam olarak okuyun.

Neden Lottie?

Lottie'yi kontrol etmemi sağlayan şeyin bir kısmı, Brad ve benim ürünlerimize nasıl daha fazla kullanıcı zevki aşılayabileceğimiz hakkında yakın zamanda yaptığımız bir konuşmaydı.

Bir ürünü tasarlarken ve oluştururken, tamamen işlevselliğe odaklanmak ve ek memnuniyet katan ekstra dokunuşları gözden kaçırmak çok kolaydır. Ve bu, kullanıcının bir ürünün pazarlanan faydayı sağladığına dair temel bir beklentisi olduğundan, bu tamamen anlaşılabilir bir durumdur, dolayısıyla bu, ekstra parlaklıktan çok daha fazla önem taşır.

Ancak, tasarım aşamasının bu “kullanıcı zevki” yönünün gözden kaçırılmaması gerektiğini hatırlamak önemlidir. Bir amaca hizmet eden ürünlerle, kullanımı gerçekten iyi hissettiren ürünler arasındaki temel fark budur. Bazı durumlarda, iyi bir ürünü harika bir ürüne de dönüştürebilir.

Şimdi, Lottie'nin bu tür lezzetleri uygulamayı nasıl geliştirdiğine bir göz atalım.

Geçmişte Animasyon

Geçmişte, animasyonları bir siteye veya uygulamaya entegre etmek en hafif tabiriyle çok sıkıcıydı. Esasen üç seçeneğiniz vardı.

A Seçeneği: Resimler veya Video

Animasyonu oluşturmak için bir GIF, video dosyası veya PNG hareketli grafikleri kullanın. Bu, ikisinin daha hızlı yöntemidir, ancak aşırı büyük dosya boyutlarına ve orijinal dosyanın kendisine geri dönmeden animasyonu düzenleme yeteneğinin olmamasına neden olur. Mümkünse bundan her zaman kaçınmaya çalışırım.

B Seçeneği: Flash Animasyon

Adobe Flash en parlak dönemini yaşadı ve yaklaşık 15 yıl boyunca amacına hizmet etti. İçerik oluşturucuların daha önce internette hiç görülmemiş şeyleri yapmalarına izin verdi. Bununla birlikte, "Hoş Geldiniz", Flash, açılış sayfası olan sitelerden kesinlikle nefret ederdim.

Animasyonunuzu Adobe Flash gibi bir araçta oluşturacak ve ardından web'de kullanmak üzere SWF (ShockWave Flash) gibi bir Flash dosyası olarak dışa aktaracaksınız. Ve dürüst olmak gerekirse, oldukça iyi çalıştı.

Ancak zaman geçtikçe ve web geliştikçe Flash oldukça hızlı bir şekilde öldü. HTML5'in yükselişi ve çoğu akıllı telefonun Flash'ı hiç desteklememesi, Flash'ın oldukça gereksiz hale geldiği anlamına geliyordu.

Bunun da ötesinde, Flash içeriğinin yüklenmesi genellikle biraz zaman alırdı ve içeriği değiştirmek isterseniz, çizim tahtasına geri dönüp orijinal dosyanızı düzenlemeniz gerekirdi.

Belki de en büyük engel, kullanıcının söz konusu içeriği görebilmesi için bilgisayarında Adobe Flash Player'ın kurulu olması gerekmesiydi. Bu, bazen Flash oynatıcının daha güncel bir sürümünü gerektiren içerikle karşılaşabileceğiniz için eklentiyi oldukça düzenli bir şekilde güncellemek zorunda kalmanıza neden olur.

Seçenek C: Kodu Kullanarak Oluşturun

Alternatif, tasarımcının animasyonu oluşturması ve bir video dosyasını referans olarak dışa aktarmasıydı. Geliştiricinin daha sonra bu referans dosyasını alması ve kodu kullanarak özenle yeniden oluşturması beklenir.

Bunun faydaları, düşük dosya boyutları ve bu animasyonu kodda daha sonra değiştirebilme yeteneğidir.

Aslında son yazımda SVG'leri (Ölçeklenebilir Vektör Grafikleri) özellikle animasyonla kullanmanın faydalarından biraz bahsetmiştim.

Bu yöntemin Seçenek A'dan çok daha iyi bir uygulama olduğu düşünülse de sorun, bir animasyonu kod kullanarak çoğaltmanın son derece zor ve zaman alıcı olmasıdır. Kodlanmış animasyonun referans dosyayla eşleşme olasılığı son derece düşüktür ve beklendiği gibi. Animasyonu kare kare eşleştirmek için zamanınız olmadığı sürece, animasyonun zamanlaması, boyutu ve nüansları büyük olasılıkla biraz farklı olacaktır.

O kadar etkili bir şekilde aynı animasyonu iki kez yaratmanız gerekiyor… Bu da büyük bir zaman kaybı gibi görünüyor.

İşte burada Lottie devreye girer ve dev bir baş ağrısına çare olur.

Öyleyse nasıl çalıştığına bir göz atalım.

Lottie Nasıl Çalışır?

Öncelikle Adobe After Effects'te bir animasyon oluşturmanız gerekir. After Effects hakkında bir bilginiz yoksa üzülmeyin! Bu gönderide daha sonra bazı ücretsiz Lottie animasyonlarına bağlantı vereceğim.

After Effects'in içindeki vektör araçlarını kullanmaya bağlı kalmanız ve Lottie bu tür görüntülerle ne yapacağını bilemeyeceğinden açıkça bitmap görüntülerden uzak durmanız gerekecek. Şu anda Lottie katıları, şekil katmanlarını, maskeleri, alfa örtülerini, kırpma yollarını ve çizgi desenlerini desteklemektedir.

Animasyon dışa aktarılmaya hazır olduğunda, onu Bodymovin After Effects eklentisi üzerinden çalıştırmanız gerekir ve bazı güzel sihirbazlıklardan sonra, genellikle yalnızca birkaç kilobayt olan bir JSON dosyası yayar.

Ardından, yalnızca birkaç satır kodla, bu JSON dosyasını web sitenize veya uygulamanıza ayrıştırmak için Lottie çerçevesini kullanabilirsiniz.

İnanılmaz.

Lottie İş Başında

Lottie süper hızlı ve kullanımı kolaydır. Animasyonu bir web sitesinde kullanıyorsanız, aşağıdaki kod satırlarını eklemeniz ve JSON dosyasını kendi dosyanızla değiştirmeniz yeterlidir:

Kalemi Gör
Deliciousbrains (@deliciousbrains) tarafından Lottie Animasyon Örneği
CodePen'de.

Lottie ayrıca size animasyon üzerinde daha fazla kontrol sağlayan bazı yerleşik seçeneklere sahiptir. Sayfa yüklendiğinde animasyonu otomatik oynatmayı, döngüye ayarlamayı, üzerine gelindiğinde oynatmayı ayarlamayı, hızını değiştirmeyi ve hatta oynatma kontrolleri eklemeyi seçebilirsiniz. Genişlik, yükseklik ve arka plan rengini de belirleyebilirsiniz.

İşte Daha Önce Yaptığım Bir

Ürünlerimiz için üzerinde çalıştığım bazı animasyonları sergileyecektim ama neden şimdi her şeyi mahvedelim.

Bunun yerine, Lottie ile deneyler yaparken yaptığım kreasyonlardan biri. WP Migrate DB Pro markamızın animasyonlu bir versiyonudur.

Kalemi Gör
Deliciousbrains (@deliciousbrains) tarafından MDB Kuş Animasyonu
CodePen'de.

Yarım saatten daha kısa bir sürede animasyonu yapmıştım ve bir web sayfasında test ediyordum.

Dosya boyutu? Küçük bir 12 kilobayt.

piyango bedava

Daha önce de belirttiğim gibi, Lottie en azından bazı temel bilgilere ve bir Adobe After Effects kopyasına ihtiyaç duyar.

Bunlardan herhangi birine sahip değilseniz endişelenmeyin!

Lottie topluluğu oldukça harika ve elbette yazara kredi verdiğiniz sürece, indirmeye hazır bir sürü ücretsiz animasyonları var.

Bir Lottie Alternatifi

Lottie size göre değilse ve yine de vektör animasyonları yapmak istiyorsanız SVGator'a göz atabilirsiniz. Çok kullanıcı dostu, çevrimiçi bir SVG animasyon aracıdır ve bunu birkaç kez hareket hızı, döndürme ve opaklık gibi temel özellikleri içeren bazı basit animasyonlar oluşturmak için kullandım.

SVGator'da bulunan araçlar şu anda biraz ilkel ve daha az karmaşık animasyonlar için daha uygun.

Ancak, kısa süre önce ekiplerine ulaştım ve sözde, bazı yeni işlevlerle birlikte bu sorunu gidermek için yakında büyük bir güncelleme gelecek.

Karar

Lottie kesinlikle harika ve oyunun kurallarını gerçekten değiştiriyor. Dürüst olmak gerekirse, çok uzun zamandır keşfettiğim en etkileyici araç.

Çok zaman kazandırır ve daha da önemlisi, geliştiriciyi, animasyonu sıfırdan yeniden oluşturmak zorunda kalma anıtsal görevinden kurtarır.

Dürüst olacağım, Lottie'yi kullanmak için After Effects'i ilk kez başlattığımda, vaatlerini yerine getirip getiremeyeceği konusunda şüpheliydim.

Geçmişte, tasarım ve geliştirme arasındaki boşluğu bir tür dönüşümle kapattığını iddia eden hileli araçlar tarafından yakıldım. Bunun klasik bir örneği, PSD'leri veya Sketch dosyalarını HTML ve CSS'ye aktaran araçlardır.

Genellikle bu araçlar işlerini yapar ve HTML ve CSS'yi mucizevi bir doğrulukla dışa aktarır. Ancak bu dosyalardan birini açtığınızda sözdizimi ve yapı genellikle berbattır ve kod tabanını korumak hemen hemen imkansızdır (Dreamweaver'ı kim hatırlıyor?). Benim gözümde bu, aracı oldukça gereksiz kılıyor.

Bu tür araçlarla ilgili geçmişim nedeniyle Lottie'yi kullanma konusunda çekincelerim vardı, ancak işin gerçeği şu ki, animasyonlarımı dışa aktarırken ve kullanırken sıfır sorunla karşılaştım.

Evet, her animasyon mükemmel bir şekilde dışa aktarıldı! O kadar şaşırdım ki, kendimi Lottie'yi kırmaya çalışırken buldum, dışa aktarılan JSON'u etkileyip etkilemeyeceğini görmek için alışılmışın dışında şekillerde animasyonlar yarattım. Hayır… Lanet olası robotlar.

Evet, Lottie oldukça harika ve tasarım araç kutumda hızla önemli bir araç haline geliyor.

Sonuç olarak, bir animasyon oluşturmam için gereken sürenin artık %80-90 daha hızlı olacağını tahmin ediyorum. Bu, daha önce tartıştığım "kullanıcı zevkini" geliştirerek, ürünlerimize biraz TLC enjekte etmeye gerçek zamanlı olarak biraz zaman ayırabileceğim anlamına geliyor.

Ürünlerimize yönelik gelecekteki güncellemelerde kullanıcı memnuniyetine odaklanıldığını görmeyi bekleyebilirsiniz. Özellikle çok yakında WP Migrate DB Pro için heyecan verici bir güncelleme geliyor… 👀

Ve bir yan not olarak, bugünlerde kesinlikle çok küçük bir dosya boyutuna sahip bir parça zengin medya içeriği oluşturma yeteneğine sahip olmamız beni hala şaşırtıyor.

Lottie, After Effects veya genel olarak animasyonlar hakkında herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlarda bana bildirin.