Tailwind ve CSS ile Animasyonlar için React Utility Bileşeni Oluşturdum: AnimateIn

Öğeleri ekran üzerinde canlandırmak için bir süredir projelerimde aynı animasyon modelini kullanıyorum. En basit biçiminde, sıfır opaklıkla stillendirilmiş bir öğeye sahip olursunuz, ardından stili bir saniyelik CSS geçişiyle bir donukluğa sahip olacak şekilde değiştirirsiniz.

Geçiş yapan diğer özellikleri ekleyerek, süreyi değiştirerek, bir gecikme ekleyerek veya özel yumuşatma ayarlayarak bunun üzerine eklemeler yapabiliriz.

<AnimateIn/>, projelerime hızlı bir şekilde animasyon efektleri eklemek istediğimde kullandığım, yeniden kullanılabilir bir React bileşenidir. Basit bir yardımcı bileşen olan bu bileşen, minimum çabayla akıcı, göz alıcı animasyonlar oluşturmak için CSS Animasyonunu Tailwind sınıflarıyla birleştirir.

Gelin nasıl kullanıldığına bir göz atalım. Bileşeni içe aktardıktan sonra, Tailwind sınıflarıyla from ve to durumlarını tanımlayın. Animasyonun canlandığını görmek için hedef öğeyi <AnimateIn/> içine sarın.

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

Burada, başlık ve alt başlıkta animasyon oluşturmak için daha fazla özellik kullanan, biraz daha karmaşık bir örnek verilmiştir.

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

Başlık örneğinde <AnimateIn/> , yavaş yavaş açılmayla birleştirilmiş bir kaydırma efekti oluşturmak için kullanıldı. Her özelliğin animasyona nasıl katkıda bulunduğu aşağıda açıklanmıştır:

• as property: as="h1" ayarını yaparak AnimateIn'e animasyonu bir <h1> öğesi olarak oluşturmasını söyleriz.

• from ve to özelliklerine: from özelliği, başlığı ekran dışında başlatır ( translate-y-32 , 32 birim aşağı taşır) ve görünmez ( opacity-0 ). to özelliği daha sonra başlığı son konumuna getirir ( translate-y-0 geri döner) ve tamamen görünür hale getirir ( opacity-100 ).

• duration özelliği: Animasyon herhangi bir gecikme olmadan hemen başlayacak şekilde ayarlanmıştır ve 300 ms kadar kısa bir süre boyunca çalışır.

• className özelliği: className="text-4xl" yazı tipi boyutunu ayarlamak için Tailwind'in yardımcı sınıfını uygulayarak başlığın belirgin bir şekilde öne çıkmasını sağlar.

• style özelliği: Özel transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) animasyona benzersiz bir kolaylık katarak ona sıçrama benzeri bir etki kazandırır.

Alt başlık, başlığı tamamlamak için farklı bir animasyon seti kullanarak tutarlı bir görsel akış oluşturur.

• as property: Burada as="h2" bileşeni altyazıya uygun bir <h2> öğesi olarak işler.

• from ve to : Altyazı sıfıra ( scale-0 ) ve görünmezliğe ( opacity-0 ) ölçeklendirilmeye başlar, ardından doğal boyutuna ( scale-100 ) ölçeklendirilir ve tamamen görünür hale gelir ( opacity-100 ). Yavaş yavaş açılmayla eşleştirilen bu ölçeklendirme efekti, animasyona derinlik katar.

• delay ve duration özellikleri: Altyazı da 800 ms'lik bir gecikmeden sonra başlar, böylece başlık tamamen canlandırıldıktan sonra başlar. Bu kademeli yaklaşım, her öğenin kendi odak anını almasını sağlar.

• className özelliği: className="text-lg" altyazının yazı tipi boyutunu ayarlayarak başlıktan daha küçük ancak yine de anlamlı olmasını sağlar.

Neler olduğunu daha iyi anlamak için Github'daki <AnimateIn/> kaynak koduna bakalım:

<AnimateIn/>, herhangi bir animasyon gerçekleşmeden önce animasyonun başlangıç noktası için sahneyi ayarlayan, bir veya daha fazla Tailwind yardımcı sınıf olması gereken from özelliğiyle animasyon durumunu başlatmak için bir useState kancası kullanır.

Bileşendeki ilk useEffect kancası, azaltılmış hareket konusunda kullanıcı tercihlerine saygı göstermek içindir. (prefers-reduced-motion: reduce) medya sorgusunu dinleyerek animasyon davranışı kullanıcının sistem ayarlarına göre belirlenir. Azaltılmış hareket tercih edilirse animasyon tamamen atlanır ve animasyon durumu doğrudan to özelliğine ayarlanarak erişilebilir bir deneyim sağlanır.

İkinci useEffect kancası, animasyon mantığının bulunduğu yerdir. Kullanıcı azaltılmış hareket için bir tercih belirtmemişse bileşen, animasyon durumunu başlangıçtaki from son to ve belirtilen gecikmeden sonra değere değiştiren bir zamanlayıcı ayarlar. Bu geçiş animasyonun görsel etkisini yaratır.

Bu kancanın temizleme işlevi (return ifadesi), zamanlayıcıyı temizleyerek, bileşenin animasyon tamamlanmadan ayrılması gibi olası bellek sızıntılarını önler.

React.createElement işlev çağrısı, bileşenin işleme mekanizmasıdır. as prop'a dayalı olarak dinamik olarak bir HTML öğesi oluşturur ve bileşenin farklı HTML öğeleri arasında kullanılmasına olanak tanır. className , Tailwind'in yardımcı program sınıflarını, destek olarak iletilen özel className ve geçerli animasyon durumunu birleştiren shadcn tarafından popüler hale getirilen cn işlevi kullanılarak oluşturulur. Bu dinamik sınıf ataması, istenen stilleri ve geçişleri öğeye uygulayan şeydir.

Ek olarak, animasyon kapsayıcısındaki stil özelliklerini doğrudan ayarlamak için aktarılabilecek bir style özelliği de vardır. transitionDuration duration desteğine göre ayarlanır, ancak kullanıcı azaltılmış hareketi tercih ederse akıllıca 0ms geçer ve bileşenin işlevselliğini korurken animasyonu etkili bir şekilde devre dışı bırakır.

Kendi projenizde <AnimateIn/> kullanmak istiyorsanız ve zaten shadcn kullanıyorsa, o zaman ihtiyacınız olan her şeye zaten sahipsiniz, AnimateIn.tsx'i indirin ve bileşenlerinize ekleyin.

Aksi takdirde, Tailwind'in yanı sıra, tailwind sınıflarını birleştirmek için yararlı bir yardımcı program olan mxcn de kurmak isteyeceksiniz.

Shadcn gibi <AnimateIn/> de uygulamalarınıza kopyalayıp yapıştırabileceğiniz ve ihtiyaçlarınıza göre özelleştirebileceğiniz yeniden kullanılabilir bir bileşen olarak tasarlanmıştır. Kod sizindir.

Ayrıca, animate-in.vercel.app adresinde <AnimateIn/> ile farklı animasyonlar oluşturmaya yönelik güzel bir demo sayfası hazırladım.

Burada da yayınlandı