Bileşenleri canlandırmak için reaksiyon yayını nasıl kullanır

REACT Yayı, Web'de uygulamak için komik bir şekilde zor olan animasyonlarda size yardımcı olabilir. CSS animasyonları En iyi seçimdir, ancak pürüzsüz bir sonuç yaratır, derslerin, süreleri ve olayların dikkatlice hokkabazasını gerektirir. Atmak Javascript çerçevesi Karışıma reaksiyona girin, sadece işleri daha da zorlaştırır.

Kullanıcı etkileşimine dayanan animasyonlar için, değerler JavaScript ile hesaplanabilir ve doğrudan bir öğeye uygulanabilir. Bu manuel yaklaşımı alarak, animasyonun daha doğal görünmesini sağlamak için kendi işlemlerimizi hesaplamamız ve uygulamamız gerekir.

Yayını tepki Web'de animasyon söz konusu olduğunda, ortak telefonların birçoğu ile uğraşmak için inşa edilmiş bir kütüphanedir. Düz süreler üzerinde fizik üzerine odaklanarak ve hafifletme fonksiyonlarına odaklanarak biraz farklı bir yaklaşım gerekir. Bu, işlerin pürüzsüz ve doğal hissetmelerine yardımcı olur.

Bu zamanın çoğu görsel efektler için kullanılırken, kütüphane bu değerin bir stil için veya olmadığı için kullanılmadığına bakılmaksızın iki değer arasında geçiş yapacaktır. Örneğin, bir topluluğun ne kadar büyük olduğunu vurgulamak için birkaç kayıt yaptırmayı saymak için kullanılabilir.

Bu eğitimde, kullanıcıların görüntüleri değerlendirebilmesini sağlayan bir kart bileşeni yapacağız. Kart bir yıldız derecelendirmesini ortaya çıkarmak için çevirir ve kullanıcılar kendi eklemek için tıklayabilirler. REACT BAHK'nın 16.8 veya daha üstünü reaksiyona giren yeni kancalar uygulamasını kullanacağız. Başlamadan önce, Buradaki öğretici dosyaları indirin (ve onları tekrar Bulut depolama ).

Karmaşık kod işlemleri olmadan bir site oluşturmak istiyorsanız, iyi bir şekilde kullanın. Web Sitesi Oluşturucu . Ve keşfettiğinizden emin olun ağ sağlayıcısı Seçenekler de.

01. Bağımlılıkları kurun

İndirilen dosyalarla, başlamadan önce paket bağımlılıklarının yüklenmesi gerekir. Bu Yaratın REACT APP tabanlı proje içerir reakt-bahar Paket ve gerekli tüm yerel sunucu başlatılması gerekiyordu.

Komut satırında, proje dosyalarını bulun ve yükleyin, sonra çalıştırın.

 & gt; iplik
& gt; iplik başlangıç ​​

02. Durumda görüntüler oluşturun

İlk olarak, oranı için bazı resimlere ihtiyacımız var. Bu eğitim için, bazı görüntüleri uygulama durumuna zorlayacağız, ancak bu veriler herhangi bir kaynaktan gelebilir. App.js açmak ve bazı görüntüler oluşturmak emici reaksiyondan kanca. Bu, her görüntüyü daha sonra görüntüleyebileceğimiz ve güncelleyebileceğimiz ilk dereceyi verecektir.

 Const [Cards] = USESTATE ([
Yarışma (Image1),
Yarışma (Image2),
Yarışma (Image3)
]); 

03. Her görüntü kartını görüntüleyin

Görüntüler bir dizide saklandıkça, bu durumun üzerinde döngü yapabilir ve her biri için ayrı bileşenler oluşturabiliriz. React Bahar için animasyon mantığı, içinde yaşayacak & lt; puartingscard / & gt; İhtiyacımız olan her yerde kullanabileceğimiz bileşen.

App.js'in oluşturulan yönteminin içinde, devlet dizisindeki her kart için bu bileşenin bir kopyasını oluşturun. Görüntü ve ilk derecelendirme de dahil olmak üzere devletteki her değeri alacak.

 {cards.map ((kart, dizin) = & gt; (
& lt; ratingscard tuşu = {index} {... kart} / ve gt;
))} 

04. Kart yapısı ekleyin

Animasyonu eklemeden önce, kartın biraz içeriğe ihtiyacı var. Her kartın ayrı olarak uygulanan ön ve sırtına sahiptir. & lt; div & gt; elemanlar birbirlerinin üstüne katmanlı.

Açık OylamaKarı / index.js ve kartın yapısını ekleyin. Görüntüyü ön karta bir arka plan olarak uygulamamız gerekiyor, çünkü sırt sonunda derecelendirmeyi içerir.

 & lt; div classname = "rateingscard" & gt;
ve lt; div
ClassName = "RatingsCard__Front"
style = {{
BackgroundImage: `url ($ {image})`
}}
/ & gt;
& lt; div classname = "rateingscard__back" / & gt;
& lt; / div & gt; 

05. Hover stillerini uygulayın

Animasyonlarımız aracılığıyla doğrudan güncellenmeyen herhangi bir stil CSS aracılığıyla uygulanabilir. Bu, üzerinde dururken her kart için temel 3D gölge etkisini içerir. İçeride Puanlama kartı / style.css , Kartın bir filtre uygulayarak Hover'deki sayfadan atlamasını sağlamak için bazı ekstra stiller ekleyin.

 .RatingsCard: Hover {
Filtre: bırak-gölge (0 14px 28px
RGBA (0, 0, 0, 0.25)))
bırak-gölge (0 10px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. Gölge varsayılan olarak ayarlayın

Hover'da ani bir gölge bir kavga deneyimidir. Bu nedenle, işleri pürüzsüz tutmak için devletler arasında yavaşça geçiş yapmalıyız. Tarihe girmediğiniz zaman kart için bir alt çizim bırakma gölgesi ekleyin. Kullan geçiş bu iki devlet arasında canlandırılacak özellik.

 .RatingsCard {
[...]
Filtre: bırak-gölge (0 3px 6px
RGBA (0, 0, 0, 0.16))
Bırak-gölge (0 3px 6px
RGBA (0, 0, 0, 0.1));
Geçiş: Filtre 0.5s;
} 

07. Seçilen durumu tut

Kartın hangi tarafın yukarı bakacağı hakkında bilgi depolamamız ve güncellememiz gerekir. React'ın yerleşik kullanabiliriz emici Bir başlangıç ​​değerini tanımlamak için kanca ve mevcut değeri ve güncelleme için bir yöntem döndürmesi gerekir.

Başlangıcında Oyalanma Bileşen işlevi, bunu tanımla seçilmiş durum.

 Const [Seçilmiş, SetSelected]
 = usestate (yanlış); 

08. Çevirme animasyonunu tanımlayın

REACT Yayı, bir değer ile diğeri arasındaki sayıları geçişten sorumludur. Bu bir bahar ile yapılabilir ve kullanan kullanımı kanca. Bazı kurulum bilgileri veriyoruz ve fizik hesaplamalarına göre güncellenen bir dizi değer dizi döndürüyor.

Çevirme animasyonu için bir bahar oluşturun. Bu, kartın içinde olup olmadığına bağlı olarak bir kartı solacak ve döndürür. seçilmiş durum.

 const {opaklık, dönüşüm}
 = usePring ({
Opaklık: Seçildi? 1: 0,
dönüşümü: `rotatey (
$ {seçti? 180: 0} Deg) `
}); 

09. Animasyonlu konteynere dönüştür

Tarafından döndürülen nesneler kullanan kullanımı Animasyonlarını tanımlayın, ancak ihtiyacımız olan sayısal değerleri sağlamayın. animasyonlu Fabrika işlevi bu bilgiyi sindirir ve ardından değerleri bileşenlere sayılar olarak sağlar.

Dönüştürmek Oyalanma kullanmak için öğe animasyonlu işlevi. animated.div Sözdizimi, bir işlevi döndürmesini sağlar. & lt; div & gt; .

 & lt; animated.div dressname = "PuanlarCard" & GT;
& lt; animated.div
ClassName = "RatingsCard__Front"
style = {{
BackgroundImage: `url ($ {image})`
}}
/ & gt;
& lt; animated.div dressname =
"PuanlarScard__Back" / & gt;
& lt; /animated.div> 

10. Ön kartı canlandırın

REACT Yayı sadece değerleri canlandırıyor ve öğelerinin herhangi bir animasyonu yapmaz. Bu değerleri stil pervaneye bağlayabilir ve sinek üzerinde bu animasyon yaratabiliriz. Yeniden yararlanmak için ön kartı güncelleyin opaklık ve dönüştürmek değerler. Bu durumda, kısa bir süre içinde ele alacağımız opaklık değerini interpolate yapmamız gerekecek.

 & lt; animated.div
ClassName = "RatingsCard__Front"
style = {{
BackgroundImage: `url ($ {image})`,
Opacity: opacity.Interpolate (
tersbirlik),
dönüştürmek
}}
/ & gt; 

11. Arka kartı canlandırın

Kart çevirirken, bir yüze başvurduğumuz animasyon ne olursa olsun, diğerine tersine uygulanması gerekir. Birlikte oynandığında, tek parça olarak hareket ediyorlar gibi görünüyorlar.

Bu durumda, aynı stilleri arka karta uygulamamız gerekiyor, ancak bu zaman enterpolate dönüştürmek bunun yerine değer.

 & lt; animated.div
ClassName = "OynatmaCard__Back"
style = {{
opaklık,
dönüşüm: dönüşüm
.Interpolate (Inversetransform)
}}
/ & gt; 

12. Değerleri interpolate

Doğrudan CSS özelliklerine değer vermek yerine, değerini farklı bir kişiye eşlemek için onlara bir tür işlev uygulayabiliriz. Bu işlemin enterpolasyon denir.

Birkaç enterpolasyon işlevini, üstüne doğru tanımlayın. OylamaKarı / index.js . Bunlar, seçerken veya seçim yaparken hem opaklık ve dönüşüm animasyonlarının tersini uygular.

Const InverseOpacity = O = & gt; 1 - o;
Const Inversetransform = t = & gt;
 `$ {t} rotatey (180deg)`; 

13. Tıklama durumu

Kartın saygısızlığı bir tıklamaya bağlanmalıdır. Olarak seçilmiş Durum değeri, hangi yüzün göründüğünü belirler, kartını tıklatırken bu durumu geçiş yapmalıyız.

Dış için bir tıklama dinleyicisi ekleyin Oyalanma eleman. Bu olduğunda, eyalette tutulan Boolean değerini geçecektir.

 & lt; animated.div
ClassName = "OylamaKarı"
onclick = {() = & gt;
SetSelected (! Seçili)}
& gt; 

14. Kart çevirme fiziği ayarlayın

Şu anda, animasyonumuz çalışıyor, ancak bir flip'ten daha fazla bir yüzer görünüyor. Nasıl davrandığını değiştirmek için her bahardaki bazı değerleri değiştirebiliriz. İlkbaharın kurulum nesnesinin içinde, bir config sürtünmeyi azaltmak ve gerginliği arttırmak için nesne. Bu animasyona snappier bir his verecektir.

 usePring ({
config: {
Sürtünme: 22,
Gerilim: 500
}
[...]
}); 

15. Eğim etkisi için yay oluşturun

Daha önce yapılan CSS-Powered Hover etkisi biraz geri bildirim sağlarken, imleç pozisyonuna tepki veren bir devirme animasyonu yaparak daha da artırabiliriz. Bir baharı, bir fare hareketi gibi yüksek bir frekansta güncellerken, kullanarak daha iyi performans alabiliriz. Ayarlamak Her bahar tarafından geri dönen işlev. Bu animasyon için yeni bir yay oluşturun ve iade işlevini tutun.

 Const [Props, Set] = usePring (() = & gt; ({
Devlet: [0, 0, 1]
}
)); 

16. Eğim stilleri uygulayın

REACT Yayı, dizileri içeren birçok farklı değer türünü canlandırabilir. Değerlerimizi bir dizide saklamak, hepsini bir araya getirmemize izin verir. dönüştürmek bir geçişte mülk.

Oluşturmak transform kartı Enterpolasyon fonksiyonu ve stilleri ana olarak uygulayın Oyalanma eleman.

 Const TransformCard = (x, y, ölçek) = & gt;
 `perspektif (1000px) rotateks ($ {x}}
rotatey ($ {y}} ölçeği ($ {skala}) `;
[...]
& lt; animated.div
 ClassName = "OylamaKarı"
 onclick = {() = & gt; SetSelected (! Seçili)}
 stil = {{dönüştürme:! Seçili ve amp; & amp;
props.state.interpolate (
transformcard)}} & gt; 

17. Fare hareketindeki değerleri ayarlayın

Fare Olayları, o zaman imlecin koordinatlarını sağlar. Müşteri koordinatları, imleci konumunu görünüm alanı içinde almak için ilgileniyoruz. Fare taşı ekleyin ve olayları dışa bırakın & lt; div & gt; . İmleçten ayrıldığında koordinatları hareket ettirin ve varsayılan değerlere sıfırlayın. & lt; div & gt; .

 onmouseleave = {() = & gt; Ayarlamak({
 Devlet: [0, 0, 1]})}
onmousemove = {({Clientx: x,
 clienty: y}) = & gt; Ayarlamak({
 Devlet: CalculateValues ​​(x, y)})
} 

18. Animasyon değerlerini hesaplayın

Kullanıcı ile etkileşime girdiğinde kartın çok fazla hareket etmesini sadece küçük bir eğim istiyoruz. hesaplamak İşlev ekranın yan tarafı, imleci açık ve bu yöne doğru eğin.

Bu değerleri doldurmak için işlevi oluşturun. 40'a kadar bölmek, daha kullanılabilir hale getirmek için eğim etkisini azaltır. Son değer, kartı ekrandan görsel olarak yükseltir.

 Const CalculateValues ​​= (x, y) = & gt; [
- (Y - window.innerheight / 2) / 40,
(x - window.innerwidth / 2) / 40,
1.1]; 

19. Yıldız derecelendirmesini göster

Her görüntünün, kartın arkasındaki yıldızlarda görüntülememiz gereken bir dereceyi vardır. Bu mantık kendi bileşeninin içinde tutulur, ancak önce arka yüze uygulanması gerekir.

İlk önce, derecelendirmeyi tutmak için yeni bir durum parçası oluşturun, sonra bir & lt; starating & gt; arka yüzün içindeki bileşen & lt; div & gt; .

 Const [currentrating, setrating]
 = usestate (derecelendirme);
[...]
{Seçili ve amp; & amp; (
 & lt; starating rating = {currentrating}
setrating = {SetRating} / & gt;
)} 

20. Yıldız Animasyonu Oluştur

Star derecelendirmeleri, kart çevirdikten sonra solacak. Kullanarak usetrail Reakt Yayı'ndan kanca, yayları birbiri ardına birden fazla bileşene uygulayabiliriz.

Açmak Başrolçası / index.js ve kancayı içeri ekleyin. İlk argüman, yayının sayısını tanımlayacaktır.

 Const animatedstars = usetrail (5, {
config: {
Sürtünme: 22,
Gerilim: 500
}
dan: {opacity: 0,
dönüşümü: "Ölçek (0.8)"},
Opaklık: 1,
Dönüştür: "Ölçek (1)"
}); 

21. Yıldızları bileşene uygulayın

Yapmamız gereken son şey aslında bu yıldızları göstermek. animatedstars Değişken şimdi bir dizi yay içeriyor, bu da geri alabileceğimiz ve karta uygulayabiliyoruz.

Her yıldız için bir gösterin & lt; animatedstar & gt; ana için bileşen Başrol oynanan div. Her bir bileşene tüm etkileri uygulamak için stil sahnelerini yaymak. Tıklandığında, yeni derecelendirmeyi ebeveyne gönderin & lt; ratingcard & gt; bileşen.

 {animatedstars.map ((sahne, dizin) = & gt; (
& lt; animatedstar
Active = {Dizin + 1 <= rating}
onclick = {e = ve gt; {
e.StopPropagation ();
Setrating (Dizin + 1);
}}
Key = {Dizin}
stil = {{... sahne}}
/ & gt;
))} 

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı satın al 288 veya abone ol .

Daha fazla oku:

• Yeniden kullanılabilir reaksiyon bileşenleri geliştirin
• 2019'da programlama için en iyi dizüstü bilgisayarlar
• 35 Daha akıllıca çalışmanıza yardımcı olacak web tasarım araçları