Minimum kodlama çabasıyla React uygulamanıza nasıl basit animasyonlar ekleyeceğinizi öğrenin.

Animasyon, neredeyse her modern web uygulamasının çok önemli bir parçasıdır. Aynı zamanda doğru olması en zor kısımlardan biridir.

Framer Motion, bileşenlerin animasyonunu kolaylaştıran, React için oluşturulmuş bir kitaplıktır.

Framer Motion Nasıl Çalışır?

Framer Motion, animasyonlar için hareket bileşenini kullanır. Her HTML/SVG öğesinin, hareketler ve animasyonlar için destekleri olan eşdeğer bir hareket bileşeni vardır. Örneğin, normal bir HTML div şöyle görünür:

<div>div>

Framer Motion eşdeğeri şöyle görünürken:

<hareket.div>hareket.div>

Hareket bileşenleri bir canlandırmak değerleri değiştiğinde animasyonları tetikleyen prop. Karmaşık animasyonlar için, animate'i kullan kapsamlı bir ref ile kanca.

Framer Motion'da Animasyon

Projenizde Framer Motion'ı kullanmadan önce, Node.js çalışma zamanı ve bilgisayarınızda yüklü olan Yarn paket yöneticisi ve React'in ne olduğunu ve nasıl kullanılacağını anlamak.

instagram viewer

Bu projenin kaynak kodunu adresinden görüntüleyebilir ve indirebilirsiniz. GitHub Deposu. Kullan başlangıç ​​dosyaları bu öğreticiyle birlikte izlenecek bir başlangıç ​​şablonu olarak dalı veya son dosyalar tam demo için şube. Projeyi bu sayede çalışırken de görebilirsiniz. canlı demo.

Terminalinizi açın ve çalıştırın:

git klonu [email protected]: makeuseofcode/framer-motion-app.git
cd framer-hareket-uygulaması
iplik
iplik geliştirme

açtığında yerel ana bilgisayar: 5173 tarayıcınızda şunu göreceksiniz:

Artık ilk basit animasyonunuzu, fareyle üzerine gelindiğinde büyüyen ve imleç ayrıldığında küçülen bir düğme oluşturabilirsiniz.

Aç src/Uygulama.jsx bir kod düzenleyicide dosya. Bu dosya, bir React parçası döndüren işlevsel bir bileşen içerir. içe aktar Düğme bileşen, sonra onu işleyerek bir metin destek:


Hareketli Düğme</h4>
Efekti görmek için farenizi düğmenin üzerine getirin</div>

Ardından, düğme.jsx dosyalayın ve içe aktarın hareket yardımcı program çerçeve hareketi:

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

Şimdi, normal olanı değiştir düğme ile eleman hareket.[öğe] bileşen. Bu durumda, hareket.düğmesi bileşen.

Sonra bir ekle vurguluyken kullanıcı düğmenin üzerine geldiğinde Framer Motion'ın canlandırması gereken değerlerin bir nesnesini hareket ettirin ve iletin.

ölçek: 1.1 }}>
{metin}
</motion.button>

Fare işaretçinizi düğmenin üzerine veya dışına hareket ettirdiğinizde artık düğme hareketlenecektir:

Bu demonun neden kullanılmadığını merak ediyor olabilirsiniz. CSS Animasyonları yerine. Framer Motion, React durumuyla bütünleştiği ve genellikle daha temiz kodla sonuçlandığı için CSS'ye göre avantajlara sahiptir.

Ardından, daha karmaşık bir şey deneyin: bir modal canlandırma. İçinde zemin.jsx, hareket yardımcı programını içe aktarın ve işlevsel bir bileşen oluşturun. tıklamada Ve çocuklar sahne. bir iade hareket.div "zemin" sınıfına sahip bileşen ve tıklamada JSX'te dinleyici.

ihracatvarsayılanişlevzemin() {
geri dönmek (<>

 </motion.div>
 </>)
}

Sonra üç sahne ekleyin: ilk, canlandırmak, Ve çıkış. Bu aksesuarlar, sırasıyla bileşenin orijinal durumunu, bileşenin animasyon yapması gereken durumu ve animasyondan sonra bileşenin içinde olması gereken durumu temsil eder.

Eklemek tıklamada Ve çocuklar sahne için hareket.div ve geçiş süresini 0,34 saniye olarak ayarlayın:

ihracatvarsayılanişlevzemin ({onClick, çocuklar}){
geri dönmek (<>
 onClick={onClick}
 sınıfAdı="zemin"
 ilk={{ opaklık: 0, zeminFiltresi:"bulanıklaştırma (0 piksel)" }}
 canlandırmak={{ opaklık: 1, zeminFiltresi:"bulanıklık (3.4px)" }}
 çıkış={{ opaklık: 0, zeminFiltresi:"bulanıklaştırma (0 piksel)"}}
 geçiş={{
 süre: 0.34,
 }}
 >
 {çocuklar}
 </motion.div>
 </>)
}

bu zemin bileşen için bir sarmalayıcıdır modal bileşen. Arka plana tıklamak kipi kapatır. İçinde modal.jsx, içe aktarmak hareket ve Arka plan bileşeni. Varsayılan işlevsel bileşen, donanımları kabul eder: kapatKip Ve metin. Nesne olarak bir varyant değişkeni oluşturun.

sabit değişkenler = {
 ilk: {
 sen: "-200%",
 opaklık: 1,
 },
 görünür: {
 sen: "50%",
 geçiş: {
 süre: 0.1,
 tip: "bahar",
 sönümleme: 32,
 sertlik: 500
 }
 },
 çıkış: {
 sen: "200%",
 }
 }

Bir "varyantlar" pervanesi ile varyantlar nesnesine işaret eden bir Arka Plan bileşeni tarafından sarılmış bir motion.div bileşeni döndürün. Varyantlar, bileşenin içinde olabileceği bir dizi önceden tanımlanmış animasyon durumudur.


 onClick={(e) => e.stopPropagation()}
 sınıfAdı="kip"
 varyantlar={varyantlar}
 başlangıç='ilk'
 canlandırmak='görünür'
 çıkış='çıkış'
 >
 {metin}
 </motion.div>
</Backdrop>

Ardından, bir kullanıcı düğmeyi tıkladığında kipi görüntülemek için işlevsellik eklemeniz gerekir. Aç Uygulama.jsx dosyalayın ve içe aktarın kullanımDevlet Tepki kancası ve modal bileşen.

içe aktarmak { kullanımDevlet } itibaren"tepki";
içe aktarmak modal itibaren"./bileşenler/Kip";

Sonra bir oluştur modalAçık varsayılan değer olarak ayarlanmış durum YANLIŞ.

sabit [modalOpen, setModalOpen] = kullanımDevlet(YANLIŞ);

Ardından, bir işlev tanımlayın kapatKip bu ayarlar modalAçık yanlış.

işlevkapatKip() {
 setModalOpen(YANLIŞ)
}

React parçasının en üstünde, koşullu olarak bir modal bileşen ve uygun geçmek metin closeModal prop ile destekleyin.

{modalAçık && <modalmetin="Bu, Framer Motion ile canlandırılan bir modeldir"}

Daha sonra, ikinci bölüm eleman, render a düğme modalOpen'ı false olarak ayarlayan bir onClick olay işleyicisine sahip öğe.

React'in Modal bileşenini çıkış animasyonu olmadan DOM'dan ayırdığını fark etmişsinizdir. Bunu düzeltmek için bir Animasyon Varlığı bileşen. AnimatePresence'ı şuradan içe aktar çerçeve hareketi.

içe aktarmak {AnimateVarlığı} itibaren"çerçeveleme hareketi";

Şimdi, Modal bileşenini AnimatePresence bileşenine sarın ve ilk yanlışı desteklemek ve mod beklemek".

YANLIŞ} mod="Beklemek">
 {modalAçık && <modalmetin="Bu, Framer Motion ile canlandırılan bir modeldir"kapatKip={kapalıModal} />}
</AnimatePresence>

AnimatePresence bileşeni, çıkış animasyonlarının React'in DOM'dan bağlantısını kesmeden önce tamamlanmasına izin verir.

Framer Motion, kaydırma sırasında bileşenleri hareketlendirebilir. InView sırasında pervane Aç ScrollElement.jsxve içe aktarın hareket Yarar. Değiştirmek div ile hareket.div "scroll-element" sınıfıyla.

 ilk={{ opaklık: 0, ölçek: 0, döndür: 14 }}
 whileInView={{ opaklık: 1, ölçek: 1, döndür: 0 }}
 geçiş={{ süre: .8 }}
 görüntü alanı={{ bir kere: doğru }}
 sınıfAdı='kaydırma öğesi'
>
 Kaydırma Elemanı
</motion.div>

bu görüntü alanı pervane ayarlayan bir nesneye işaret eder bir kere ile doğru. Sonraki, içinde Uygulama.jsx dosya, içe aktar Kaydırma Öğesi bileşen ve bir tamsayı değeri tutan scrollElementCount değişkenini tanımlayın.

izin vermek scrollElementCount=14;

Sonunda bölüm öğesi, tarafından tanımlanan belirli bir uzunluğa sahip bir dizi oluşturun kaydırmaElementSayısı dizinin her elemanı üzerinde eşlenen ve dizini temel alan benzersiz bir anahtara sahip bir bileşen oluşturan Ben.

{[...Dizi (scrollElementCount)].map((x, ben) =><Kaydırma Öğesianahtar={Bence} />)}

Şimdi, tarayıcıya dönersek, öğeler onları görünüme kaydırdığınızda hareket etmelidir.

Framer Motion'a alternatifler

Framer Motion, piyasadaki tek animasyon kitaplığı değildir. Framer Motion'ın işleri yapma şeklini beğenmiyorsanız, diğer kitaplıkları deneyebilirsiniz. Tepki Yayı.

Tüm modern tarayıcıların yerel olarak desteklediği CSS animasyonlarını da kullanabilirsiniz, ancak ilgili tekniklerin öğrenilmesi ve ayarlanması zor olabilir.

Animasyonlarla Kullanıcı Deneyimini İyileştirme

Her kullanıcı, bir web uygulamasını kullanırken sorunsuz bir deneyim bekler. Animasyonsuz bir web sitesi veya uygulama, statik ve yanıt vermiyormuş gibi görünür. Animasyonlar, belirli bir eylemi gerçekleştirdiklerinde kullanıcıya geri bildirim iletmek için kullanabileceğiniz için kullanıcı deneyimini geliştirir.