Lottie ile Başlayarak: Airbnb’nin olağanüstü animasyon çerçevesine genel bakış
Son zamanlarda Delicious Brains Inc.’de daha fazla animasyonlu işler yaptım ve sonunda Airbnb’den sıcak bir karşılama alan Lottie çerçevesini denemeye karar verdim. Lottie, animasyonu web sitenize veya uygulamanıza entegre etmeyi çok kolaylaştıran bir JavaScript React Native, Android ve iOS kütüphanesidir. Bu daha çok bir tasarımcı aracıdır, çünkü kullanıcıların animasyonları doğrudan Adobe’den sonra efektlerden bir çerçeve ile kullanılabilecek JSON dosyalarına dışa aktarmasına olanak tanır. Bir animasyonu sıfırdan yeniden yaratmak zorunda olan bir geliştiriciyseniz, bu gönderiyi sizinle çalışan herhangi bir tasarımcı ile paylaşmak isteyebilirsiniz. Ama hayatınızı ne kadar kolay yapabileceğini öğrenmek için okumaya devam edin.
Neden Lotti? Lottie’yi kontrol etmemi sağlayan şey, Brad ve ben ile ürünlerimizde nasıl daha fazla zevk kullanıcısı aşılayabileceğimiz hakkında yeni bir sohbetti. Bir ürün tasarlarken ve inşa ederken, işlevselliğe tam olarak odaklanmak çok kolaydır ve ek memnuniyet katan ekstra dokunuşu yok sayar. Ve bu tam olarak anlaşılmıştır, çünkü kullanıcılar bir ürünün pazarlandığı gibi yardımcı programlar sağladığı temel beklentileri vardır, bu nedenle bu ekstra parlaklıktan çok daha önemlidir. Ancak, bu tasarım aşamasından “kullanıcı zevkinin” yönünün göz ardı edilmemesi gerektiğini hatırlamak önemlidir. Bu, kullanımı gerçekten iyi hisseden hedefleri ve ürünleri olan ürünler arasındaki temel farktır. Bazı durumlarda, iyi ürünleri harika ürünlere dönüştürebilir.
Lottie’nin zevk uygulamasını nasıl artırdığını görelim.Geçmişte animasyon geçmişte, animasyonu bir siteye veya uygulamaya entegre etmek çok sıkıcıdır.Temel olarak üç seçeneğiniz var.Seçenek A: Animasyon oluşturmak için resim veya video kullanın GIF, Video Dosyası veya Sprite PNG.Bu, her ikisinden de daha hızlı bir yöntemdir, ancak çok büyük bir dosya boyutu üretir ve orijinal dosyanın kendisine dönmeden animasyonu düzenleme yeteneği yoktur.Mümkünse her zaman bundan kaçınmaya çalışıyorum.Seçenek B: Flash Adobe Flash Animation’ın en parlak günleri var ve amacına 15 yıl veya daha fazla hizmet veriyor.Bu, içerik üreticilerinin daha önce Web’de hiç görülmemiş şeyleri yapmalarını sağlar.Ne demek, “hoş geldiniz”, flash, sıçrama sayfası olan sitelerden gerçekten nefret etmeye alışkındım.
Animasyonunuzu Adobe Flash gibi araçlarda oluşturacak ve ardından Web’de kullanmak için SWF (Shockwave Flash) gibi bir flash dosyası olarak dışa aktaracaksınız.Ve dürüst olmak gerekirse, oldukça iyi çalışıyor.Ancak zamanla ve web gelişir, Flash hızlı bir şekilde ölür.HTML5’in ortaya çıkışı ve çoğu akıllı telefonun Flash’ı desteklememesi, çok aşırı hale geldiği anlamına gelir.Buna ek olarak, flash içerik genellikle yüklemek için zaman gerektirir ve içeriği değiştirmek istiyorsanız, resim kartına geri dönmeli ve orijinal dosyanızı düzenlemeniz gerekir.Belki de en büyük engel, kullanıcıların söz konusu içeriği görmek için makinelerine Adobe Flash Player’ı yüklemesi gerektiğidir.Bu, eklentiyi düzenli olarak güncellemeye neden olur, çünkü bazen daha fazla -date flash oynatıcı sürümü gerektiren içerik bulacaksınız.
Seçenek C: Alternatif bir kod kullanmak, tasarımcıların referans olarak animasyonlar oluşturması ve video dosyalarını dışa aktarması içindir. Geliştiricinin daha sonra referans dosyasını alması ve kodu kullanarak geri dönmesi zorluğu ile beklenir. Avantajlar düşük dosya boyutları ve animasyonu kodda daha sonra değiştirme yeteneğidir. Aslında, son yazımda, özellikle animasyonla SVG (ölçeklenebilir vektör grafikleri) kullanmanın faydaları hakkında biraz yazdım. Bu yöntem A seçeneğinden çok daha iyi bir uygulama olarak kabul edilse de, sorun çok zordur ve kod kullanarak animasyonu çoğaltmak zaman alır. Kodlanmış animasyon olasılığı referans dosyasına eşleşir. Animasyon çerçevesini çerçeve, zaman, boyut ve animasyon nüansından sonra eşleştirmek için zamanınız yoksa, muhtemelen biraz azalması muhtemeldir. Bu nedenle, aynı animasyonu iki kez yapmanız gerekir … bu zaman harcıyor gibi görünüyor. Burası Lottie’nin dev bir baş ağrısı ilacına giriyor ve haline geliyor. Öyleyse nasıl çalıştığına bakalım. Lottie nasıl çalışır? İlk olarak, Adobe After Effects’te bir animasyon oluşturmanız gerekir. After Effects hakkında bir anlayışınız yoksa endişelenmeyin! Bu yazının ilerleyen saatlerinde bazı ücretsiz Lottie animasyonlarına bağlanacağım. Lotting Effects’te bir vektör kullanmaya devam etmelisiniz ve Bitmap görüntülerinden açıkça kaçınmalısınız, çünkü Lottie bu tür bir görüntü ile ne yapacağını bilmeyecektir. Şu anda, Lottie katı, şekil katmanları, maske, alfa mates, trim yollarını ve çizgi desenini desteklemektedir.
Animasyon dışa aktarılmaya hazır olduktan sonra, Vücut Firması’ndan sonra Bodymovin’den geçmelisiniz ve bazı güzel mucizelerden sonra, genellikle sadece birkaç kilobayt olan bir JSON dosyası yayınladı. Ve sonra, sadece birkaç satır kodla, siz JSON dosyasını web sitenize veya uygulamanıza ayırmak için Lottie Framework’ü kullanabilir. Harika. Lottie in Action Lottie çok hızlı ve kullanımı kolaydır. Web sitesinde animasyon kullanıyorsanız, aşağıdaki kod satırlarını girebilir ve JSON dosyasını kendinizle değiştirebilirsiniz: Codepen’deki DelicioNbrains (@Deliciousbrains) tarafından Pen Sample Lottie Animation’a bakın.
Lottie ayrıca animasyon üzerinde daha fazla kontrol sağlayan birkaç varsayılan seçeneğe sahiptir. Sayfayı yüklerken animasyonu otomatik olarak oynatmayı seçebilir, döngüye ayarlayabilir, yüzerken döndürülecek, hızı değiştirecek veya hatta bir döner kontrol ekleyebilirsiniz. Genişliği, yüksekliği ve arka plan rengini de belirleyebilirsiniz. Ürünlerimiz için yaptığım bazı animasyonları göstermeden önce yaptığım şey bu, ama neden şimdi her şeyi mahvediyor. Bunun yerine, bu Lottie’yi denerken kreasyonlarımdan biri. Bu, WP Migrate DB Pro için markamızın animasyonlu versiyonudur.
Neden Lotti? Lottie’yi kontrol etmemi sağlayan şey, Brad ve ben ile ürünlerimizde nasıl daha fazla zevk kullanıcısı aşılayabileceğimiz hakkında yeni bir sohbetti. Bir ürün tasarlarken ve inşa ederken, işlevselliğe tam olarak odaklanmak çok kolaydır ve ek memnuniyet katan ekstra dokunuşu yok sayar. Ve bu tam olarak anlaşılmıştır, çünkü kullanıcılar bir ürünün pazarlandığı gibi yardımcı programlar sağladığı temel beklentileri vardır, bu nedenle bu ekstra parlaklıktan çok daha önemlidir. Ancak, bu tasarım aşamasından “kullanıcı zevkinin” yönünün göz ardı edilmemesi gerektiğini hatırlamak önemlidir. Bu, kullanımı gerçekten iyi hisseden hedefleri ve ürünleri olan ürünler arasındaki temel farktır. Bazı durumlarda, iyi ürünleri harika ürünlere dönüştürebilir.
Lottie’nin zevk uygulamasını nasıl artırdığını görelim.Geçmişte animasyon geçmişte, animasyonu bir siteye veya uygulamaya entegre etmek çok sıkıcıdır.Temel olarak üç seçeneğiniz var.Seçenek A: Animasyon oluşturmak için resim veya video kullanın GIF, Video Dosyası veya Sprite PNG.Bu, her ikisinden de daha hızlı bir yöntemdir, ancak çok büyük bir dosya boyutu üretir ve orijinal dosyanın kendisine dönmeden animasyonu düzenleme yeteneği yoktur.Mümkünse her zaman bundan kaçınmaya çalışıyorum.Seçenek B: Flash Adobe Flash Animation’ın en parlak günleri var ve amacına 15 yıl veya daha fazla hizmet veriyor.Bu, içerik üreticilerinin daha önce Web’de hiç görülmemiş şeyleri yapmalarını sağlar.Ne demek, “hoş geldiniz”, flash, sıçrama sayfası olan sitelerden gerçekten nefret etmeye alışkındım.
Animasyonunuzu Adobe Flash gibi araçlarda oluşturacak ve ardından Web’de kullanmak için SWF (Shockwave Flash) gibi bir flash dosyası olarak dışa aktaracaksınız.Ve dürüst olmak gerekirse, oldukça iyi çalışıyor.Ancak zamanla ve web gelişir, Flash hızlı bir şekilde ölür.HTML5’in ortaya çıkışı ve çoğu akıllı telefonun Flash’ı desteklememesi, çok aşırı hale geldiği anlamına gelir.Buna ek olarak, flash içerik genellikle yüklemek için zaman gerektirir ve içeriği değiştirmek istiyorsanız, resim kartına geri dönmeli ve orijinal dosyanızı düzenlemeniz gerekir.Belki de en büyük engel, kullanıcıların söz konusu içeriği görmek için makinelerine Adobe Flash Player’ı yüklemesi gerektiğidir.Bu, eklentiyi düzenli olarak güncellemeye neden olur, çünkü bazen daha fazla -date flash oynatıcı sürümü gerektiren içerik bulacaksınız.
Seçenek C: Alternatif bir kod kullanmak, tasarımcıların referans olarak animasyonlar oluşturması ve video dosyalarını dışa aktarması içindir. Geliştiricinin daha sonra referans dosyasını alması ve kodu kullanarak geri dönmesi zorluğu ile beklenir. Avantajlar düşük dosya boyutları ve animasyonu kodda daha sonra değiştirme yeteneğidir. Aslında, son yazımda, özellikle animasyonla SVG (ölçeklenebilir vektör grafikleri) kullanmanın faydaları hakkında biraz yazdım. Bu yöntem A seçeneğinden çok daha iyi bir uygulama olarak kabul edilse de, sorun çok zordur ve kod kullanarak animasyonu çoğaltmak zaman alır. Kodlanmış animasyon olasılığı referans dosyasına eşleşir. Animasyon çerçevesini çerçeve, zaman, boyut ve animasyon nüansından sonra eşleştirmek için zamanınız yoksa, muhtemelen biraz azalması muhtemeldir. Bu nedenle, aynı animasyonu iki kez yapmanız gerekir … bu zaman harcıyor gibi görünüyor. Burası Lottie’nin dev bir baş ağrısı ilacına giriyor ve haline geliyor. Öyleyse nasıl çalıştığına bakalım. Lottie nasıl çalışır? İlk olarak, Adobe After Effects’te bir animasyon oluşturmanız gerekir. After Effects hakkında bir anlayışınız yoksa endişelenmeyin! Bu yazının ilerleyen saatlerinde bazı ücretsiz Lottie animasyonlarına bağlanacağım. Lotting Effects’te bir vektör kullanmaya devam etmelisiniz ve Bitmap görüntülerinden açıkça kaçınmalısınız, çünkü Lottie bu tür bir görüntü ile ne yapacağını bilmeyecektir. Şu anda, Lottie katı, şekil katmanları, maske, alfa mates, trim yollarını ve çizgi desenini desteklemektedir.
Animasyon dışa aktarılmaya hazır olduktan sonra, Vücut Firması’ndan sonra Bodymovin’den geçmelisiniz ve bazı güzel mucizelerden sonra, genellikle sadece birkaç kilobayt olan bir JSON dosyası yayınladı. Ve sonra, sadece birkaç satır kodla, siz JSON dosyasını web sitenize veya uygulamanıza ayırmak için Lottie Framework’ü kullanabilir. Harika. Lottie in Action Lottie çok hızlı ve kullanımı kolaydır. Web sitesinde animasyon kullanıyorsanız, aşağıdaki kod satırlarını girebilir ve JSON dosyasını kendinizle değiştirebilirsiniz: Codepen’deki DelicioNbrains (@Deliciousbrains) tarafından Pen Sample Lottie Animation’a bakın.
Lottie ayrıca animasyon üzerinde daha fazla kontrol sağlayan birkaç varsayılan seçeneğe sahiptir. Sayfayı yüklerken animasyonu otomatik olarak oynatmayı seçebilir, döngüye ayarlayabilir, yüzerken döndürülecek, hızı değiştirecek veya hatta bir döner kontrol ekleyebilirsiniz. Genişliği, yüksekliği ve arka plan rengini de belirleyebilirsiniz. Ürünlerimiz için yaptığım bazı animasyonları göstermeden önce yaptığım şey bu, ama neden şimdi her şeyi mahvediyor. Bunun yerine, bu Lottie’yi denerken kreasyonlarımdan biri. Bu, WP Migrate DB Pro için markamızın animasyonlu versiyonudur.
Codepen’deki Deliciousbrains (@Deliciousbrains) tarafından MDB Kuş Animasyon Kalemine bakın. Yarım saatten daha kısa bir sürede bir animasyon yaptım ve bir web sayfasında test ettim.
Dosya boyutu? Küçük bir 12 kilobayt. Lottie daha önce de bahsettiğim gibi ücretsiz, Lottie’nin en azından ADobe After Effects’ın bazı temel bilgileri ve kopyası var. Her ikiniz de yoksa, endişelenme! Lottie topluluğu oldukça harika ve elbette yazara saygı duyduğunuz sürece indirilmeye hazır birçok ücretsiz animasyona sahipler. Alternatif Lottie Lottie sizin için değilse ve hala bir vektör animasyonu oluşturmak istiyorsanız, SVGATOR’u kontrol edebilirsiniz. Bu, çok kullanıcı dostu olan çevrimiçi bir SVG animasyon aracıdır ve hafifleme, rotasyon ve opaklık gibi temel özellikleri içeren bazı basit animasyonlar oluşturmak için birkaç kez kullandım. SVGATOR’da mevcut araçlar bugün biraz ilkel ve daha uygundur Animasyon için çok karmaşık değil.
Ancak, yakın zamanda ekibleriyle temasa geçtim ve bunun birkaç yeni işlevle birlikte bunun üstesinden gelmek için büyük güncellemenin yakında mevcut olacağı bildirildi. Lottie’nin kararı gerçekten olağanüstü ve bu gerçek bir oyun değiştirici. Dürüst olmak gerekirse, bu çok uzun zamandır bulduğum en etkileyici araç. Bu çok zaman kazandırır ve daha da önemlisi geliştiricileri anıtsal görevlerden kurtarır, çünkü animasyonları en başından yeniden yapmaları gerekir. Dürüst olacağım, Lottie’yi ilk kez kullanarak efektlerden sonra başlattığımda, sözünü yerine getirip getiremeyeceğine şüpheliyim.
