Last Updated on April 18, 2022 by

Berdasarkan standar saat ini, aplikasi web tidak hanya harus cepat dan terlihat keren, tetapi juga harus memberikan perasaan hidup, dan yang terakhir ini cukup sulit untuk dikelola dengan baik.

Dengan CSS yang menjadi sangat kuat, ide dan konsep baru diperkenalkan, seperti animasi, yang dapat memberikan pengalaman yang tak terlupakan kepada pengguna saat dilakukan dengan baik.

Animasi website dengan CSS adalah animasi yang menakjubkan, dan orang-orang melakukan hal-hal luar biasa dengannya, seperti seni animasi, Tidak percaya? Mari kita bahas dalam artikel ini.

Mungkin Anda tidak memerlukan tingkat kerumitan itu untuk aplikasi web Anda, tetapi memiliki pemahaman yang baik tentang CSS dan animasi bisa sangat penting untuk membangun pengalaman web di masa depan.

Pada artikel ini, kami akan membahas beberapa perpustakaan animasi React teratas, dan ini akan berfungsi sebagai pengantar kumpulan posting yang akan fokus pada pembuatan produk web yang menarik.

Membuat Animasi Itu Sulit

Kami sering lupa tentang bagaimana animasi akan ditampilkan ke dalam proyek web kami. Sangat mudah untuk membiarkan hal ini terjadi – desain cenderung berbentuk gambar datar dan saat kami membuat kode, kami memikirkan tentang kompatibilitas browser, ukuran layar, dan implementasi fitur.

Terkadang bagian dari UI kita perlu dipindahkan. Mereka membutuhkan gerakan untuk memperlancar transisi antar negara bagian atau untuk menarik perhatian ke tindakan paling penting atau konten terbaru.

Misalnya, kami mungkin ingin menambahkan sedikit animasi website saat harga berubah sehingga orang tidak melewatkannya.

Ini bisa menjadi masalah ketika kita membiarkan ini bertahan dan mengumpulkan solusi cepat sesuai kebutuhan, kita dapat menciptakan situasi di mana animasi kita tidak konsisten, diterapkan pada hal-hal yang salah atau bahkan dilupakan sepenuhnya.

Memahami Animasi

Animasi website di CSS adalah perubahan properti secara bertahap selama periode waktu tertentu.

CSS dilengkapi dengan animasi bawaan, tetapi memungkinkan Anda melakukan lebih banyak hal dengan bingkai utama. Bingkai utama memungkinkan pengaturan titik waktu selama transisi di mana properti CSS diberi nilai yang berbeda memberi Anda opsi untuk menyesuaikan bagaimana elemen berkembang dari waktu ke waktu.

Animasi CSS Tradisional

Inti dari animasi adalah CSS, jadi tidak mengherankan jika salah satu kemungkinan untuk membangun aplikasi React animasi website tidak dengan menggunakan kerangka JS, tetapi dengan menggunakan CSS sebagai gantinya.

Seperti yang kami jelaskan sebelumnya, kami dapat mendefinisikan animasi CSS menggunakan bingkai utama. Mari kita lihat contohnya:

@keyframes ball-bounce {
0%   { transform: translateY(0); }
50%  { transform: translateY(-200px); }
100% { transform: translateY(0); }
}

Dalam contoh ini, kami membuat efek pantulan dengan menerjemahkan elemen dari posisi tertentu -200px dan kemudian kembali ke posisi semula.

Persentase menunjukkan pada momen animasi mana nilai akan mencapai nilai yang diinginkan. Anda mungkin bertanya-tanya mengapa kami mendefinisikannya dalam persentase dan bukan detik atau unit waktu lainnya.

Pada titik ini, kita hanya membuat animasi, tetapi masih perlu diterapkan, dan saat itulah kita menerapkan animasi ke elemen yang kami berikan durasinya, di antara properti lainnya. Ini memberi Anda lebih banyak kendali karena Anda dapat menggunakan kembali animasi dalam elemen berbeda dengan durasi berbeda, keren kan?

Pembahasan ini cukup, mari kita terapkan animasi ini ke sebuah elemen. Untuk melakukan itu, kami menggunakan beberapa properti CSS:

• animasi-nama : ini mengacu pada animasi kita dan harus cocok dengan nama yang diberikan ke bingkai utama.
• animasi-durasi : menentukan berapa lama animasi berlangsung.
• animation-delay : menunda permulaan animasi selama durasi tertentu.
• animation-iteration-count : menentukan berapa kali animasi terjadi. Menentukan tak terbatas tidak akan pernah mengakhiri animasi.

Mari kita lihat bagaimana kita dapat menerapkan contoh kita ke sebuah elemen:
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #EB333D;
animation-name: ball-bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 2s;
animation-direction: alternate;
}

AnimateOnChange

Repo menyertakan komponen yang dapat Anda bungkus di sekitar konten Anda dan mereka akan menerapkan animasi sesuai kebutuhan. Yang pertama adalah AnimateOnChange .

Terkadang Anda ingin memiliki sedikit gerakan di layar untuk memberi tahu orang-orang ketika beberapa konten telah berubah. Menulis fungsionalitas ini untuk banyak potongan kecil UI dapat dengan cepat menjadi merepotkan, jadi Anda cukup menggabungkan konten Anda dalam komponen AnimateOnChange.

Kita bisa memulai dengan menjalankan npm install react-animation . Kemudian komponen tersebut digunakan sebagai berikut:

impor { AnimateOnChange } dari ‘ react – animation ‘        Konten Anda, komponen, dll. Di sini

Komponen ini akan merespons setiap perubahan dalam konten “anak-anak” dengan menerapkan animasi website fade-out lalu fade-in sederhana dengan konten baru. Kita dapat melihat efeknya pada contoh ini:

Masih ada lagi yang bisa kita lakukan dengan komponen ini. Kita dapat mengirimkan properti untuk mengontrol cara kerja animasi. Salah satu opsinya adalah memberikan nilai durasiOut (sejumlah milidetik). Ini “durasiOut” adalah waktu yang dibutuhkan animasi “keluar” (saat konten lama dianimasikan pergi). Kita dapat mengatur ini menjadi angka yang lebih besar atau lebih kecil untuk mengubah nuansa animasi fade.

Dengan melewati di animationIn dan animationOut properti, kita dapat memiliki animasi lainnya akan berlaku bila konten berubah. Ini mengambil nama salah satu animasi yang disertakan dalam paket.

Dengan memanfaatkan animasi pantulan bawaan. Jika kita membutuhkan lebih banyak kontrol, kita dapat mengatur properti apa pun yang kita suka pada komponen menggunakan properti style. Ini seperti properti “style” di React, dan menerima objek yang berisi aturan gaya dengan cara biasa.

React Spring

Meskipun animasi menggunakan CSS sangat umum, kita dapat membuat animasi yang kompleks menggunakan pustaka seperti React Spring. React Spring hadir dengan transisi yang sangat kuat, tegas, jalur, dan mendukung komponen kelas React Hooks dan React JS.

Saat membuat animasi menggunakan JavaScript, framework, dan library biasanya akan mendelegasikan aliran kontrol animasi ke JavaScript saat menggunakan CSS untuk melakukan transformasi.

Ini memiliki keuntungan besar karena animasi dapat menjadi dinamis dan berkembang hanya dengan mengubah kode atau mengontrolnya dengan kekuatan penuh JavaScript, tetapi juga memiliki beberapa kekurangan seperti yang Anda duga.

React Spring adalah contoh sempurna dari jenis implementasi ini, dan cara apa yang lebih baik untuk menjelaskannya selain dengan sebuah contoh:

const animation = useSpring({
from: {transform: 'translateY(0px)' },
to: async next => {
while (true) {
await next({transform: 'translateY(-200px)'});
await next({transform: 'translateY(0px)'});
}
}
});

Contohnya adalah animasi yang sama yang kami buat menggunakan CSS dan bingkai utama, tetapi kali ini kami menggunakan React Spring dan JavaScript untuk mengontrol aliran animasi.

Kami mulai dengan menyediakan fromproperti dengan CSS dari status awal kami, dan kemudian kami memiliki toproperti dengan nilai akhir kami. Yang sangat menarik adalah bahwa tostatus bisa menjadi fungsi, dan di dalam fungsi seperti itu, kita bisa membangun beberapa langkah atau memiliki animasi loop tanpa akhir seperti yang kita alami.

Pendekatan ini memungkinkan kita untuk membuat animasi apa pun yang memungkinkan dengan lebih banyak bingkai utama, memanfaatkan kekuatan JavaScript untuk melakukannya.

Sekarang mari kita lihat bagaimana contoh lengkap kita akan terlihat :

Untuk menggunakan React Spring pada proyek Anda, jalankan saja

npm i react-spring

Gerakan Framer

Framer Motion bekerja dengan cara yang sangat mirip dengan React Spring, pada kenyataannya, React Spring didasarkan pada desain Framer Motion. Namun, ada beberapa perbedaan. Framer Motion lebih memilih pendekatan yang lebih deklaratif untuk menentukan transisi, semuanya dapat dilakukan dengan mudah dengan menyetel properti pada objek animasi.

Mari kita lihat contoh kita, sekarang menggunakan library yang luar biasa:

<motion.div transition={{
y: {
duration: 1,
yoyo: Infinity,
ease: "easeIn",
}
}}
animate={{ y: ["0px", "-200px"] }}>
<div className="ball"></div>
</motion.div>

Objek animasi kita mengharapkan 2 properti, animasi yang menentukan perubahan pada properti, dan objek transisi yang menentukan bagaimana properti tersebut berubah.

Sesederhana itu, mari kita lihat bagaimana contoh lengkap kita akan terlihat:

Untuk menggunakan Framer Motion pada proyek Anda, cukup jalankan

npm i framer-motion

Kesimpulan

Web dulu membosankan, tetapi sekarang aplikasi web menyenangkan dan animasi memainkan peran penting di dalamnya. Ketika dilakukan dengan baik, mereka dapat meningkatkan pengalaman pengguna, namun, jangan menyalahgunakannya, terlalu banyak dari mereka dan itu benar-benar dapat merugikan UX.

Dengan pentingnya animasi website, React membutuhkan solusi yang solid untuk menjaga aplikasi web tetap mengikuti tren, dan hari ini kami membuat daftar beberapa cara agar aplikasi Anda menonjol dengan menganimasikan komponennya.

Satu-satunya niat kami hari ini adalah untuk memperkenalkan topik dan beberapa pendekatan yang diharapkan dapat memicu keingintahuan Anda untuk mempelajarinya lebih lanjut dan membuat animasi Anda sendiri.

Kunjungi Web App di https://appkey.id/ dan jangan lupa nyalakan notifikasi agar tidak ketinggalan informasi terbaru.