LOTTIEFILES EKLENTİSİ İLE ANİMASYON EKLEMEK

Geliştirdiğimiz uygulamayı daha canlı tutmak ve inşaaların daha uzun süreler kullanmasını sağlamanın yollarından bir tanesi görsel olarak güzel bir arayüz tasarlamaktır. Sitemize ilgi çekici animasyonlar ekleyerek daha güzel gözükmesini sağlayabiliriz. Peki neden LottieFiles kullanıyoruz?

Animasyon görseller eklemek için GIF de kullanabiliriz, fakat LottieFiles bizim için hafif ve ölçeklenebilir animasyonlar sağlayan bir eklentidir. LottieFiles, JSON olarak indirdiğimiz animasyon dosyasını, kendi librarysini kullanarak bizim için bir animasyona dönüştürür. Bu JSON dosyalarını indirebilmek için LottieFiles websitesini kullanabiliriz. Bu websitesine giriş yaptığımız zaman bir sürü menü göreceksiniz. Fakat kısaca Discover menüsüne bakabiliriz. Burada bizim için önemli olan Ücretsiz ve Ücretli Animasyonların bulunduğu sayfalar. İsterseniz ”Free Ready-to-use Animations” kısmına tıklayarak ücretsiz animasyonlar indirebilirsiniz veya ”Marketplace” sayfasından ücretli bir şekilde satın alabilirsiniz.

Ücretsiz animasyonlara girdiğimizde karşımıza bir sürü seçenek çıkacak. Dilediğiniz animasyonları da arama kutusunu kullanarak bulabilirsiniz.

Beğendiğimiz herhangi bir animasyona tıkladığımızda önümüze bir pop-up açılacak. Buradan animasyonla ilgili renk, hız gibi ayarları düzenleyebilir, yorum yapabilir ve animasyonu indirebilirsiniz. ”İndir” butonuna bastığımız zaman karşımıza birkaç tane seçenek çıkacaktır. Buradan MP4, GIF veya bizim kullanacak olduğumuz Lottie JSON olarak animasyonunuzu indirebilirsiniz.

İndirdiğimiz LottieFiles dosyalarını çalıştırabilmek için Forgedan Lottie Animations eklentisini kullanacağız.

Eklenti indirmesi tamamlandıktan sonra dahil etmek istediğimiz projeyi açıyoruz ve manage dependencies sekmesinden Lottie Animations eklentisini projemize dahil ediyoruz.

İndirdiğimiz Lottie JSON dosyasını DATA sekmesinde en altta bulunan resources klasörüne sağ tıklayarak içeriye aktarıyoruz.

Dosyayı içeriye aktardıktan sonra bir ayar yapmamız gerekiyor. Eklediğimiz Resource’nin Deploy Action’ını Deploy to Target Directory olarak değiştirmemiz gerekiyor.

Daha sonra eklemek istediğimiz sayfayı açıyoruz ve boş bir container ekliyoruz. Name bilgisini dolduruyoruz. Bunu Container Idsini alabilmek için kullanacağız. Ek olarak, eğer boyutunu ayarlamak isterseniz containera bir yükseklik tanımlayabilirsiniz.

Bu işlemi yaptıktan sonra LottieAnimations altındaki Animation blogunu container’ın yanına ekliyoruz.

Blogumuz bizden bazı bilgileri doldurmamızı bekleyecektir. Bunları oluşturduğumuz Container Idsi ve JSON dosyamızı pathi olarak dolduracağız.

Path değerini Resources altında eklediğimiz JSON dosyası altındaki URL değişkenini kullanarak seçiyoruz.

Diğer inputlara bakar isek Loop kısmı animasyonun tekrar edip etmemesini ayarlamak için kullanılmaktadır. True, False veya Sayı olacak şekilde 3 farklı şekilde girilebilir. Burayı boş bırakmanız durumunda False olarak başlayacaktır. Autoplay True veya False şeklinde girilebilir. True girilmesi durumda uygulama başlar başlamaz animasyona başlayacaktır. Default olarak True gelir. Renderer özelliği “svg”, “canvas” veya “html” olacak şekilde girilebilir. Boş bırakılması halinde “svg” olarak çalışacaktır. Name kısmında gelecekte referans verilmesi gerekmesi gibi durumlarda doldurabilirsiniz.

Bunlar dışında önceden tanımlanmış Eventler için Client Action tanımlayabilirsiniz.

Tüm işlemleri kaydedip uygulamayı yayınladıktan sonra animasyonumuzun hazır bir hale gelmiş olması gerekiyor.