Animasyonlar, React uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yolu olabilir. Etkileşimlerin daha pürüzsüz olmasına yardımcı olabilir ve ayrıca görsel geri bildirim sağlayabilir veya belirli bir öğeye dikkat çekebilirler.

Yerel bir çözümden üçüncü taraf kitaplıklara kadar, React kullanarak CSS animasyonlarıyla çalışmanın birçok yolu vardır.

Neden React'te Animasyon Kullanmalısınız?

React uygulamanızda animasyon kullanmak isteyebileceğiniz birçok neden vardır. En yaygın nedenlerden bazıları şunlardır:

  • Etkileşimleri daha doğal hissettirmek. Animasyonlar, kullanıcı etkileşimlerinin daha doğal ve pürüzsüz hissettirmesine yardımcı olabilir. Örneğin, bir geçiş bileşeni kullanıyorsanız, geçiş düğmesini "açık" ve "kapalı" durumları arasında hareketlendirmek isteyebilirsiniz. Diğer bir örnek ise ilerleme çubuklarıdır. animasyonlu bir ilerleme çubuğu oluştur tepki uygulamanızın sayfaları için.
  • Görsel geri bildirim sağlama. Animasyonlar kullanıcıya görsel geribildirim sağlayabilir. Örneğin, bir kullanıcı bir düğmeyi tıklarsa, uygulamanın bu eylemi kaydettiğini belirtmek için düğmeyi hareketlendirmek isteyebilirsiniz.
    instagram viewer
  • Kullanıcının dikkatini yönlendirmek. Animasyonlar, kullanıcının dikkatini belirli bir öğeye yönlendirebilir. Örneğin, ekranda görünen kalıcı bir iletişim kutunuz varsa, kullanıcının dikkatini buna çekmek için animasyon kullanmak isteyebilirsiniz.
  • Aciliyet duygusu yaratmak.Animasyonlar bir aciliyet veya önem duygusu yaratabilir. Örneğin, geri sayım yapan bir zamanlayıcı bileşeniniz varsa, son tarih yaklaşırken aciliyeti yansıtmak için animasyon kullanmak isteyebilirsiniz.

React bileşenlerine animasyon eklemenin birkaç yolu vardır. Burada kullanmayı öğreneceğiniz üç tanesi, satır içi stil animasyonları, tepki animasyonları kitaplığı ve tepki basit animasyon kitaplığıdır.

tarafından başlayın temel bir tepki uygulaması oluşturma, ardından istediğiniz yöntemi izleyin.

Yöntem 1: Satır İçi Stil Animasyonlarını Kullanma

Örneğin, bir bileşeni, bir düğmeyi tıklattığınızda kaybolacak şekilde canlandırmak istediğinizi varsayalım. Bunu aşağıdaki kodla yapabilirsiniz:

içe aktarmak Tepki, { Bileşen } itibaren 'tepki';
sınıfFadeInOutuzanırBileşen{
inşaatçı(sahne) {
Süper(sahne);


Bu.durum = {
 görünür: YANLIŞ
 };
 }


render() {
sabit stiller = {
opaklık: Bu.durum.isVisible? 1: 0,
 geçiş: 'opaklık 2s'
 };


geri dönmek (
<div>
<div stili={stilleri}>
 Selam Dünya!
</div>
<button onClick={this.toggleVisibility}>
 Değiştir
</button>
</div>
 );
 }


toggleVisibility = () => {
Bu.setState (prevState => ({
görünür: !öncekiDevlet.isVisible
 }));
 }
}
ihracatvarsayılan FadeInOut;

Bu örnekte, bir stil nesnesi opaklık ve geçiş özelliklerine sahiptir. Opaklık, bileşen görünür olmadığında 0, göründüğünde 1'dir. Geçiş özelliği, opaklığın değiştiğinde iki saniye boyunca geçiş yapmasına neden olacak “opacity 2s” dir.

Düğme, bileşenin görünürlüğünü değiştirir. Birisi düğmeye tıkladığında, isVisible durum değişkeni güncellenir ve bileşen, mevcut durumuna bağlı olarak yavaş yavaş açılır veya kapanır.

Yöntem 2: tepki animasyonları Kitaplığını kullanma

React bileşenlerine animasyon eklemenin başka bir yolu da, tepki animasyonları gibi bir kitaplık kullanmaktır. Bu kitaplık, React bileşenlerinizde kullanabileceğiniz bir dizi önceden tanımlanmış animasyon sağlar.

Tepki animasyonlarını kullanmak için önce kitaplığı yüklemeniz gerekir:

npm düzenlemek tepki animasyonları --kaydetmek

Ayrıca, tepki animasyonlarının bir bağımlılığı olan afrodit yüklemeniz gerekir:

npm düzenlemek Afrodit --kaydetmek

Kitaplıkları yükledikten sonra, kullanmak istediğiniz animasyonları içe aktarabilirsiniz:

içe aktarmak { arttırıp azaltmak } itibaren 'tepki animasyonları';

Ardından, bileşenlerinizdeki animasyonları kullanabilirsiniz:

içe aktarmak Tepki, { Bileşen } itibaren 'tepki';
içe aktarmak {Stil Sayfası, css} itibaren 'Afrodit';
içe aktarmak { arttırıp azaltmak } itibaren 'tepki animasyonları';
sabit stiller = StyleSheet.create({
 {
 animasyonAdı: fadeIn,
 animasyon süresi: '2 saniye'
 },
 FadeOut: {
 animasyonAdı: fadeOut,
 animasyon süresi: '2 saniye'
 }
});


sınıfFadeInOutuzanırBileşen{
inşaatçı(sahne) {
Süper(sahne);


Bu.durum = {
 görünür: YANLIŞ
 };
 }


render() {
sabit sınıfAdı = Bu.durum.isVisible? css (styles.fadeIn): css (styles.fadeOut);


geri dönmek (
<div>
<div className={className}>
 Selam Dünya!
</div>
<button onClick={this.toggleVisibility}>
 Değiştir
</button>
</div>
 );
 }


toggleVisibility = () => {
Bu.setState (prevState => ({
görünür: !öncekiDevlet.isVisible
 }));
 }
}
ihracatvarsayılan FadeInOut;

Bu örnek, tepki animasyonları kitaplığından fadeIn ve fadeOut animasyonlarını içe aktararak başlar. Daha sonra, fadeIn ve fadeOut animasyonları ve AnimationDuration iki saniye olarak ayarlanmış bir styles nesnesi tanımlar.

Düğme, bileşenin görünürlüğünü değiştirir. Biri tıkladığında, isVisible durum değişkeni güncellenir ve bileşen, mevcut durumuna bağlı olarak yavaş yavaş açılır veya kapanır.

Yöntem 3: tepki-basit-animate Kitaplığını kullanma

tepki-basit-animate kitaplığı, React bileşenlerine animasyon eklemek için basit bir yol sağlar. Karmaşık animasyonları tanımlamayı kolaylaştıran bildirime dayalı bir API sunar.

Kitaplığı kullanmak için önce yüklemeniz gerekir:

npm düzenlemek tepki basit animasyon --kaydetmek

Ardından, bileşenlerinizde kullanabilirsiniz:

içe aktarmak Tepki, { Bileşen } itibaren 'tepki';
içe aktarmak { Animate, AnimateKeyframes} itibaren "tepki-basit-canlandır";
sınıfUygulamauzanırBileşen{
 render() {
geri dönmek (
<div>
<Canlandır
 oynamak
başlangıç={{
 opaklık: 0
 }}
son={{
 opaklık: 1
 }}
>
<div>
 Selam Dünya!
</div>
</Animate>
<Ana Kareleri Canlandırın
 oynamak
 süre={2}
 anahtar kareler={[
 { opaklık: 0, dönüşüm: 'çeviriX(-100 piksel)' },
 { opaklık: 1, dönüşüm: 'çeviriX(0 piksel)' }
 ]}
>
<div>
 Selam Dünya!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
ihracatvarsayılan Uygulama;

bu Canlandır bileşen bir div öğesinde kaybolur. 0 opaklığı ile başlar ve 1 opaklığı ile biter. Oynatma pervanesi, bileşen takıldığında animasyonun otomatik olarak oynatılmasına neden olacak şekilde doğru olarak ayarlanmıştır.

bu Ana Kareleri Canlandırın component, bir div öğesini iki saniye boyunca canlandırır. Anahtar kareler dizisi, animasyonun başlangıç ​​ve bitiş durumlarını belirtir. İlk anahtar karenin opaklığı 0 ve translateX değeri -100 pikseldir. İkinci anahtar karenin opaklığı 1 ve translateX değeri 0 pikseldir.

Animasyonlarla Kullanıcı Etkileşimini Artırın

Artık React uygulamanızda animasyonları kullanmanın bazı yollarını biliyorsunuz. Uygulamanızla kullanıcı etkileşimini artırmak için animasyonları kullanabilirsiniz.

Örneğin, kullanıcıyı bir görevi tamamlaması karşılığında ödüllendirmek için animasyon kullanmak isteyebilirsiniz. Bu, kısa bir "döndürücü" animasyonu kadar basit bir şey veya kullanıcı bir oyunda bir seviyeyi tamamladığında oynayan daha karmaşık bir animasyon olabilir.

Ayrıca Github sayfaları veya Heroku gibi hizmetlerle React uygulamanızı web üzerinde ücretsiz olarak dağıtabilirsiniz.