Lottie animasyonu nedir?

Lottie, herhangi bir platformda statik varlıklar kadar kolay bir şekilde kullanabileceğiniz JSON tabanlı bir animasyon dosyası formatıdır. Herhangi bir cihazda çalışan ve pikselleşmeden yukarı veya aşağı ölçeklenebilen küçük dosyalardır. Ve en iyi yanı - Lottie animasyonları herhangi bir kodlama bilgisi gerektirmez!

Lottie animasyonu hayatınızı nasıl kolaylaştırabilir?

Lotties'i temelde herhangi bir platformda kullanabilirsiniz: web veya mobil. Bu, onları hem uygulamalara hem de web sayfalarına sorunsuz bir şekilde entegre edebileceğiniz anlamına gelir.

Lottie animasyonları, mesajlaşma platformlarında çıkartma olarak bile kullanılabilir. GIF ve PNG formatına kıyasla JSON dosyaları küçüktür, bu nedenle bir Lottie dosyası indirme hızını önemli ölçüde artırır ve kullanılan disk alanı miktarını azaltır.

Lottie'de vektör ve raster öğelerini karıştırabilir ve çalışma zamanında dönüşümler uygulayabilirsiniz. Daha iyi anlamak için, ITG.digital'de Lottie animasyonlarını nasıl canlandırdığımızı ve kullandığımızı göstereceğiz .

Açılış sayfamızdaki tüm eğlenceli animasyonlar Lottie dosyalarıdır (başlıktan etkileşimli köpek değişiklikleri bile).

Lottie animasyonları nasıl yapılır

Adım 1 - Tasarım
Öncelikle, tasarımınızı tamamlamanız ve animasyon için hazırlamanız gerekir. Başlangıçta solda gördüğünüz köpeği olan kızın bir resmimiz vardı. Kızımızın ayağına vururken ağır bir şekilde iç çekmesini planladık, bu yüzden pozu değiştirmemiz gerekiyordu. Duruşu değiştirdikten sonra, kızın elbisesi için bazı doku seçeneklerini çizdik ve sonunda hangisini canlandıracağımıza karar verdik.

Dokularla canlandırmaya karar verirseniz bazı şeyleri bilmelisiniz :

• Vektör dokularını kullanmak daha iyidir - bu şekilde son dosyanız daha küçük olacaktır.
• Dokuyu çizerken, dokunuzda ne kadar az nokta ve parça varsa onu canlandırmanın o kadar kolay olacağını unutmayın. Ayrıca, dokunuzu basit tutarak son animasyon dosyasının boyutunu küçültmüş olursunuz.
• Mümkünse animasyonda maske kullanmayın, aksi takdirde bazı tarayıcılarda hatalar görünebilir.

Bir sonraki adım animasyondur. Bir Lottie dosyası elde etmek için bazı çizimleri canlandırmanız ve ardından bunları JSON'a dönüştürmeniz gerekir.

Bu adım için alabileceğiniz en iyi tavsiye - basit tutun. Efekt kullanmayın ve katmanların ana özelliklerini canlandırmayın: konum, döndürme, ölçek, opaklık. Yol animasyonu da mükemmel şekilde çalışacaktır.

Yapılması ve yapılmaması gerekenler

Lottie'nin desteklediği veya desteklemediği uzun bir After Effects özellikleri listesi var. Burada bulabilirsiniz . Ama dürüst olmak gerekirse, canlandırmaya başlamadan önce gerçekten bilmeniz gereken birkaç şey var.

Şunları kullanabilirsiniz:
- her türden animasyonlu şekil
- renkler, opaklık, degradeler
- png / jpeg öğeleri
- kırpma yolu
- tekrarlayıcı

Şunları kullanamazsınız veya daha iyi kullanamazsınız:
- maskeler
- dolgu dışında her türlü efekt
- yolu birleştir

Sonunda, bu sevimli ve biraz gergin kızı yakaladık.

Daha sonra, animasyonları uygularken, animasyonlarınız döngüye alınabilir veya yalnızca bir kez oynatılabilir.

Bu nedenle, web sitesinde / uygulamada mükemmel bir döngü istiyorsanız, After Effects'ten dışa aktarmadan önce animasyonunuzun mükemmel bir döngüye sahip olduğundan emin olun.

3. Adım - Animasyonları Dışa Aktarın

Animasyonu bitirdiğinizde, animasyonları dışa aktarmanın zamanı geldi.
Bunu yapmak için 2 yolunuz var: Bodymovin eklentisi ve Lottie dosyaları eklentisi.

Bodymovin eklentisi
1. Bodymovin'i açın ve işlemek için ihtiyacınız olan kompozisyonu bulun.
2. Ayarları yapın. Animasyonunuzda bir metin varsa "Glifler" i, animasyonda png / jpeg resimleri kullanıyorsanız "Varlıkları JSON’a dahil et" seçeneğini işaretleyin.
3. Oluştur'a tıklayın, işte bu kadar!
4. Animasyonunuzu bodymovin'de veya Lottie files web sitesinde önizleyin .
5. Animasyonunuzu Lottie'ye aşina olmayan birine göstermek istiyorsanız, işlemede "demo" yu tıklamanız yeterlidir. Bu şekilde yalnızca JSON dosyasına değil, aynı zamanda herkesin tarayıcı sayfasında önizleyebileceği HTML'ye de sahip olacaksınız.

Lottie dosyaları eklentisi
Lottie dosyalarıyla aynı şeyi yapabilirsiniz, ancak bu eklenti bodymovin + 'dan daha fazla özelliğe sahiptir ve tarayıcıda Lottie web sitesine dosya yüklemenize gerek yoktur. Bu eklenti ile, animasyonları Lottie'de olduğu gibi After Effects'te önizleyebilirsiniz.

Lottie eklentisi ile oluşturma adımları hemen hemen aynıdır, ancak bazı ekstra özelliklere sahiptirler:

• tam ve iyi bir çalışma önizlemesi, tıpkı Lottie web sitesinde olduğu gibi
• animasyonları doğrudan Lottie web sitesine yüklemek
• Ücretsiz Lottie animasyonlarına sahip bir kütüphane (beğendiğiniz animasyonu seçebilir ve doğrudan eklentiden aep dosyasını indirebilirsiniz )

Son olarak, bu eklentinin sadece artıları değil, büyük bir dezavantajı da vardır - bodymovin eklentisine kıyasla oldukça yavaş bir render.

Artık animasyonlarınız ihtiyaç duyduğunuz her an kullanıma hazır. Lottie dosyalarını iOS, Android, web ve React Native'de değişiklik yapmadan kullanabilirsiniz.

Netrix'te Lottie animasyonlarını nasıl kullanıyoruz?

Etkileşimli köpek değişikliği
Bu tür bir animasyon oldukça karmaşıktır. Mavi köpeğin iki farklı pozisyonunu canlandırmamız ve köpeklerin değişimini etkileşimli hale getirmemiz gerekiyordu.
Bunu başarmak için, bir köpekten diğerine 6 geçişi canlandırdık ve bu animasyonları bir kompozisyonda topladık.
Geliştiricilerimizi uygularken JSON dosyalarımızın zaman kodu ile çalışıyorlardı, bu yüzden hiçbir şeyi canlandırmaları gerekmedi, bu da çok zaman kazandırdı.

Yani hangi köpeği seçerseniz seçin, animasyon akıcı ve eğlenceli olacaktır.

Köpek koşma hattı - web sitemizdeki başka bir eğlenceli ve kolay animasyon. Sadece iki şeye ihtiyacımız vardı: koşan bir köpek ve konum özelliğini canlandırmak.

Animasyonlu sekmeler resimler

Harika görünüyor, değil mi? Canlandırmanın ve uygulamanın zor olduğunu düşünebilirsiniz, ancak çok zaman almadı. Her sekme için çizimler tasarladık ve biraz canlandırdık. Sonra onları tek bir kompozisyona koyduk ve JSON'a aktardık. Köpek değiştiren animasyonlarda olduğu gibi, geliştiriciler zaman koduyla çalıştı ve bu da web sitemizi kısa sürede hayata geçirmemizi sağladı.

Eğlenceli fiyatlandırma animasyonları

Bu sevimli dinolar da After Effects'te canlandırıldı ve Lottie kullanılarak web sitemize uygulandı. Küçük detaylar her zaman fark yaratır, bu yüzden Lottie'yi kullanmaktan ve tasarımınızın en küçük parçalarını bile hayata geçirmekten korkmayın.

Sonuçlar

Özetlemek gerekirse, ITG.digital üzerinde çalışırken Lottie'nin bizi birçok kez kurtardığını söyleyebiliriz - fikirlerimizi javascript animasyonlarını kullanmaya kıyasla 3 kat daha hızlı uyguladık .

Ve en önemlisi - son animasyonları tam olarak hayal ettiğimiz gibi aldık . After Effects'teki animasyon, araçlarda javascript animasyonlarından çok daha kolay ve esnektir. Bu, tasarım sürecinde daha yaratıcı olmamızı sağladı. Ayrıca, tasarımı düzeltmek ve düzeltmek için çok zaman kazandık. Ne zaman bir şeyi değiştirmek zorunda olsak, sadece iki adımın yapılması gerekiyordu: After Effects'te düzenlemeler yapmak, eski JSON dosyasını geliştiricimiz tarafından yenisiyle değiştirmek ve gitmeye hazırdık.

Lottie Files'ın Wordpress, Shopify, Webflow, Squarespace, Wix, Readymag veya başka herhangi bir Web sitesinin yanı sıra iOS ve Android uygulamaları ile uyumlu olduğunu unutmayın!

Animasyonlarınızın görüntü seçeneklerini ayarlamak için kod yazmanıza gerek yok. Bunun için, bunu sizin için yapacak bir Lottie web oynatıcınız var.

Artık Lottie hakkında her şeyi biliyorsunuz ve bahse gireriz web ve uygulamalar için harika animasyonlarınızı oluşturmaya hazırsınız!

Başlamadan önce, daha önce gördüğünüz dalgalanan kız animasyonumuzla oynayabilirsiniz. JSON ve AEP dosyalarını buradan , HTML buradan indirebilirsiniz .

Vera Sprenne ve Netrix ekibi tarafından hazırlanmıştır ❤

Dribbble , Behance ve Youtube'da daha fazlasını kontrol edin .