Framer Motion kitaplığı, React uygulamalarınıza çok sayıda animasyon işlevi getirir.

Ekrana girerken veya çıkarken bir React bileşenini canlandırmak zor olabilir. Bunun nedeni, bir bileşeni gizlediğinizde React'in onu DOM'dan kaldırması ve bu da onu animasyon için kullanılamaz hale getirmesidir. Bileşeni tekrar gösterdiğinizde, React onu DOM'a yeniden ekler ve bu, animasyon olmadan ani bir görünüme neden olabilir.

Bu sorunu Framer Motion gibi bir animasyon kitaplığı ile çözebilirsiniz.

Framer Hareketi Nedir?

Framer Motion, React için üretime hazır bir animasyon kitaplığıdır. Animasyon oluşturmak ve kontrol etmek için çeşitli bileşenler, kancalar, ana kareler ve özel hareket hızı işlevleri sağlar.

Framer Motion'ın bir avantajı, çok fazla JavaScript kodu yazmaya veya her geçiş için hesaplamalar yapmaya gerek kalmadan düzgün ve akıcı animasyonlar oluşturmayı kolaylaştırmasıdır.

Ayrıca, düğme tıklamaları ve hareketleri gibi kullanıcı girişlerine dayalı olarak animasyonları tetiklemek için kullanabileceğiniz, yanıt veren etkileşimli ve dinamik arayüzler yaratan bir olay sistemine de sahiptir.

instagram viewer

React'te Framer Motion'ın nasıl kullanılacağını göstermek için, bir butona tıkladığınızda ekrana giren ve çıkan bir bileşeni canlandıracaksınız.

React Projesi Oluşturma

Bir React projesi oluşturmak için yapmanız gerekenler makinenize Node.js ve npm'yi (Node Paket Yöneticisi) kurun eğer yapmadıysanız

Bu bağımlılıkları yükledikten sonra şunları yapabilirsiniz: Vite kullanarak yeni bir React projesi oluşturun terminalinizde yarn vite komutunu çalıştırarak.

iplik bağı

Bu komut, önceden yüklenmiş tüm gerekli dosyalar ve bağımlılıklar ile yeni bir klasör oluşturacaktır. Klasöre gidin ve yarn start komutuyla geliştirme sunucusunu başlatın.

iplik başlangıcı

React'te Framer Motion'ı Yükleme

Bu komutu çalıştırarak Framer Motion'ı kurun:

npm çerçeveleyici hareketini kurun

Bu komut, Framer Motion'ı projenize bir bağımlılık olarak ekleyecektir.

Bir Bileşeni Canlandırmak

React'te Framer Motion kullanarak ekrana girip çıkan bir bileşeni canlandırmak için onu hareket bileşenine sarmanız gerekir.

Hareket bileşeni, bileşenin girişini ve çıkışını canlandırmak için bir dizi özellik sağlar. Görünürlüğünü ve konumunu kontrol etmek için başlangıç, animasyon ve çıkış sahne özelliklerini kullanabilirsiniz.

Bunu çalışırken görmek için, framer-motion'dan hareket bileşenini içe aktarmak üzere App.jsx'in en üstüne aşağıdaki kodu ekleyin.

içe aktarmak { hareket } itibaren"çerçeveleyici hareketi";

Ardından, canlandırmak istediğiniz bileşeni hareket bileşeniyle sararak oluşturun. Bu örnek, bir div öğesi kullanır, ancak diğerleri arasında button, li ve p gibi istediğiniz herhangi bir öğeyi kullanabilirsiniz.

içe aktarmak { hareket, AnimatePresence } itibaren"çerçeveleyici hareketi"
işlevUygulama() {
geri dönmek (
 <>

 ilk={{ X: -100, opaklık: 0 }}
 canlandırmak={{ X: 0, opaklık: 1 }}
 çıkış={{ X: -100, opaklık: 0 }}
 >
gönderildi!</p>
 </motion.div>

 </>
 )
}

Hareket bileşeni, "Gönderildi!" metnini içeren div öğesini canlandırmanıza olanak tanır.

bu ilk, canlandırmak, Ve çıkış hareket bileşeninin özellikleri, bileşenin giriş ve çıkış animasyonlarını tanımlar. Bileşen başlangıçta işlendiğinde, x konumu -100 (ekran dışında sola doğru) ve 0 opaklığı ile başlayacak ve görünmez olacaktır.

Animate özelliği, bileşenin ekrana girdiğinde nasıl hareket etmesi gerektiğini tanımlar, bu durumda bir x'ten hareket eder. -100 konumundan x konumuna 0 (soldan kayan) ve kademeli olarak 1 opaklığına dönüşen ve tamamen görünür.

Son olarak, çıkış özelliği, bileşeni ekrandan kaldırdığınızda nasıl hareket etmesi gerektiğini tanımlar. Bu durumda bileşen, -100'lük bir x konumuyla ekrandan sola doğru kayar ve kademeli olarak 0'lık bir opaklığa dönüşür.

Ayrıca, React DOM ağacından kaldırdığınızda, hareket bileşenini AnimatePresence bileşeniyle framer-motion'dan animate bileşenlerine sarmanız gerekir.

Artık giriş ve çıkış animasyonlarını tanımladığınıza göre, animasyonu tetiklemek için bir düğme ekleyebilirsiniz. İşte düğmesiyle değiştirilen bileşen:

içe aktarmak { AnimatePresence, hareket } itibaren"çerçeveleyici hareketi";
içe aktarmak { kullanımDevlet } itibaren"tepki";
işlevUygulama() {
sabit [isVisible, setIsVisible] = useState(doğru);


sabit toggleVisibility = () => {
 setIsVisible(!isVisible);
 };


geri dönmek (
 <>

 {görünür && ( <hareket.div
 ilk={{ X: -100, opaklık: 0 }}
 canlandırmak={{ X: 0, opaklık: 1 }}
 çıkış={{ X: -100, opaklık: 0 }}
 >
gönderildi!</p>
 </motion.div>)}
 </AnimatePresence>

Bu güncellenmiş kod, useState kancasını kullanarak isVisible adlı bir durum değişkeni ekler. Bu değişken, bileşenin görünür olup olmayacağını izler. toggleVisibility işlevi, düğmeye tıkladığınızda isVisible değerini true ve false arasında değiştirir.

sen şimdi bileşeni koşullu olarak işlemek isVisible değerine bağlıdır. isVisible true ise, hareket bileşeni giriş animasyonu ile işlenecektir.

Son olarak, toggleVisibility işlevini çağıran, isVisible durumunu güncelleyen ve hareket bileşeninin giriş veya çıkış animasyonunu tetikleyen düğmeye bir onClick olay işleyicisi ekleyin.

Hareket Hızlandırma İşlevi Ekleme

Hareket hızı işlevi, animasyonun zaman içindeki değişim oranını kontrol eder. Animasyonun ilerledikçe nasıl hızlanması veya yavaşlaması gerektiğini belirterek bir animasyonun zamanlamasını tanımlar. Hareket hızı işlevi olmadan animasyon çok hızlı işlenebilir.

Framer Motion, easyInOut dahil olmak üzere aralarından seçim yapabileceğiniz çeşitli kolaylaştırma işlevleri sağlar. Kullanmak için framer-motion'dan App.jsx'in üst kısmına aktarın.

içe aktarmak { hareket, easyInOut } itibaren"çerçeveleyici hareketi";

Ardından onu hareket bileşenindeki geçiş nesnesine ekleyin:

 ilk={{ X: -100, opaklık: 0 }}
 canlandırmak={{ X: 0, opaklık: 1, geçiş: { süre: 0.5, kolaylaştırmak: easyInOut } }}
 çıkış={{ X: -100, opaklık: 0, geçiş: { süre: 0.5, kolaylaştırmak: easyInOut } }}
>
gönderildi!</p>
</motion.div>

Süre özelliği, animasyonun ne kadar süre çalışması gerektiğini belirtir.

Basit Animasyonlar için Düz CSS Kullanın

3D animasyon da dahil olmak üzere Framer Motion ile yapabileceğiniz çok daha fazlası var. Ancak, animasyon oluşturmak için her zaman bir kitaplığa ihtiyacınız yoktur. Vurgulu geçişler gibi basit animasyonlar için her zaman düz CSS kullanabilirsiniz.