"LottieFiles, hareket tasarımındaki karmaşıklığı ortadan kaldırır. En kolay yol ile bir Lottie oluşturmanıza, düzenlemenize, test etmenize, işbirliği yapmanıza ve göndermenize izin verir."

Lottie Nedir?

Lottie, animasyonların kullanımını web siteleri ve mobil uygulamalar için daha kolay hale getiren bir teknolojidir. Lottie, Adobe tarafından geliştirilen bir açık kaynaklı animasyon dosya formatıdır. JSON formatındaki Lottie dosyaları, kompleks animasyonları (ücretsiz veya pro olarak) vektör grafikler olarak tanımlamak için kullanılır.

Dosya Boyutu Optimizasyonu

Gif ile oranla daha küçük boyutta dosyalar kullanmanıza olanak sağlar. Bu da projenizde büyük bir hafıza işgalinin önüne geçer.

Lottie Creator

Ayrıca Lottie'nin animasyon oluşturma ekranında animasyonunuzu oluşturabilirsiniz. Kendi çektiğiniz videoyu da burada animasyon haline getirebilirsiniz. Daha sonra oluşturduğunuz bu animasyonu web sitenizde ya da mobil uygulamalarınızda kullanabilirsiniz.

Figma'dan Lottie'ye Animasyonlar Oluşturun

Figma'da üretime hazır animasyonlar oluşturup ve LottieFiles for Figma ile bunları web sitelerinizde ve uygulamalarınızda kullanmak üzere Lottie olarak dışa aktarabilirsiniz.

İş Birliği Yapın

Oluşturduğunuz animasyonu takım arkadaşlarınızla paylaşıp işbirliği yapabilirsiniz. Özel olarak ekibinizin için çalışma alanı yaratabilirsiniz. Böylece birlikte yaratmaya devam edebilirsiniz.

Renk Paleti Seçeneği

Oluşturduğunuz veya Lottie'de var olan animasyonlarınızı marka renklerinizi veya seçtiğiniz renk paletini kullanarak kişiselleştirebilirsiniz.

Projemize nasıl ekleriz?

Lottie'nin ne olduğunu öğrendiğimize göre artık projemize nasıl eklenir kısmına geldik. Bu yazımda iOS uygulamamıza Swift dilini kullanarak nasıl animasyon ekleyeceğimizi anlatacağım.

1. İlk önce Lottie'de bir hesap oluşturalım ve giriş yapalım.
2. Daha sonra kullanmak istediğimiz animasyonu seçelim veya oluşturalım ve bilgisayarımıza indirelim.
3. CocoaPods kullanarak projemize pod dosyamızı ekleyelim.

pod 'lottie-ios'

Pod dosyamıza yukarıdaki kodu ekleyelim ve kaydedelim. Terminalde "pod init" komutunu çalıştıralım ve işte Lottie kütüphanemiz projemize yüklendi.

4. İndirdiğimiz animasyonumuzu projemize ekleyelim.

5. Lottie kütüphanesini projemize import etmeyi unutmayalım.

import Lottie

6.Bir view oluşturuyoruz. (Bir view oluşturup sonraki adımda animasyonu bunun içine ekledim. Sadece animasyonu da ekranınıza ekleyebilirsiniz.)

let ovalView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
ovalView.layer.cornerRadius = 20 // Köşe yarıçapını ayarla
view.addSubview(ovalView)

Eğer view oluşturmadan sadece animasyonu projemize eklemek için aşağıdaki gibi bir fonksiyon oluşturabiliriz.

private var animationView: LottieAnimationView!

 func setupAnimationView() {
        animationView = LottieAnimationView(name: "Animation - 1700893103063")
        
        
        let animationWidth: CGFloat = 400.0
        let animationHeight: CGFloat = 400.0
        
        let xPosition = (view.bounds.width - animationWidth) / 2.0
        let yPosition = (view.bounds.height - animationHeight) / 2.0
        
        animationView.frame = CGRect(x: xPosition, y: yPosition, width: animationWidth, height: animationHeight)
        
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.animationSpeed = 1.0
        view.addSubview(animationView)

        animationView.play()
    }

7. LottieView oluşturuyoruz.

 let animationView = LottieAnimationView(name: "Animation - 1700893103063") //animasyon dosyası
 animationView.frame = ovalView.bounds
 animationView.contentMode = .scaleAspectFill
 ovalView.addSubview(animationView) //Animasyonu View'e ekliyoruz

 animationView.loopMode = .loop //animasyonu döngüye almak için
 animationView.animationSpeed = 1.0 //animasyonun hızını ayarlayabiliriz

 // Animasyonu oynat
 animationView.play()

Son olarak bu şekilde animasyonumuzu projemize eklemiş olduk. Bir sonraki yazımda görüşmek üzere! Umarım faydalı olmuştur. 👋🏻👋🏻