Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end Cara Membuat Animasi Website Dengan React

Cara Membuat Animasi Website Dengan React

-

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

animasi

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.

Artikel Terkait  Mengetahui Penggunaan Fungsi Explode dan Implode Pada PHP

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.

Artikel Terkait  Mau Kegiatan Ngodingmu Lebih Asyik? Coba Gunakan 10 Text Editor Terbaik Berikut Ini

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya