REACT SAMPLES
React Animation Samples
React Animation gerçekleştirmek için bir çok yöntem bulunuyor, Native yöntemler, Kütüphaneleri kullanarak React Motion, React Spring ve Lottie benzeri kütüphaneler
1. Ripple Button
Ripple aslında suyun içerisine bir yağmur damlasının veya bir taşın etkisiyle çevresine oluşturduğu dalgaların etkisinin yayılarak ilerlemesi diyebiliriz.
Özellikle düğmelerin üzerine gelindiğinde bu düğmenin hover renginin değiştiğini görebilirsiniz. Düğmenin basılması durumunda bu efekti bir dalga efektine nasıl dönüştürebiliriz.
Şimdi bu butonu nasıl geliştiriyoruz kısaca ona bir bakalım. Öncelikle bir düğme hazırlıyorum.. Bu düğmenin temel özellikleri bulunuyor. Arka plan ve hover renklerini random değerler ile atıyorum ki her seferinde farklı bir renk değeri alsın.
<Button.Ripple
onClick={() => setCounter(count + 1)}
className={css`
padding: 6px 12px;
margin: 4px;
background-color: ${bgColor};
color: white;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
&:hover {
background-color: ${hoverBgColor};
}
`}
>
<span>Click Me ! {count}</span>
</Button.Ripple>Şimdi gelelim. Bu düğmeye bastığımızda Ripple Effect’ini vermeye bu işin asıl efekt kısmı bu kısım. Burada düğmeye click sırasında uygulayacağımız waves-effecti tanımlıyoruz.
.waves-effect {
position: relative;
overflow: hidden;
.waves-ripple {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(#fff, 0.2);
animation: ripple-effect 0.7s ease;
}
}
@keyframes ripple-effect {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}Tek yapmamız gereken düğmenin click eventinde bu effecti class olarak bu düğmeye atamak. Daha sonrasında düğmemizi tanımlıyoruz. Basit bir düğme template hazırlıyoruz.
export const Button = ({className, children, onClick}) => {
return (
<div className={className} onClick={onClick}>
{children}
</div>
);
};Bunun template kullanarak farklı koordinatlar ile efekti uygulayıp kaldırdığımız Ripple düğmesini geliştiriyoruz. onClick eventinde tıklanan pozisyonu alarak bu kısmın koordinatlarına ripple efektini uyguluyoruz.
export const RippleButton = ({className, children, onClick, ...rest}) => {
const mounted = React.useRef(false);
const [isRippling, setIsRippling] = React.useState(false);
const [coords, setCoords] = React.useState({x: -1, y: -1});
React.useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
React.useEffect(() => {
if (mounted) {
if (coords.x !== -1 && coords.y !== -1) {
setIsRippling(true);
setTimeout(() => setIsRippling(false), 500);
} else {
setIsRippling(false);
}
}
}, [coords, mounted]);
React.useEffect(() => {
if (mounted) {
if (!isRippling) setCoords({x: -1, y: -1});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isRippling]);
return (
<Button
className={classnames(Styles['waves-effect'], {
[className]: className,
})}
onClick={(e) => {
const rect = e.target.getBoundingClientRect();
setCoords({x: e.clientX - rect.left, y: e.clientY - rect.top});
if (onClick) {
onClick(e);
}
}}
{...rest}
>
{children}
{isRippling ? (
<span
className={Styles['waves-ripple']}
style={{
left: coords.x,
top: coords.y,
}}
></span>
) : null}
</Button>
);
};2. Lottie React Player
LottieFiles içerisinde bir çok animasyon bulunan bir platform. Bu animasyonları alıp projenize Lottie React Player ile basit bir şekilde dahil edebilirsiniz.
Bu siteden export ettiğiniz animasyon dosyalarını basit bir şekilde Lottie React Player ile sistemize bir URL üzerinden entegre ederek hızını ve animasyonun kontrollerini gerçekleştirebilirsiniz.
3. Assistant Animations
Assistan animasyonunda 1 assistan görseli ile üzerinde Lottie Animasyonu ekleyerek gerçekleştiriyoruz. Asssitan düşünürken ve konuşurken animasyon çalışırken, diğer durumlarda animasyonun çalışmasını istemiyoruz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
