Bu makalede, React animasyonları hakkında temel kavramları ve örnek uygulamaları öğreneceksiniz ComponentDidMount, componentWillUnmount, setState, animasyon grupları ve animasyon objeleri gibi kavramlar arasında geçişleri belirleyebilirsiniz Create React App ve Framer Motion ile örnek animasyon uygulamaları yapabilirsiniz Card Hover Animasyonu, Image Hover Animasyonu, Alert Component Animasyonu, Navbar Dropdown Animasyonu ve Loading Spinner Animasyonu gibi birçok örnek uygulamalar yer almaktadır Card Hover Animasyonu örneğinde, CSS transition kullanarak büyüme ve küçülme animasyonları react kodlarıyla birleştirilerek gerçekleştirilebilir Bu animasyonda, mouse imleci kartın üzerine getirildiğinde kart yavaşça büyür ve gölgeli bir efekt ortaya çıkar Mouse'un dışına çıktığında, kart yine yavaşça küçülmeye başlar

React, modern web uygulamaları oluşturmak için çok popüler bir JavaScript kütüphanesidir. Animasyonlar, bir web uygulamasının kullanıcı deneyimini önemli ölçüde artırır. Bu nedenle, React uygulamalarında animasyon kullanımı oldukça yaygındır.

Bu makalede, React animasyon kavramları ve uygulamaları hakkında bilgi edineceksiniz. Bu kavramlar arasında geçişleri belirleyen ComponentDidMount (), componentWillUnmount (), setState (), Animasyon Grupları ve animasyon objeleri yer alır. Örnek uygulamalar arasında Card Hover Animasyonu, Image Hover Animasyonu, Alert Component Animasyonu, Navbar Dropdown Animasyonu ve Loading Spinner Animasyonu yer alır.

React Animasyon Kavramları

React animasyonları, modern web uygulamalarında giderek daha popüler hale gelen görsel bir özelliktir. Animasyonlar, web sitelerinin daha etkileyici ve çekici hale gelmesine yardımcı olabilir. Bu makalede, React uygulamalarında animasyonlar nasıl kullanılabilir, animasyon kavramları ve örnek uygulamalar hakkında bilgi edineceksiniz.

React animasyonlarında, geçişleri belirleyen bazı temel kavramlar bulunmaktadır. ComponentDidMount() örneğin, bir bileşenin yüklendiği zaman başlatılabilecek durumu belirtir. ComponentWillUnmount(), bu bileşen kaldırıldığında yapılacak aksiyonları tanımlar. setState () metodu, bileşenin durumu değiştiğinde animasyonları tetikleyebilir. Animasyon grupları ve animasyon objeleri de animasyonlarda kullanılan diğer konseptlerden bazılarıdır.

React animasyon kavramlarını anlamak, bu teknikleri kullanarak web siteleri ve uygulamaları daha çekici hale getirmenize olanak sağlar. Aşağıdaki bölümlerde, Create React App ve Framer Motion ile örnek animasyon uygulamalarını nasıl yaratabileceğiniz hakkında bilgi edineceksiniz.

Create React App ile Animasyon Uygulamaları

Bu bölümde, Create React App kullanarak animasyon uygulamaları oluşturacağız. Farklı örneklerle, Card Hover Animasyonu, Image Hover Animasyonu, Alert Component Animasyonu, Navbar Dropdown Animasyonu ve Loading Spinner Animasyonu örneklerini inceleyeceğiz.

Card Hover Animasyonu örneğinde, karta imleci getirdiğimizde, kart yavaşça büyüyüp gölgeli bir efekt ortaya çıkar. Mouse'un dışına çıktığımızda, yine yavaşça küçülmeye başlar. Image Hover Animasyonu örneğinde, fotoğrafın üzerine getirildiğinde ölçeklendirilir, içerikleri ortadan kalkar ve arka planda bulunan rengi alır. Alert Component Animasyonu örneğinde, bilgilendirme kutusu animasyon kullanarak geçişlerini yavaşça yapacak. Navbar Dropdown Animasyonu örneği ise basit bir animasyon kullanarak açılır/kapanır. Son olarak, Loading Spinner Animasyonu örneği ile de Basic Loader Animasyonu nasıl yapılır, kod blokları ve açıklamaları ile birlikte paylaşacağız.

Tüm örnekler, Create React App kullanarak kod blokları, açıklamalar ve animasyonların nasıl oluşturulduğunu içerecek, böylece kullanıcıların uygulama geliştirmelerine yardımcı olacak ve örnekleri kendileri de deneyebilecekler.

Card Hover Animasyonu

Card Hover Animasyonu: React animasyonları, kullanıcılara web sitelerinde daha etkileşimli bir deneyim sunmanın yanı sıra site kullanımı konusunda da daha kullanışlı bir yol sunar. Bu nedenle, React kodu kullanarak karta imleci getirdiğimizde kartın yavaşça büyür ve gölgeli bir efekt ortaya çıkarma animasyonunu göstereceğiz. Ayrıca, mouse kartın dışına çıktığında, kart yine yavaşça küçülmeye başlar.

Bu animasyonu gerçekleştirmek için CSS transition ve React kodlarının birleşimi kullanılır. İlk olarak, CSS transition kullanarak büyüme ve küçülme animasyonları için code snippet'lerimiz yazılır. Sonrasında, React kodları kullanarak bu animasyon bloklarını kart bileşenimize entegre ediyoruz. Bu sayede animasyonun doğru süre ve açılarla çalışmasını sağlıyoruz.

Card Hover Animasyonu Nasıl Yapılır?

Card Hover Animasyonu, React ve CSS transition kullanılarak oluşturulabilir. Bu animasyonda, mouse imleci kartın üzerine getirildiğinde kart yavaşça büyür ve gölgeli bir efekt ortaya çıkar. Mouse'un dışına çıktığında, kart yine yavaşça küçülmeye başlar.

Bu örneği kod blokları ve açıklamaları ile göstermek için öncelikle bir kart Component oluşturmalıyız. Bu Component'in içinde, CSS transition kullanarak hover animasyonunu uygulayacağız.

        {`        const Card = () => {          return (            
                            
                                
Card Description
              
            
          );        };        `}      

        {`        .card {          width: 300px;          height: 400px;          margin: 10px;          overflow: hidden;          position: relative;        }        .card img {          width: 100%;          height: 100%;          object-fit: cover;          transition: transform 0.5s ease;        }        .card:hover img {          transform: scale(1.2);          box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);        }        .card-info {          position: absolute;          bottom: 0;          width: 100%;          background: rgba(0, 0, 0, 0.8);          color: #fff;          padding: 10px;          box-sizing: border-box;          transition: opacity 0.5s ease;          opacity: 0;        }        .card:hover .card-info {          opacity: 1;        }        .card-info h2,        .card-info p {          margin: 0;          padding: 0;          text-align: center;        }        `}      

Yukarıdaki kodlar Card Component'inin oluşturulmasını ve CSS transition kullanarak Card Hover Animasyonun uygulanmasını göstermektedir. Ayrıca, kartın altında bir bilgi kutusu da yer almaktadır. Kartın üzerine geldiğinde, kart yavaşça büyür ve gölgeli bir efekt ortaya çıkar. Mouse'un dışına çıktığında, kart yine yavaşça küçülmeye başlar. Ayrıca, kartın altındaki bilgi kutusu da yine mouse imleci Kart'ın üzerine geldiğinde yavaşça belirir.

Image Hover Animasyonu

Image Hover Animasyonu, kullanıcının bir fotoğrafın üzerine getirdiğinde animasyonlu bir tepki veren sade bir örnektir. Örneğin, bir e-ticaret sitesinde, kullanıcının ürün resminin üzerine getirmesi durumunda resmin ölçeklendirilerek büyültülmesi animasyonunu kullanabilirsiniz.

Bu animasyonda, fotoğrafın renklerinin veya içeriğinin azaltılması, genellikle arkada bulunan renge eşleştirmek için kullanılır. Bu da animasyonun daha akıcı ve uyumlu görünmesini sağlar.

Bu animasyon, React ile kolayca yapılabilir. İlk adım olarak, resmin CSS ölçeklendirme ve diğer stil özelliklerini belirleyin.

Bu özelliklerin kombinasyonu, fotoğrafın animasyonlu bir şekilde büyütülmesini ve arkada bulunan rengi almasını sağlar. Ayrıca, fotoğrafın gri tonlamasını arttırır, böylece resim üzerindeki değişikliği daha belirgin hale getirir.

Sonraki adım, MouseOver ve MouseOut olaylarına yanıt verecek bir javascript işlevi oluşturmaktır. MouseOver olayı tetiklendiğinde, fotoğrafın boyutları büyütülmeye başlar, içerikleri kaybolmaya başlar ve genel görünümü değişir. MouseOut olayı tetiklendiğinde, fotoğraf yavaşça küçültülür ve içerikleri geri getirilir.

• MouseOver:

Özellik	Değer
width	350px
height	250px
filter: grayscale	0%

• MouseOut:

Özellik	Değer
width	300px
height	200px
filter: grayscale	100%

Bu animasyonu, herhangi bir resim için kullanabilirsiniz. Bu örnek, React uygulamanızda resim galerileri veya ürün ayrıntı sayfaları için kullanışlı bir özelliktir.

Alert Component Animasyonu

React'ta AlertComponent animasyonu, kaybolma animasyonları kullanılarak yavaşça geçişler yapar. Alert kutusu belirli bir süre boyunca yüzde yüz sayfada kalır ve ardından kendini yavaşça kaybeder. Bu örnekte, "setTimeout" kullanarak Alert Component'in animasyonlarını belirli bir süreyle değiştiririz. ComponentDidMount () yöntemi ile alert bileşenimizi sayfaya ekler ve animasyonlar başlamadan önce ürünün düzgün yüklenmesini garantiler. Animasyon otomatik olarak boşalan kutuyu siler.

Oluşturduğumuz Alert Component'te, belirli bir süre içinde gösterdiğimiz bir bilgilendirme mesajı var. Süre bittiğinde kutu yavaşça kaybolacak. Animasyonların performansı artırmak ve kaybolma süresini iyileştirmek için React ComponentDidMount () ve setState () yöntemlerini kullanıyoruz. Alert bileşeninin oluşturulmasından sonra, animasyon süresine göre, setState () yöntemi uygulanır. Bu animasyonlar için uygun bir performans sunar ve daha iyi görünürlük sağlar.

Navbar Dropdown Animasyonu

Navbar Dropdown Animasyonu, web sitelerinde sıkça kullanılan bir durumdur ve React ile basit bir animasyon kullanarak açılıp kapatılabilir. Adım adım React kodlarını paylaşacağız.

İlk olarak, navbar bileşenini oluşturun ve JSX içinde bir state tanımlayın.

    export default function Navbar() {    const [showDropdown, setShowDropdown] = useState(false);    return (      <nav className="navbar"&g        <div className="navbar-logo"&g	  <a href="/" className="navbar-logo-link"&g	    React Animasyonları	  </a>        </div>	<div className="navbar-dropdown"&g	  <a href="/" className="navbar-dropdown-link"&g            Dropdown Link          </a>        </div>      </nav>    )  }  

Şimdi, onClick olayı kullanarak dropdown'a tıklanınca setShowDropdown işlevini kullanarak state'i true ya da false olarak değiştirin.

    export default function Navbar() {    const [showDropdown, setShowDropdown] = useState(false);    const handleDropdown = () => {      setShowDropdown(!showDropdown);    }    return (      <nav className="navbar"&g        <div className="navbar-logo"&g	  <a href="/" className="navbar-logo-link"&g	    React Animasyonları	  </a>        </div>	<div className={`navbar-dropdown ${showDropdown ? 'show' : ''}`} onClick={handleDropdown}&g	  <a href="/" className="navbar-dropdown-link"&g            Dropdown Link          </a>        </div>      </nav>    )  }  

En son olarak CSS transition ve transform özelliklerini kullanarak animasyonu tamamlayın.

    .navbar-dropdown {      display: none;      position: absolute;      top: 70px;      left: 0;      width: 200px;      padding: 10px;      background-color: #fff;      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);      z-index: 1;  }  .navbar-dropdown.show {      display: block;      transform: translateY(0);      transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);  }  

Şimdi navbar'a tıklandığında dropdown'ın yavaşça açılıp kapanacağını görebileceksiniz.

Loading Spinner Animasyonu

"Loading Spinner Animasyonu" adı verilen bu animasyon, bir uygulamanın veya web sayfasının yüklenme sürecini kullanıcılara daha ilgi çekici hale getirmek için kullanılır ve React Kod şişirici ile kolayca yapılabiliyor. Bu animasyonu kullanmak için öncelikle, "react-loader-spinner" paketini yüklemeniz gerekiyor.

"react-loader-spinner" paketini yükledikten sonra, kullanmak istediğiniz animasyon türüne göre component'i import etmeniz gerekiyor. Örneğin, "BallTriangle" animasyonunu kullanmak için aşağıdaki kodu kullanabilirsiniz:

import { BallTriangle } from "react-loader-spinner";function Loader() {  return (    
          
  );}

Bu kod bloğunda, BallTriangle animasyonunu yüklemek için "react-loader-spinner" paketinden import edildi. Ardından, Loader fonksiyonu içindeki JSX kodunda, animasyonun özellikleri renk, yükseklik ve genişlik belirtilmiştir.

Kodların daha da açıklaması için aşağıdaki tabloya bakabilirsiniz:

Hepsi bu kadar! "react-loader-spinner" paketini yükleyerek ve kullanmak istediğiniz animasyonu belirleyerek React uygulamanızın yüklenme sürecini daha ilgi çekici hale getirebilirsiniz.

Framer Motion ile Animasyon Uygulamaları

Başlıkta belirtildiği gibi, bu bölümde Framer Motion kullanarak animasyon uygulamaları oluşturulacak. Framer Motion, React uygulamalarında animasyonları oluşturmak için kullanılan bir açık kaynak kitaplığıdır.

Sidebar Menu Animasyonu örneğinde, üçgen oku tıklayarak açılıp kapanan bir yan menü animasyonu oluşturulacak. Bu animasyon, gitmek istediğiniz sayfaların seçimini hızlandıracaktır.

Toggle Switch Animasyonu örneğinde, farklı renklerde açma/kapama anahtarlarına sahip bir animasyon oluşturulacak. Bu animasyon, kullanıcılara daha iyi bir deneyim sunacak ve ilgi çekici bir görsel efekt sağlayacak.

Hover Animasyonu örneğinde ise, resim üzerinde hızlı bir şekilde çarpan bir animasyon oluşturulacak. Bu animasyon, kullanıcılara ilginç bir deneyim sunacak ve sitenin daha canlı görünmesini sağlayacak.

Tüm bu örneklerde, Framer Motion kullanarak animasyonların oluşturulması ve uygulanması gösterilecek. Ayrıca, kod örnekleri ve açıklamaları ile animasyonları nasıl yaratacağınızı kolayca öğrenebileceksiniz.

Sidebar Menu Animasyonu

Sidebar Menu Animasyonu, Framer Motion kullanılarak yapılan bir animasyondur ve yan menüyü kontrol etmek için üçgen ok kullanabiliriz. Üçgen okun, açılır-menü simgesi, açık veya kapalı olduğunu gösterir. Üçgeni çevirdiğimizde, yan menü de açılır veya kapanır.

Bu animasyonu oluşturmak için, useState() React hook'u ve useEffect() React hook'u kullanılabilir. useState() hook'u, açık veya kapalı durumu depolamak için kullanılır. useEffect() hook'u, değiştiği zaman bir işlevi çağırmak için kullanılır ve üçgen okun yan menüyü kontrol etmesine olanak sağlar.

Bir animasyon oluşturmak için, Framer Motion kullanarak doğru hareketi ve geçişleri belirtmemiz gerekiyor. Animasyonların yanı sıra olaylara da tepki vermek istiyorsak, Motion öğesi kullanılabilir.

{`import React, { useState } from "react";import { motion } from "framer-motion"; function SideMenu() {  const [isOpen, setIsOpen] = useState(false);   return (    
              
          
Home
          
About Us
          
Contact
        
              setIsOpen(!isOpen)}        whileHover={{ scale: 1.2 }}        whileTap={{ scale: 0.9 }}      >                                    
  );} export default SideMenu;`}

Yukarıdaki örnek kodu kullanarak, Sidebar Menu Animasyonu hakkında daha fazla bilgi edinmek mümkündür. Animasyonları özelleştirerek ve farklı hareketlerle deney yaparak, Framer Motion kullanarak daha özgün animasyonlar oluşturmak mümkündür.

Toggle Switch Animasyonu

Toggle Switch Animasyonu, modern web tasarımında olmazsa olmaz animasyonlardan biridir. Farklı switch modellerinin animasyonları, kullanıcıların gezinme deneyimlerini artırmaya yardımcıdır. Bu animasyonlar, kullanıcı arayüzlerinde kullanılan anahtarları diğerlerinden ayırmak ve özellikle işlevsel olmayı amaçlamaktadır. Ayrıca, Toggle Switch Animasyonları internet sayfasının hızını artırarak, sayfanın daha çabuk yüklenmesine yardımcı olurlar.

Bu animasyonlar, Framer Motion ile kodlanabilirler. Birkaç adımda Toggle Switch Animasyonları yapılabilir. Öncelikle Framer Motion'ı projeye dahil etmek gerekmektedir. Ardından, Toggle Switch öğesi hazırlandığında, Framer Motion'un AnimatePresence component'i kullanılarak renkler, boyutlar, kenarlık gibi öğeler için animasyonlar sağlanır.

Toggle Switch Animasyonları, kullanıcılara etkileyici bir deneyim sunar. Buna ek olarak, görsel olarak çekici bir tasarım tasarlamak istiyorsanız, Framer Motion gibi animasyon araçlarından yararlanabilirsiniz.

Hover Animasyonu

Hover animasyonları, kullanıcıların web sitenizde gezinirken etkileyici bir görsel deneyim yaşamasını sağlayan popüler animasyonlardandır. Bu animasyonlar, fare imlecini bir resim üzerinde gezdirdiğinde hızlı bir şekilde çarpan bir efekt oluşturarak ilgi çekici bir görüntü sağlar.

Bir Hover animasyon örneği, bir resme fare imleci getirildiğinde resmin boyutunu veya görünümünü değiştiren bir animasyon olabilir. Bu örnekte, CSS transition kullanılarak animasyon kodu yazılabilir. Örneğin, bir resim üzerinde gezinildiğinde, resmin sol ve sağ tarafında hafif bir çalkalanma etkisi oluşturulabilir.

Örneğin, aşağıdaki kod bloğunda bir hover animasyonuna sahip bir resim örneği verilmiştir:

.img-hover {    transition: all .2s ease-in-out;}.img-hover:hover {    transform: scale(1.05);    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);}

Bu örnekte, CSS transition kullanılarak animasyon etkisi sağlanmış ve fare imleci resmin üzerindeyken resmin boyutu 1.05 katına çıkmıştır. Ayrıca, resim etrafına bir gölge efekti eklenmiştir.

React'ta Hover animasyonlarını oluşturmak için ise, Framer Motion gibi bir kütüphane kullanmak avantajlı olabilir. Bu kütüphane ile CSS, JavaScript veya HTML bilgisine ihtiyaç duymadan animasyonlar oluşturulabilir. Örneğin, bir resim üzerinde gezinildiğinde resmin boyutunu ani bir şekilde büyüten ve bir gölge efekti ekleyen animasyonlar oluşturulabilir.