Anime.js - Hafif Bir JavaScript Animasyon Kütüphanesi

Web animasyonu uzun bir yol kat etti. Geliştiriciler yalnızca CSS / SVG / JS bir arada kullanarak herhangi bir animasyon yapabilir, ancak düzinelerce ücretsiz kütüphane süreçte zaman kazanmak.

Benim favorilerimden biri Anime.js, Tamamen ücretsiz, açık kaynak JavaScript animasyon kütüphanesi.

Bu kütüphane yapabilir hepsini yap. Onun JavaScript'te yerleşik ama aynı zamanda CSS animasyonlarına çok güveniyor. Tek tek sayfa öğelerini hedefleyebilirsiniz DOM üzerinden hatta hedefleyebilirsin özel SVG'ler.

Tüm belgeler GitHub'da kendi kendine barındırılan, tam olarak aradığınızı bulmak için kaydırma yapmanız gerekebilir. Ancak her animasyon özelliği birkaç parametre ile geliyor gecikme, süre ve hareket hızı gibi.

Bu kütüphaneye dikkat et gelmiyor birçok varsayılan animasyon stiliyle. Anime.js geliştiriciler için yapılmış kendi animasyonlarını özelleştirmek isteyen ayrıntılı kod yazmadan.

Bir için canlı örnek, Aşağıdaki Codepen kalemini kontrol edin. Kod son derece basit ama sen inanılır bir animasyona sahipsin kabak ve germek artı umma, animasyonun her iki temeli.

Adil bir uyarı: Anime.js kütüphanesi yoğun. Özel bir animasyon oluşturmak için o kadar zor değil ama yapmanız gereken bazı temel bilgileri anlamak geri aramalar ve seçenekler için hareket hızı ve sık kullanılan JavaScript sözdizimi gibi.

Fakat ihtiyacınız olan tüm bilgiler üstünde repo sayfası, dahil olmak üzere birçok kod örneği ve detaylı dokümantasyon tabloları. Ayrıca açık hata raporlarına göz atabilir veya şu anda içeren tarayıcı desteğini kontrol edebilirsiniz. tüm büyük tarayıcılar ve IE 10+.

Bu kolayca web geliştiricileri için en iyi animasyon kütüphanelerinden biridir ve sizin için çözümünüz olmalıdır. Herhangi bir karmaşık web animasyonu.

Bir demet görmek için canlı örnekler, CodePen'de barındırılan bu Anime.js demolarını inceleyin. Aşağıda, favorilerimi gömdüm. tüm logoyu sıfırdan hareketlendirir, gerçek canlılığı olan.