CSS animasyonlarını kullanarak uygulamanızı bazı hareketlerle veya diğer stil değişiklikleriyle canlandırın.
Animasyonlar, React uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yolu olabilir. Etkileşimlerin daha yumuşak hissettirmesine yardımcı olabilir ve ayrıca görsel geri bildirim sağlayabilir veya belirli bir öğeye dikkat çekebilir.
Yerel bir çözümden üçüncü taraf kitaplıklarına kadar, React kullanarak CSS animasyonlarıyla çalışmanın birçok yolu vardır.
React’te Animasyonları Neden Kullanmalı?
React uygulamanızda animasyonları 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 olmasını sağlamaya yardımcı olabilir. Örneğin, bir geçiş bileşeni kullanıyorsanız, geçiş düğmesini “açık” ve “kapalı” durumları arasında canlandırmak isteyebilirsiniz. Başka bir örnek ilerleme çubuklarıdır, tepki uygulamanızın sayfaları için hareketli bir ilerleme çubuğu oluşturabilirsiniz .
- Görsel geri bildirim sağlamak . Animasyonlar, kullanıcıya görsel geri bildirim sağlayabilir. Örneğin, bir kullanıcı bir düğmeyi tıklarsa, uygulamanın bu eylemi kaydettiğini belirtmek için düğmeyi canlandırmak isteyebilirsiniz.
- Kullanıcının dikkatini yönlendirme . 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 teslim tarihi yaklaştıkça aciliyeti yansıtmak için animasyon kullanmak isteyebilirsiniz.
- React bileşenlerine animasyon eklemenin birkaç yolu vardır. Burada kullanmayı öğreneceğiniz üçü satır içi stil animasyonlar, tepki animasyonları kitaplığı ve tepki-basit-animasyon kitaplığıdır.
Temel bir tepki uygulaması oluşturarak başlayın , ardından tercih ettiğiniz yöntemi izleyin.
Yöntem 1: Satır İçi Stil Animasyonlarını Kullanma
Örneğin, bir düğmeyi tıklattığınızda sönmesi için bir bileşeni canlandırmak istediğinizi varsayalım. Bunu aşağıdaki kodla yapabilirsiniz:
import React, { Component } from ‘react’;
class FadeInOut extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
}
render() {
const styles = {
opacity: this.state.isVisible ? 1 : 0,
transition: ‘opacity 2s’
};
return (
<div>
<div style={styles}>
Hello, world!
</div>
<button onClick={this.toggleVisibility}>
Toggle
</button>
</div>
);
}
toggleVisibility = () => {
this.setState(prevState => ({
isVisible: !prevState.isVisible
}));
}
}
export default FadeInOut;
Bu örnekte, bir stil nesnesinin opaklık ve geçiş özellikleri vardır. Opaklık, bileşen görünür olmadığında 0 ve görünür olduğunda 1’dir. Geçiş özelliği “opacity 2s” olup, opaklığın değiştiğinde iki saniye içinde geçiş yapmasına neden olur.
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 açılır veya kapanır.
Yöntem 2: tepki animasyonları Kitaplığını kullanma
React bileşenlerine animasyon eklemenin başka bir yolu, 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 install react-animations –save
Ayrıca, tepki animasyonlarının bir bağımlılığı olan afrodit yüklemeniz gerekir:
npm install aphrodite –save
Kitaplıkları yükledikten sonra kullanmak istediğiniz animasyonları içe aktarabilirsiniz:
import { fadeIn, fadeOut } from ‘react-animations’;
Ardından, bileşenlerinizdeki animasyonları kullanabilirsiniz:
import React, { Component } from ‘react’;
import { StyleSheet, css } from ‘aphrodite’;
import { fadeIn, fadeOut } from ‘react-animations’;
const styles = StyleSheet.create({
fadeIn: {
animationName: fadeIn,
animationDuration: ‘2s’
},
fadeOut: {
animationName: fadeOut,
animationDuration: ‘2s’
}
});
class FadeInOut extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
}
render() {
const className = this.state.isVisible ? css(styles.fadeIn) : css(styles.fadeOut);
return (
<div>
<div className={className}>
Hello, world!
</div>
<button onClick={this.toggleVisibility}>
Toggle
</button>
</div>
);
}
toggleVisibility = () => {
this.setState(prevState => ({
isVisible: !prevState.isVisible
}));
}
}
export default FadeInOut;
Bu örnek, tepki animasyonları kitaplığından fadeIn ve fadeOut animasyonlarını içe aktararak başlar. Ardından, fadeIn ve fadeOut animasyonları ve animasyonDuration’ı iki saniyeye ayarlanmış bir stil 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 açılır veya kapanır.
Yöntem 3: tepki-basit-animasyon Kitaplığını kullanma
React-simple-animate kitaplığı, React bileşenlerine animasyon eklemek için basit bir yol sağlar. Karmaşık animasyonları tanımlamayı kolaylaştıran bildirimsel bir API sunar.
Kitaplığı kullanmak için önce onu yüklemeniz gerekir:
npm install react-simple-animate –save
Ardından, bileşenlerinizde kullanabilirsiniz:
import React, { Component } from ‘react’;
import { Animate, AnimateKeyframes} from “react-simple-animate”;
class App extends Component {
render() {
return (
<div>
<Animate
play
start={{
opacity: 0
}}
end={{
opacity: 1
}}
>
<div>
Hello, world!
</div>
</Animate>
<AnimateKeyframes
play
duration={2}
keyframes={[
{ opacity: 0, transform: ‘translateX(-100px)’ },
{ opacity: 1, transform: ‘translateX(0px)’ }
]}
>
<div>
Hello, world!
</div>
</AnimateKeyframes>
</div>
);
}
}
export default App;
Animate bileşeni, bir div öğesinde kaybolur . 0 opaklıkla başlar ve 1 opaklıkla biter. Play prop true olarak ayarlanır, bu da bileşen takıldığında animasyonun otomatik olarak oynatılmasına neden olur.
AnimateKeyframes bileşeni , bir div öğesini iki saniye boyunca canlandırır. Anahtar kareler dizisi, animasyonun başlangıç ve bitiş durumlarını belirtir. İlk animasyon karesinin opaklığı 0 ve translateX değeri -100 pikseldir. İkinci animasyon karesinin 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 tamamladığı için ödüllendirmek için animasyon kullanmak isteyebilirsiniz. Bu, kısa bir “döndürücü” animasyon 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.