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ü kütüphanesinden bahsediyorum. Hadi kuralım ve nasıl kullanılacağına bir göz atalım! animate.css Kurulum SwifWeb'de yeniyseniz lütfen nasıl yeni proje oluşturulacağına bir göz atın. bu makalede Projede açın ve bölümünü şu şekilde görünecek şekilde düzenleyin: Package.swift dependencies dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] Sonraki şöyle görünecek şekilde düzenleyin: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Ardından add açın ve yönteminde şu şekilde yapılandırın: App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } Yapılandırmayı unutursanız çalışmaz. 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 } } Animasyonların tam listesi kütüphanenin web sitesinde mevcuttur : https://animate.style Ek olarak , ve ayarlarını da yapabilirsiniz. duration delay repeat .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 veya değerini kullanabilirsiniz. Float Int 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 değerini kullanabilirsiniz. Int 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 ve kaplar ve bunların çocukları da dahil olmak üzere veya 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. grid flex block inline-block 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) } } Her iki durumda da animasyon aralıklarla yeniden başlar. 500 ms 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! Soru sormaktan çekinmeyin ve katkıda bulunmaktan çekinmeyin! Discord'umuzda
