Animasyonlar, bir web sitesindeki kullanıcı deneyimini geliştirebilecek güçlü bir araçtır. Doğru kullanıldıklarında bir web sitesini daha ilgi çekici, etkileşimli ve sezgisel hale getirebilirler. Bu yazımızda SwifWeb için animasyon kütüphanesini inceleyeceğiz.

En ünlü animate.css kütüphanesinden bahsediyorum. Hadi kuralım ve nasıl kullanılacağına bir göz atalım!

Kurulum

SwifWeb'de yeniyseniz lütfen bu makalede nasıl yeni proje oluşturulacağına bir göz atın.

Projede Package.swift açın ve dependencies bölümünü şu şekilde görünecek şekilde düzenleyin:

 dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ]

Sonraki executableTarget şöyle görünecek şekilde düzenleyin:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

Ardından App.swift add import Animate açın ve didFinishLaunching yönteminde şu şekilde yapılandırın:

 Lifecycle.didFinishLaunching { Animate.configure() }

Kullanım

Orijinal kütüphanedeki tüm sınıflar kaportanın altındadır ve SwiftWeb kullanıcıları için oldukça kullanışlı ve güzel bir Swift arayüzü mevcuttur.

Herhangi bir öğeyi alın ve ona DOM'a eklendiğinde başlatılacak bir animasyon ekleyin.

 @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation }

Veya ekrandaki herhangi bir öğeyi alın ve ona anında bir animasyon ekleyin:

 lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } }

Ek olarak duration , delay ve repeat ayarlarını da yapabilirsiniz.

 .animate(.jello, delay: 0, duration: 1, repeat: 0)

Tüm bu parametreler isteğe bağlıdır. Animasyon sona erdiğinde değerler otomatik olarak kaldırılacaktır.

Alternatif olarak bu seçenekler ayrı yöntemler kullanılarak da ayarlanabilir:

 .animateDelay(0) .animateDuration(1) .animateRepeat(0)

Ayrıca bu değerleri manuel olarak da kaldırmalısınız:

 .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat()

Her seçenek hakkında daha fazla konuşalım.

Gecikme

Önceden tanımlanmış uygunluk değerleri:

 .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay

Uzantıda kendi kolaylık değerinizi yaratın:

 extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay }

Veya yukarıdaki örneklerdeki gibi herhangi bir Float veya Int değerini kullanabilirsiniz.

Süre

Önceden tanımlanmış uygunluk değerleri:

 .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds

Uzantıda kendi kolaylık değerinizi yaratın:

 extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s }

Veya yukarıdaki örneklerdeki gibi herhangi bir Float veya Int değerini kullanabilirsiniz.

Tekrarlamak

Önceden tanımlanmış uygunluk değerleri:

 .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely

Uzantıda kendi kolaylık değerinizi yaratın:

 extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times }

Veya yukarıdaki örneklerdeki gibi herhangi bir Int değerini kullanabilirsiniz.

Uygunluk değerlerine sahip örnek

 .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2)

Ve ayrı yöntemler:

 .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2)

En İyi Uygulamalar

Animasyonlar, kullanıcının web arayüzü deneyimini önemli ölçüde geliştirebilir. Ancak deneyimin olumsuz etkilenmemesini sağlamak için bazı kurallara uymak önemlidir. Aşağıdaki kurallara uyarak olumlu bir başlangıç yaratabilirsiniz.

Anlamlı animasyonlar kullanın

Animasyonlar sadece dekoratif olmaktan ziyade net bir amaç ifade etmelidir. Dikkat çekici animasyonları yalnızca gösterişli olmaları nedeniyle kullanmaktan kaçının; bunun yerine arayüzdeki özel bir şeyi vurgulamak için bunları kullanın. Kullanıcıyı arayüze yönlendirmek ve yeni bir duruma geçiş sinyali vermek için giriş ve çıkış animasyonlarını kullanın.

Şakacılık iyidir ama dikkatli olun

Bir arayüze eğlence katmak yararlı olabilir ancak animasyonların kullanıcı deneyimini engellemediğinden veya aşırı kullanım nedeniyle sayfanın performansını etkilemediğinden emin olun.

Büyük öğelerin animasyonunu yapmaktan kaçının

Büyük öğelerin animasyonu, kötü bir kullanıcı deneyimine yol açarak kafa karışıklığına neden olabilir ve animasyonların gergin görünmesine neden olabilir. Bu nedenle, kullanıcıya çok az değer kattıkları için büyük öğelerin animasyonundan kaçınılması önerilir.

Sonsuz animasyonlardan kaçının

Animate.css, sonsuz animasyonlar da dahil olmak üzere tekrarlanan animasyonlar için yardımcı sınıflar sağlarken, sonsuz animasyonlardan kaçınılması önerilir. Bu animasyonlar kullanıcıların dikkatini dağıtabilir ve onları rahatsız edebilir, bu da olumsuz bir deneyime neden olabilir. Bu nedenle bunları akıllıca kullanın!

Yakaladım

Satır içi öğelere animasyon uygulayamazsınız

Satır içi öğelerin animasyonu, CSS animasyon spesifikasyonlarına göre önerilmez ve tüm tarayıcılarda çalışmayabilir. Bunun yerine grid ve flex kaplar ve bunların çocukları da dahil olmak üzere block veya inline-block düzeyindeki öğeler canlandırılmalıdır. Satır içi düzeydeki bir öğeye animasyon uygulamak için, bu öğenin display özelliğini inline-block olarak ayarlayabilirsiniz.

Taşma

Ekrandaki öğelere animasyon uygularken bazı Animate.css animasyonları web sayfanızda kaydırma çubukları oluşturabilir. Bunu önlemek için, animasyonlu öğeyi içeren ana öğede overflow: Hidden özelliğini kullanabilirsiniz. Ancak ne zaman ve nasıl kullanılacağına dair kesin bir tarif yoktur.

Tekrarlar arasındaki aralıklar

Saf CSS kullanarak tekrarlar arasındaki aralıkları ayarlamak şu anda mümkün değildir.

Ancak `.animationEnd` olay dinleyicisini kullanmak mümkündür:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

Veya daha da kullanışlı:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

Bu kadar

Evet, bu kütüphane kompakt ama güçlü!

Daha fazlasını öğrenmek ister misin? Gelecek makaleler için bizi takip etmeye devam edin!