Tidak ada trik khusus untuk membuat animasi berskala besar. Meskipun tidak, ada: Anda perlu menghabiskan banyak waktu untuk mengoptimalkan dan mengujinya. Jadi, setelah beberapa tahun bereksperimen, terus-menerus mendorong batas kinerja browser, kami telah menghasilkan serangkaian prinsip desain dan pengkodean yang memungkinkan siapa pun menghiasi proyek mereka dengan animasi yang mengesankan dan produktif. Penggunaannya akan memungkinkan Anda mendapatkan kelancaran pengoperasian halaman di desktop dan browser seluler. Dan yang terpenting, semua ini dilakukan dan dipelihara dengan sangat sederhana.

Teknologi dan implementasinya akan sedikit berbeda untuk setiap kasus tertentu, namun kami yakin bahwa hal tersebut akan terjadi prinsip-prinsip umum akan terbukti berguna di hampir semua situasi.

Apa itu animasi?

Animasi sudah ada sejak sebelum adanya Internet. Untuk menciptakan yang terbaik, Anda dapat menghabiskan waktu belajar seumur hidup. Namun, ada juga pola dalam hal ini. Kami akan membahas beberapa masalah umum dan tidak umum yang dihadapi desainer saat membuat animasi untuk web.

Untuk mencapai animasi halus pada 60 fps, setiap frame harus diproses dalam waktu kurang dari 16 ms! Ini adalah periode waktu yang singkat, jadi perlu menemukan cara yang sangat efisien untuk merender setiap frame kinerja tinggi animasi.

Ada banyak cara untuk mengimplementasikan animasi web. Misalnya, film sudah ada sebelum munculnya Internet. Esensinya adalah bingkai gambar tangan dengan perbedaan minimal ditampilkan beberapa kali per detik, sehingga menciptakan ilusi gerakan bagi pemirsanya.

Twitter baru-baru ini menggunakan pendekatan sederhana ini untuk animasi hati baru mereka, menelusuri 26 frame dalam urutan tertentu.

Animasi yang dihasilkan terlalu rumit untuk diterapkan dan, pada kenyataannya, tidak cukup mulus.

Dalam banyak kasus, penggunaan ini lebih menguntungkan properti CSS"transisi" untuk menganimasikan elemen secara otomatis ketika berubah. Teknik ini juga dikenal sebagai “tweening” dan melibatkan pembuatan animasi dengan konstruksi otomatis gambar perantara. Katakanlah kita memiliki 2 gambar objek yang sama dengan posisi berbeda. Efek transisi CSS akan membantu Anda membuat animasi perubahan statusnya. Penggunaannya menguntungkan karena Anda dapat mengatur ulang atau membalikkan seluruh logika animasi kapan saja. Ini adalah pendekatan ideal “atur dan lupakan”. Berfungsi dengan baik, misalnya, dengan berbagai rangkaian intro atau interaksi sederhana seperti mengaktifkan animasi gerakan mouse.

Selain itu, animasi yang dibuat dengan CSS pada bingkai utama dapat berfungsi sebagai latar belakang yang ideal untuk area halaman tertentu. Misalnya, cincin dari logo Giroskop yang terus berputar. Pendekatan ini baik digunakan untuk menjiwai pergerakan berbagai mekanisme.

Jadi, mari kita akhiri pendahuluan dan beralih ke bagian utama postingan. Berikut beberapa tip yang akan membantu Anda meningkatkan produktivitas dan kualitas animasi Anda secara signifikan. Kami berharap mereka membantu Anda.

#1 Jangan ubah properti apa pun selain opacity (kegelapan) dan transformasi (mengubah)

Bahkan jika Anda berpikir akan lebih baik dengan cara ini, Anda tetap tidak boleh melakukannya!

Mengikuti prinsip dasar ini akan meningkatkan efisiensi operasional sebesar 80%, bahkan di segmen seluler. Anda mungkin pernah mendengar tentang ini sebelumnya. Idenya tidak orisinal, namun jarang diikuti. Ini setara dengan "makan sehat dan berolahraga". Setiap orang telah mendengar, mereka tahu bahwa ini benar, namun hanya sedikit orang yang mematuhinya.

Sebenarnya penggunaan prinsip ini cukup mudah untuk dibiasakan. Hal ini terutama akan menguntungkan mereka yang sebelumnya pernah membuat animasi menggunakan properti CSS tradisional.

Misalnya, jika Anda perlu memperkecil objek, Anda dapat menggunakan properti skala transformasi alih-alih mengubah lebar/tinggi. Jika Anda perlu memindahkan suatu elemen, Anda tidak perlu repot-repot mengubah nilai padding, karena animasi seperti itu memerlukan penataan ulang tata letak halaman setiap frame. Lebih baik gunakan properti transformasi sederhana untuk ini: mengubah: terjemahkanX atau mengubah: terjemahkanY.

Mengapa ini berhasil?

Bagi seseorang yang mengubah lebar, padding, dan parameter serupa lainnya, menggunakan properti transformasi mungkin bukan ide bagus. Secara visual hasilnya serupa. Namun dari sudut pandang biaya daya komputasi komputer yang akan menghitung semua ini, penggunaan transformasi terlihat jauh lebih baik.

Pengembang browser telah melakukan banyak pekerjaan untuk mengoptimalkan operasi ini. Transformasi sangat efektif, menghemat sumber daya kartu grafis dengan menghilangkan kebutuhan untuk merender ulang elemen.

Anda bisa menjadi gila menunggu halaman seperti ini dimuat: semua sudut dibulatkan, gambar digunakan, bayangan diterapkan pada semuanya, dan keburaman dinamis elemen ditambahkan untuk kebahagiaan total. Jika ini terjadi hanya sekali, menunggu beberapa milidetik tambahan tidak akan membuat perbedaan. Namun setelah semua konten dirender, Anda tidak ingin lagi menunggu nilai apa pun dihitung ulang untuk mengubah halaman.

#2 Sembunyikan konten di depan mata.

Gunakan "pointer-events" di CSS: nilai "none" bersama dengan opacity nol untuk menyembunyikan elemen

Metode ini tidak berfungsi dengan baik di browser lama, namun jika Anda mendesain untuk webkit atau mesin browser modern lainnya, ini akan membuat hidup Anda jauh lebih mudah.

DI DALAM waktu yang jauh saat animasi diproses di bantuan jQuery bernyawa(), kesulitan utama saat bekerja dengan efek fade adalah kebutuhan untuk mengganti nilai properti tampilan: aktifkan tidak ada untuk menghentikan efek pada saat yang tepat. Terlalu dini dan animasinya tidak akan selesai, terlambat dan Anda akan mendapatkan elemen yang tidak terlihat nilai nol opacity, menutupi halaman. Panggilan balik diperlukan untuk menghapus layar setelah animasi selesai.

Properti CSS "pointer-events" (telah ada sejak lama, tetapi karena alasan tertentu tidak sering digunakan) berfungsi untuk membuat segala sesuatunya tidak sensitif terhadap klik mouse dan interaksi lainnya. Seolah-olah mereka tidak ada di halaman sama sekali. Properti ini dapat dengan mudah diaktifkan/dinonaktifkan melalui CSS. Saat dijalankan, ini tidak mengganggu animasi dan tidak mempengaruhi rendering/visibilitas elemen.

Dengan menggabungkan hal ini dengan nilai opacity nol, kita mendapatkan efek yang sama dengan yang diberikan "display: none", tetapi tanpa dampak kinerja saat memulai loop rendering animasi baru. Jika saya perlu menyembunyikan elemen dari tampilan, saya biasanya mengatur opacity ke nol dan mematikan acara pointer. Setelah itu, saya bisa melupakannya, mengetahui bahwa semuanya dapat dengan mudah dikembalikan dan tidak ada yang akan mengganggu kinerja halaman.

Teknik ini bekerja sangat baik dengan elemen yang ada penentuan posisi mutlak, karena Anda dapat yakin bahwa hal tersebut tidak berdampak apa pun pada semua area tata letak dan elemen halaman lainnya.

Ini juga memberi Anda lebih banyak kebebasan bertindak, karena waktu mulai/berhentinya animasi dalam kasus ini mungkin tidak terlalu tepat. Bahkan jika Anda membuat sedikit kesalahan dalam pengaturan waktunya, tidak ada hal buruk yang akan terjadi. Pengguna tidak akan dapat mengklik apa pun sebelum animasi selesai. Semuanya akan berjalan sesuai rencana Anda.

#3 Anda tidak perlu menganimasikan semuanya sekaligus.

Atau gunakan prinsip koreografi.

Satu animasi bisa saja berjalan mulus, namun jika beberapa efek dijalankan secara bersamaan, hal ini dapat merusak keseluruhan gambar dan mengurangi produktivitas. Membuat demo yang berjalan lancar sangatlah mudah, namun memastikan tingkat kinerja yang dapat diterima sebagai bagian dari keseluruhan situs jauh lebih sulit. Oleh karena itu, sangat penting untuk merencanakan tampilan animasi dengan baik.

Anda akan ingin mengatur timing Anda sehingga semua animasi dimulai pada waktu yang berbeda. Biasanya 2-3 animasi dapat berjalan tanpa penundaan pada waktu yang sama, terutama jika dimulai dengan rentang waktu yang kecil. Lebih dari 3 peluncuran secara bersamaan (secara kasat mata, tetapi tidak pada intinya - harus ada penyebaran waktu minimum) hampir pasti akan menyebabkan kelambatan pada layar.

Jika terdapat lebih dari satu animasi dalam satu halaman, penting bagi Anda untuk memahami konsep koreografi. Tampaknya, apa hubungannya istilah tari dengan itu? Namun memahami esensinya dalam konteks ini sangat penting untuk keberhasilan animasi antarmuka: segala sesuatunya harus muncul di layar dari arah yang benar dan ke arah yang benar. momen yang tepat. Meskipun semuanya bekerja secara terpisah, bagi pemirsa mereka seharusnya terlihat seperti bagian dari satu mekanisme yang dirancang dengan baik.

Desain Material Google membahas masalah ini. Ini, tentu saja, bukan satu-satunya cara yang benar, namun memberikan bahan untuk dipikirkan dan diuji.

#4 Sedikit peningkatan penundaan transisi memudahkan untuk mengikuti prinsip koreografi

Koreografi animasi sangat penting, dan kualitas produksinya memerlukan banyak eksperimen. Namun, kode untuk mengimplementasikan ide tersebut sepertinya tidak terlalu rumit.

Saya biasanya mengganti satu kelas pada elemen induk (biasanya isi) untuk memicu banyak transisi, masing-masing dengan parameter penundaan transisinya sendiri. Hal ini dilakukan agar setiap elemen muncul pada waktu yang saya butuhkan. Dari perspektif pengkodean, Anda harus mengkhawatirkan nilai satu variabel saja daripada mempertahankan lusinan pengaturan waktu dalam JavaScript.

Dengan mengayunkan serangkaian elemen secara bersamaan, Anda dapat dengan mudah menyusun koreografinya. Ini adalah pendekatan yang ampuh karena semuanya terlihat bagus dan berjalan cepat pada saat yang sama, ingatlah bahwa Anda hanya dapat menjalankan 2-3 animasi dalam satu waktu dan semuanya akan baik-baik saja. Anda perlu mendistribusikannya di halaman sehingga masing-masing diproses dengan lancar dan tepat waktu. Kumpulan animasi Anda harus dilihat oleh pemirsa sebagai aliran yang berkesinambungan, dan bukan rangkaian elemen yang berbeda. Satu adegan yang mengalir.

Kode contoh

Ada beberapa metode sederhana, yang memungkinkan Anda mengguncang elemen Anda. Mereka sangat nyaman, terutama jika Anda menggunakan rangkaian animasi yang panjang. Jika rantai berisi kurang dari 10 elemen, maka saya biasanya menentukan nilai penundaan di CSS. Ini adalah cara paling sederhana untuk menerapkannya.

Untuk urutan yang lebih panjang atau elemen yang berubah secara dinamis, pengaturan waktu untuk semua elemen dapat diatur secara dinamis dengan mengubah nilai variabel.

Biasanya ada 2 variabel: penundaan dasar dan waktu tunda antara setiap elemen. Keseimbangan ini cukup sulit ditemukan, tetapi jika Anda menekan angka yang tepat, semuanya akan baik-baik saja.

#5 Gunakan pengganda umum untuk mengembangkannyagerakan lambat

Dan percepat semuanya nanti.

Dalam desain animasi, waktu adalah segalanya. 20% pekerjaan terletak pada pembuatan animasi itu sendiri, dan 80% sisanya adalah pencarian parameter yang benar dan pengaturan waktu untuk mencapai pemandangan yang tersinkronisasi dengan jelas dan mulus.

Hal ini terutama berlaku ketika mengerjakan koreografi berbagai elemen dan mencoba untuk menghasilkan performa maksimal. Setelah memperlambat animasi, adegan seperti itu akan menjadi lebih mudah untuk dikerjakan.

Jika Anda menggunakan Javascript atau semacam praprosesor CSS seperti SASS, kodenya seharusnya cukup sederhana untuk dibuat struktur yang benar variabel.

Anda harus memastikan bahwa desain kodenya mudah digunakan sehingga Anda dapat dengan mudah menguji kecepatan dan pengaturan waktu yang berbeda. Misalnya, jika animasi tersendat bahkan pada kecepatan 1/10, kemungkinan besar Anda melakukan kesalahan mendasar. Jika berjalan lancar ketika diregangkan 50 kali, maka pertanyaannya adalah menemukan kecepatan maksimum, di mana ia dapat beroperasi dengan lancar. Cukup sulit untuk melihat masalah pada kecepatan penuh, tetapi jika Anda memperlambatnya, semuanya menjadi sangat jelas.

Untuk menyiapkan animasi yang sangat kompleks atau untuk menemukan hambatan kinerja, melacak proses dalam gerakan lambat akan sangat berguna.

Idenya adalah mengemas banyak detail indah ke dalam sebuah adegan dalam gerakan lambat, lalu mempercepatnya agar animasinya terlihat sempurna. Ini adalah pekerjaan yang sangat rumit, namun pengguna akan menghargai detail dan kelancaran apa yang terjadi di layar.

Fitur ini merupakan bagian aktif dari OS X: saat Anda meminimalkan jendela program, Anda melihat animasi dalam gerakan lambat.

#6 Ambil rekaman video antarmuka Anda dan gulir, Anda dapat melihat lebih banyak dari sudut pandang orang ketiga

Terkadang perspektif luar membantu Anda melihat sesuatu dengan lebih jelas, dan video membantu dengan cara yang hebat mencapai ini.

Beberapa orang membuat video di After Effects dan kemudian mencoba mengimplementasikan video yang dihasilkan di website. Saya sering melakukan hal sebaliknya, mencoba melakukan video yang bagus berdasarkan antarmuka pengguna lokasi.

Dalam real time, sangat mudah untuk melewatkan beberapa momen. Tapi melihat animasi dalam rekaman kecepatan lambat lagi dan lagi akan membantu untuk mengidentifikasi bahkan yang paling banyak masalah kecil. Dengan pendekatan ini, semuanya menjadi jelas.

Menonton video selang waktu dari halaman saya dan memperbaiki area masalah telah menjadi bagian penting dari pekerjaan saya. Tentu saja Anda bisa menyalahkan semuanya browser lambat, namun sering kali, setelah pengujian dan pengoptimalan, animasi mulai bekerja seperti jarum jam. Artinya, segala sesuatu bisa diselesaikan dengan pendekatan yang tepat.

#7 Aktivitas jaringan dapat menyebabkan kelambatan.

Anda perlu melakukan pramuat atau memblokir yang besarHTTP-permintaan

Gambar adalah faktor penentu dalam hal ini, terutama jika gambar tersebut berukuran besar (misalnya, latar belakang yang berat), atau banyak gambar kecil (memuat 50-100 avatar, misalnya), atau sekadar jumlah besar isi ( halaman panjang dengan banyak gambar).

Selama pemuatan halaman pertama, banyak hal diinisialisasi dan dimuat. Iklan, modul, dan skenario antrean unduhan 3 lainnya membuat situasi menjadi lebih buruk. Terkadang menunda animasi untuk diputar hanya beberapa ratus milidetik setelah halaman lainnya dimuat dapat menghasilkan keajaiban. Anda akan mendapatkan peningkatan kinerja yang signifikan.

Mega-optimasi tidak boleh digunakan kecuali benar-benar diperlukan, meskipun halaman yang berat mungkin memerlukan penundaan dan pengaturan waktu animasi yang sangat tepat agar dapat berjalan dengan lancar. Secara umum, pertama-tama Anda perlu memuat data sesedikit mungkin, lalu menghubungkan animasi, dan setelah itu melanjutkan memuat sisanya konten berat halaman.

Pada halaman dengan banyak data, pekerjaan pengoptimalan dapat memakan banyak waktu. Animasi yang berfungsi baik dengan konten statis dapat mulai melambat dan berantakan saat dimuat secara bersamaan dengan data nyata. Jika sesuatu tampaknya berjalan cukup lancar, namun pada titik tertentu mulai melambat karena alasan yang tidak diketahui, Anda harus memeriksanya aktivitas jaringan. Saluran Anda mungkin sibuk dengan unduhan lain saat ini. Pastikan jaringan Anda tidak menangani beberapa unduhan besar secara bersamaan.

#8 Tidak perlu mengubah pengguliran default.

Ide untuk mengganti scrollbar mungkin tampak keren, tetapi sebenarnya tidak.

Scrolling berbasis animasi telah populer selama beberapa tahun, terutama jika dibuat menggunakan paralaks dan efek khusus lainnya. Kita bisa berdebat tentang kegunaannya untuk waktu yang lama, tapi inilah caranya teknis pelaksanaan Ada beberapa ide yang berhasil dan tidak begitu sukses seperti ini.

Sedang dengan cara yang efisien membuat sesuatu dari kategori ini adalah menentukan langkah pengguliran optimal dan menyorotnya acara terpisah(peristiwa). Jika Anda tidak tahu apa yang Anda lakukan, lebih baik tidak menggunakan pengguliran seperti itu sama sekali. Sangat mudah untuk membuat kesalahan di sini, dan mempertahankan tingkat kinerja normal pada halaman dengan pengguliran yang rumit adalah tugas yang cukup merepotkan.

Ide yang lebih buruk lagi adalah mengganti gulir standar dengan apa yang disebut scrolljacking (konten berubah selaras dengan gulir, misalnya, situs web Apple). Jangan lakukan ini. Sulit untuk berhasil menerapkan efek seperti itu, dan tidak semua pengguna akan menyukainya.

Jika Anda memiliki pengalaman dan keinginan untuk membuat bilah gulir Anda sendiri, buatlah prototipe ringan dan uji fungsionalitasnya sebelum menghabiskan waktu untuk pengembangan penuh.

#9 Uji proyek Anda di perangkat seluler lebih sering.

Sebagian besar situs web dibuat di PC. Paling sering mereka diuji pada mesin yang sama tempat mereka dikembangkan. Dengan demikian, versi seluler situs dan kinerja animasi memudar ke latar belakang. Beberapa teknologi animasi (misalnya kanvas) tidak akan berfungsi dengan baik di platform seluler.

Namun jika animasi dibuat dan dioptimasi dengan baik, maka hasilnya akan bagus pengalaman seluler penggunaan mungkin lebih unggul kualitasnya dibandingkan desktop. Pengoptimalan seluler dulunya merupakan topik yang sangat kompleks, namun iPhone baru bekerja lebih cepat dari kebanyakan laptop. Jika Anda mengikuti tip di atas, Anda dapat mencapai kinerja yang mengesankan dalam animasi Anda perangkat seluler Oh.

Versi seluler situs ini adalah bagian yang besar dan sangat penting. Ini mungkin tampak aneh, tapi saya sarankan menjelajahi situs Anda secara eksklusif di ponsel atau tablet selama seminggu. Idealnya, Anda tidak merasa dihukum karena tidak bisa mengakses desktop Anda. Jika semuanya berjalan dengan cepat, lancar dan tanpa melanggar struktur yang dimaksudkan, maka Anda telah mencapai tujuan Anda. Jika terjadi kesalahan, Anda harus terus bekerja.

Terus lakukan penyempurnaan desain dan peningkatan kinerja hingga perbedaan pengalaman pengguna antara situs versi seluler dan desktop hilang sepenuhnya.

Jika Anda memaksakan diri untuk menggunakan situs seluler selama seminggu, Anda mungkin akan mengoptimalkannya lebih baik daripada versi yang lebih besar. Dengan melawan iritasi dengan menggunakannya secara teratur, Anda berhasil sepenuhnya rasakan masalah yang akan dihadapi pengguna Anda dan perbaiki sebelum proyek diluncurkan. Ini akan menyelamatkan Anda dari banyak masalah di masa depan.

#10 Uji proyek di berbagai perangkat

Ada banyak faktor yang secara radikal dapat memengaruhi kinerja situs web di PC dan perangkat seluler: resolusi layar, jumlah piksel di jendela, perangkat keras lama, dll.

Meskipun Chrome dan Safari sudah terpasang Basis data Webkit dan memiliki sintaksis yang hampir sama, masing-masing memiliki keunikannya sendiri. Pembaruan Chrome apa pun secara bersamaan memperbaiki bug lama dan memperkenalkan bug baru, jadi Anda harus selalu memantau perkembangannya, seperti yang mereka katakan.

Jelas bahwa tidak semua orang ingin mengikuti jalur yang paling sedikit hambatannya, membuat situs web sesuai dengan jumlah bug yang paling rendah, agar tidak mengalami kekacauan lagi setelah pembaruan terkini. browser populer. Menemukan cara cerdas untuk menambahkan penyempurnaan dan menghapus beberapa penyempurnaan agar situs Anda tetap berjalan lancar bisa sangat bermanfaat.

Saya rutin beralih antara MacBook Air kecil dan iMac saya yang lebih besar untuk bekerja. Setiap siklus mengungkapkan masalah-masalah kecil dan menunjukkan perbaikan yang diperlukan. Hal ini tidak hanya menyangkut kinerja animasi, tetapi juga desain situs secara keseluruhan, kepadatan informasi, keterbacaan, struktur, dll.

Seluler dan versi reguler Situs web paling sering berbeda dalam desain struktur dalam hal lebar, tinggi, kerapatan piksel, dan properti lainnya. Pengetahuan tentang fitur sistem operasi dan karakteristik perangkat keras perangkat seluler dapat membantu pengoptimalan, karena sangat berbeda dengan yang ada di PC.

Saya harap teknik di atas bermanfaat bagi Anda dan menggunakannya dalam proyek Anda berikutnya. Semoga beruntung!

Terjemahan artikel https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29

Diketahui bahwa situs web dengan Kilatan-Konten dianggap sebagai artikel terpisah di komunitas web; kemungkinan animasinya yang tidak terbatas dan sketsa yang menarik mengubah perkembangannya jenis khusus seni. Website berbasis Flash dapat dibagi menjadi dua kelompok: desain Flash 2D dan 3D.

DI DALAM koleksi ini masuk 50 Situs Web Animasi Flash 3D, benar-benar menonjol dari latar belakang umum, menarik perhatian yang belum pernah terjadi sebelumnya, dan menerima penghargaan! Ini bukan sekedar daftar - situs web ini akan memberi Anda banyak ide, karena masing-masing ide adalah sebuah mahakarya!

Situs ini sangat tiada bandingannya sehingga sulit untuk dijelaskan dengan kata-kata! Sangat screensaver yang indah, diikuti dengan contoh animasi 3D yang menakjubkan di halaman web yang luar biasa.

Pas de Deux, Norman McLaren 1968

Animasi bukanlah seni menggambar gerak, melainkan seni gerak dalam menggambar. —Norman McLaren

Semua orang tahu apa itu animasi, tapi bagaimana cara menggabungkannya dengan web dan desain seluler? Saat ini, banyak situs menggunakan animasi pada satu tingkat atau lainnya, tetapi terutama untuk kepentingan gambar yang indah, bukan untuk meningkatkan UX.

Seperti halnya desain tradisional, animasi memiliki konsep, prinsip, dan keinginan untuk dicari solusi non-standar, yang akan membuat animasi sesuai keinginan Anda. Mulailah dengan empat hal ini tips bermanfaat tentang penggunaan animasi untuk meningkatkan situs web Anda.

Fokus pada gerakan, bukan kode

Pikirkan tentang pergerakannya sebelum Anda mulai memikirkan kodenya. Ini akan memungkinkan Anda untuk lebih memperhatikan proses animasi. Tentu saja, ada kemungkinan tidak semua desain Anda dapat dikodekan dengan sempurna, namun dengan cara ini Anda memiliki kesempatan untuk berkompromi.

Sketsa awal Bugs Bunny oleh Chuck Jones menunjukkan pemikiran tentang bagaimana memberinya bentuk, berat, dan gerakan.

Mulai memikirkan kode terlebih dahulu akan merusak kepribadian animasi karena mengkhawatirkan kemungkinan keterbatasan pengkodean.

Ini hampir seperti merencanakan ilustrasi berdasarkan pensil warna yang Anda miliki (dan tidak Anda miliki). Ini tidak benar.

Ini menghilangkan alasan untuk menambahkan animasi untuk memulai. Cobalah untuk lebih fokus pada tampilan dan pergerakan animasi yang Anda inginkan. Detail penerapannya akan dibahas kemudian.

Pada akhirnya, coding hanya akan menjadi alat untuk mencapai tujuan. Desain dan proses psikologis Anda akan membuat animasi menjadi hidup.

Fokus pada tujuan

Jika animasi Anda tidak memiliki tujuan, ada baiknya mempertimbangkan apakah animasi tersebut memerlukannya. Misalnya, indikator pemuatan animasi memiliki tujuan yang jauh lebih dalam daripada yang dipikirkan banyak desainer: seperti “semua orang melakukannya” atau “kelihatannya keren”.

Animasi pemuatan dibuat untuk memberi pengguna beberapa masukan(atau setidaknya rasa kemajuan). Animasi menu lainnya dapat berguna untuk menunjukkan kepada pengguna di mana letak menu saat ditutup. Kedua contoh tersebut adalah penggunaan praktis untuk pengguna.

Di sisi lain, logo pembuka dan pemuatan navigasi adalah contoh animasi yang lebih bersifat dekoratif daripada fungsional. Ingatlah bahwa animasi Anda dibuat untuk membantu pengguna, bukan pembuatnya. Ini bukan penawaran Anda untuk Pixar.

Mari kita lihat animasi yang dekoratif dan mencolok serta sesuatu yang lebih fungsional.

teriakan

anggun

Seperti yang Anda lihat, Anda dapat mencapai hasil yang hampir sama tanpa animasi yang mencolok dan cerah. Ini memberi tampilan bersih, dan tidak membuat pengguna berpikir, "uh... apa yang baru saja terjadi?" Selain itu, animasi yang sibuk tampaknya semakin melambat jika Anda sering menggunakannya.

Pelajari gerakannya

Sulit untuk dibuat animasi yang bagus tanpa memahami gerakannya. Kunci Animasi yang Baik Lebih Seperti Imitasi gerakan nyata daripada interpretasi artistik mereka.

Youtube memungkinkan Anda menonton video dengan kecepatan pemutaran berbeda menggunakan panel pengaturan pemutar.

Jika Anda tidak yakin dengan gerakannya, temukan video serupa di kehidupan nyata secara online dan pelajari dengan kecepatan lambat. Kecepatan rendah tayangan ulang sering kali menampilkan sentuhan-sentuhan penting. Banyak orang tidak tahu bahwa Youtube memungkinkan Anda menonton video dengan kecepatan pemutaran berbeda menggunakan panel pengaturan pemutar.

Saat orang memikirkan gerakan, biasanya mereka berpikir tentang gerakan ke atas, bawah, kiri, dan kanan, namun meskipun animasi Anda bergerak seperti itu, bukan berarti akan terlihat natural. Penting untuk selalu mempertimbangkan faktor-faktor seperti material, kecepatan, akselerasi, lompatan, dan refleksi. Penting untuk membuat animasi yang mulus untuk mendukung ilusi dan fantasi. Dengan kata lain, cobalah membuat animasi Anda hampir “tidak terlihat”.

Lebih mudah membuat "animasi tak terlihat" jika Anda memahami cara orang melihat gerakan. Oleh karena itu, menjelajahi dunia di sekitar Anda adalah ide yang bagus.

Pelajari antarmuka video game - terutama yang berasal dari 3 tahun terakhir - dan perhatikan cara pengguna menavigasinya. Jika Anda tidak berminat untuk menonton pertandingannya, tonton saja film dan acara kartun yang berbeda. Yang paling penting adalah mencipta tes nyata sebelum Anda mulai menerapkan animasi ke proyek yang kompleks.

Sumber: Martin Drapeau - Mesin Game Tulang Punggung.

Cobalah untuk menahan diri dari gerakan yang tidak menentu dan berkedip-kedip. Biarkan animasinya stabil. Biarkan pengguna menikmati dan memahami apa yang mereka lihat, terutama jika animasinya menyampaikan informasi penting. Pergerakan kurva di titik-titik itu ideal, ada juga transisi yang mulus melalui tikungan dan belokan tajam jika perlu.

Ceritakan kisah Anda dengan harmonis

Sinkronisasi adalah kata kunci dalam animasi. Tentu saja, Anda ingin mengerjakan satu elemen terlebih dahulu, lalu elemen lainnya, dan seterusnya, untuk membuat animasi sebanyak mungkin. Tapi ternyata tidak cara terbaik, yang layak untuk dilalui. Animasi apa pun yang Anda buat, tidak peduli seberapa besar atau kecilnya, harus menjadi satu blok yang kohesif.

Cara terbaik untuk melakukan ini adalah dengan membuat sesuatu yang mirip dengan animasi. Ini adalah storyboard animasi yang terdiri dari gambar atau sketsa yang telah diedit atau disusun agar menyerupai hasil akhir.

Percayalah, ini sangat berguna saat mengerjakan website atau film. Gambar di bawah adalah storyboard yang saya buat untuk video musik tersebut. Tentu saja, ini bukanlah hasil akhir, namun ini membantu saya agar tidak bingung.

Membuat sketsa animasi memungkinkan Anda melihat bagaimana segala sesuatunya akan terlihat pada akhirnya dan memungkinkan Anda mengenali ketidaksempurnaan sejak dini. Misalnya, animasi pemuatan Anda merupakan gabungan gerakan berputar dan elemen terkunci hingga navigasi situs Anda terlihat menggunakan lingkaran. Setelah Anda melihat ketidakkonsistenan ini, Anda dapat melakukan penyesuaian. perubahan yang diperlukan atau mencoba sesuatu yang sama sekali berbeda.

Melakukan latihan dan tes kecil namun penting seperti ini terlebih dahulu akan membantu Anda mengaktifkan gerakan harmonis Anda secara keseluruhan. Ada banyak situs hebat yang telah melakukan hal ini dengan luar biasa. Pendeta Danger dan Every Last Drop menggunakan animasi untuk menceritakan kisah mereka.

Meskipun kedua situs dianimasikan dengan sangat berbeda, setiap elemen di dalamnya diciptakan tidak hanya untuk menceritakan sebuah cerita, namun secara harfiah membantunya bergerak maju.

Intinya

Termasuk animasi jumlah yang sangat besar gaya dan pendekatan, namun bukan berarti tidak ada konsep kunci dan dasar. Untuk mendapatkan hasil maksimal dari animasi Anda:

• Singkirkan mentalitas "kode dulu",

• Jadikan animasi praktis dan bermanfaat,

• Tunggu sebentar untuk benar-benar memahami apa yang dikatakan gerakan-gerakan tersebut.


Namun yang terpenting, bersenang-senanglah dengan proses pembuatan animasi Anda.

Saat ini, animasi sudah tertanam kuat dalam desain web dan tampak seperti tambahan yang bagus untuk banyak elemen situs web. Namun apakah hal itu selalu menghidupkan kembali desainnya atau malah menghancurkannya? Mari kita cari tahu manfaat apa yang dapat diperoleh dari penggunaan animasi di situs web Anda dan identifikasi kasus-kasus di mana Anda harus menghindari penggunaannya.

Bagaimana animasi muncul dalam desain web?

Animasi telah ada dalam desain web sejak lama. Pertama, ada file .gif kecil, terdiri dari banyak gambar, yang jika diubah dengan cepat, memberikan efek gerakan pada gambar. Ini adalah masa-masa kelam, ditandai dengan banyaknya peta yang berkedip-kedip, kucing menari, dan hal-hal lain yang tidak ingin kita lihat lagi. Pada masa-masa awal, tidak ada yang menganggap animasi sebagai sarana untuk meningkatkan kegunaan situs web. Itu terutama digunakan sebagai hiasan atau hanya untuk bersenang-senang. Saat ini, Anda dapat menggunakan animasi untuk meningkatkan navigasi situs web dan tingkat umum fasilitas.

Belum lama ini, semua elemen dan efek animasi pada website dibuat menggunakan teknologi Flash. Tentu saja, ini adalah teknologi revolusioner pada saat itu, tetapi animasi yang dibuat dengan teknologi tersebut berat dan sangat meningkatkan waktu pemuatan halaman.

Saat ini, animasi dibuat menggunakan pengkodean JavaScript dan CSS yang lebih ringan, yang membantu menambahkan elemen bergerak ke situs tanpa membebani situs secara berlebihan. Dan yang lebih penting, animasi kini digunakan untuk meningkatkan kegunaan situs, bukan hanya untuk bersenang-senang. Mereka adalah alat luar biasa untuk desainer web, membantu menjadikan situs web lebih baik dan lebih mudah digunakan. Hal ini dapat dilihat pada contoh berikut:

Meningkatkan kegunaan dengan animasi

Dalam banyak kasus efek animasi digunakan untuk menarik perhatian pengguna detail penting. Mereka juga digunakan untuk menekankan kemampuan klik suatu elemen terhadap latar belakang hal lainnya.

Misalnya, banyak situs menggunakan efek guncangan tombol untuk memberi tahu pengunjung bahwa telah terjadi kesalahan saat memasukkan nama pengguna atau kata sandi. Animasi ini meniru sikap penyangkalan manusia saat menggelengkan kepala.

Ada banyak cara lain untuk menggunakan animasi untuk meningkatkan kegunaan antarmuka. Misalnya, dapat dimasukkan dalam elemen navigasi untuk memisahkan kategori dari subkategori, atau dalam multi-pilihan, di mana semua elemen kecuali yang dipilih menghilang dari tampilan.

Animasi dapat digunakan di situs web untuk memandu pengguna jalan yang diberikan, yang akan mengarahkan mereka pada keinginan untuk melakukan pembelian. Dengan menambahkan elemen interaktif dan menarik perhatian mereka dengan efek animasi, Anda dapat meningkatkan tingkat konversi di situs komersial dan meningkatkan ROI.

Situs naratif juga dapat memperoleh manfaat dari memperkenalkan animasi. Ini akan membantu menunjukkan kepada pengunjung apa langkah selanjutnya yang harus diambil, bagaimana memilih sesuatu, atau ke mana harus pergi selanjutnya di situs.

Menggunakan animasi dalam desain material

Animasi dalam desain web merupakan hal yang sangat berguna, asalkan tidak digunakan semata-mata untuk tujuan dekoratif. Pengembang antarmuka sekarang sering menggunakan animasi untuk menyempurnakan ruang kerja. Bahkan Google memahami pentingnya memindahkan elemen untuk kegunaan. Sebenarnya, seperti inilah tampilan “Desain Material” Google. Desain material menjadi semakin modis. Hari ini digunakan di berbagai aplikasi dan dalam desain situs web. Rahasia popularitasnya terletak pada meningkatnya perhatian terhadap bagaimana suatu elemen akan dirasakan, bagaimana gerakan dapat memberi tahu pengguna lebih banyak tentang apa elemen tersebut dan bagaimana menggunakannya.

Gunakan CSS saat membuat animasi untuk situs web Anda. jQuery ideal untuk banyak kasus dan digunakan di mana saja, namun dapat sangat memperlambat kinerja situs Anda. Kode CSS memungkinkan Anda membuat animasi ringan yang tampak hebat di perangkat apa pun tanpa membebani desain dan pemberiannya secara berlebihan tingkat tinggi kinerja situs.

Pastikan animasi Anda responsif. Desain Responsif Sebuah situs web sangat penting jika Anda ingin sukses. Namun jika tampilannya bagus dan hanya berfungsi di sistem desktop, Anda mungkin kehilangan pengguna yang lebih suka berselancar di perangkat seluler. Ada banyak alat untuk membuat animasi responsif seperti Adobe Setelah Efek atau Penglihatan. Hal ini juga dapat dilakukan di beberapa CMS (Webdlow atau MotoCMS), yang salah satunya adalah kemampuan untuk membuat efek animasi adaptif. Mereka menawarkan berbagai jenis animasi yang dapat digunakan di situs untuk meningkatkan kegunaan dan desain secara umum:

Penampilan (kiri, kanan, atas, bawah);

• Simulasi memukul layar;
• Rotasi;
• Tergelincir;
• Berkedip dan berdenyut;
• Efek geser dan jeli;
• Berayun, dll.

Animasi seharusnya menarik perhatian...tapi tidak berlebihan. Pastikan pergerakan dalam animasi tidak memakan waktu terlalu lama dan tidak terlalu lama menempati area layar. Hal ini sangat penting terutama untuk elemen yang sering berinteraksi dengan pengguna. Hal ini mungkin menghibur mereka beberapa kali, tetapi kemudian akan mulai membuat mereka jengkel.

Mulailah dengan menggunakan elemen animasi kecil di situs Anda. Pada kenyataannya, animasi harus berfungsi sebagai alat untuk mencapai tujuan, bukan menjadi tujuan itu sendiri. Tidak perlu menggunakannya di mana pun dan di mana pun pada kesempatan sekecil apa pun. Implementasinya harus dapat dipertanggungjawabkan, bermakna dan bermanfaat.

Sebaiknya sertakan animasi dalam elemen atau objek UI yang paling sering berinteraksi dengan pengguna (misalnya, menu navigasi dan formulir berlangganan). Hal ini juga patut dipertimbangkan sebelum menambahkan bidang lompat atau geser, karena hal ini dapat membuat pengalaman pengguna menjadi lebih buruk, bukannya lebih baik. Semuanya harus secukupnya dan dapat dibenarkan. Membawa kenyamanan, tidak terlihat seperti trik sirkus.

Animasi sangat bagus untuk berkreasi desain yang tak terlupakan lokasi. Mereka masih digunakan secara luas, meskipun banyak kontroversi mengenai kecepatan memuat halaman yang lebih lambat atau bahkan situs mogok karenanya. Namun hal utama yang perlu diingat ketika berencana untuk mulai menggunakan animasi adalah mereka harus meningkatkan kegunaannya. Terserah Anda untuk memutuskan di mana dan berapa banyak dari mereka yang harus ada di situs Anda. Hanya saja, jangan berlebihan, bertindaklah dengan bijak dan hati-hati.

Kata "animasi" berasal dari kata Latin kuno "animasi", yang artinya "jiwa". Upaya untuk menghidupkan benda buatan statis muncul ribuan tahun yang lalu, ketika Pygmalion mencoba membangunkan ciptaannya - patung Galatea yang menawan.

Saat ini, animasi sudah tertanam kuat dalam desain web dan tampaknya menjadi tambahan yang bagus untuk banyak elemen situs web. Apakah ini membuat desain lebih hidup atau terkadang dapat merusak segalanya? Mari kita cari tahu apa manfaat animasi bagi situs web Anda dan kapan sebaiknya menghindarinya?

BAGAIMANA ANIMASI MUNCUL DALAM DESAIN WEB?

Animasi tersebut muncul di Internet sejak lama. Awalnya mereka masih kecil .GIF-file dari berbagai gambar bergerak dan klip video. Itu adalah masa kelam dengan banyak kartu pos yang berkedip-kedip, kucing menari, dan hal-hal lain yang tidak ingin kami lihat.

Di masa yang jauh itu, tidak ada yang menganggap animasi sebagai alat peningkatan kegunaan situs web. Itu terutama digunakan untuk dekorasi atau hanya untuk bersenang-senang. Saat ini, Anda dapat menggunakan efek animasi untuk meningkatkan navigasi dan kegunaan situs web.

Baru-baru ini, semua elemen dan efek animasi pada situs web dibuat menggunakan teknologi Flash. Pada saat itu, ini adalah teknologi revolusioner, meskipun sangat berat dan meningkatkan waktu pemuatan situs secara signifikan. Saat ini, animasi dibuat menggunakan lebih banyak cara mudah Pengkodean JavaScript dan CSS yang membantu Anda menambahkan elemen bergerak ke situs Anda tanpa membebani secara berlebihan. Dan yang lebih penting, animasi kini digunakan untuk meningkatkan UX, bukan hanya untuk bersenang-senang. Ini adalah alat luar biasa bagi desainer web untuk membantu menjadikan situs web lebih baik dan lebih mudah digunakan.

MENINGKATKAN KEGUNAAN DENGAN ANIMASI

Dalam banyak kasus, efek animasi digunakan untuk menarik perhatian pengguna untuk detail penting, serta untuk membantunya menerima keputusan yang tepat sehubungan dengan kemampuan klik elemen, antara lain.

Oleh karena itu, banyak situs web yang menggunakan efek guncangan pada formulir login atau registrasi untuk menunjukkan kepada penggunanya bahwa ada kesalahan. Misalnya, memasukkan informasi yang salah atau kata sandi yang salah. Kecenderungan ini meniru seseorang yang menggelengkan kepala sambil berkata “tidak”.

Ada banyak cara lain menggunakan animasi untuk meningkatkan UX. Ini dapat digunakan dalam navigasi untuk memisahkan kategori dari subkategori, atau dalam multi-pilihan di mana semua item lainnya menghilang kecuali yang dipilih.

E TEHEVENT – SITUS WEB DENGAN ELEMEN ANIMASI

Animasi dapat digunakan untuk memandu pengguna di seluruh situs dan bahkan membuat mereka membeli sesuatu. Menambahkan elemen interaktif dan menarik perhatian pengguna menggunakan efek animasi dapat membantu situs web bisnis meningkatkan konversi danROI.

SITUS INTERAKTIF A PPS

Situs webbercerita juga bisa mendapatkan keuntungan dari animasi. Ini dapat membantu menunjukkan kepada pengguna apa langkah selanjutnya atau bagaimana memilih langkah berikutnya.

MENGGUNAKAN ANIMASI DALAM DESAIN MATERIAL

Animasi dalam desain web adalah langkah bagus yang bisa sangat berguna jika tidak digunakan hanya untuk tujuan dekoratif. Desainer UI dan UX kini sering menggunakan animasi untuk meningkatkan alur kerja mereka. Bahkan Google memahami pentingnya gerakan ini untuk kegunaan. Dan begitulah yang terjadi desain bahan.

Desain material menjadi semakin modis dan digunakan dalam berbagai aplikasi dan desain web saat ini. Rahasia popularitasnya terletak pada perhatian tinggi bagaimana suatu objek atau elemen dipersepsikan. Bagaimana gerakan dapat memberi tahu pengguna lebih banyak tentang elemen tersebut dan cara menggunakannya.

Di miliknya Panduan Desain Bahan Google mengatakan gerakan dapat memberi tahu pengguna hal itu benda ringan, berat, fleksibel, dan bahkan besar atau kecil. Animasi harus digunakan untuk memberi pengguna lebih pengertian apa sifat dari objek tersebut, dan oleh karena itu, bagaimana objek tersebut dapat dan harus digunakan dalam desain.

Google melangkah lebih jauh dengan animasinya dan merekomendasikan penggunaan elemen bergerak yang mengubah kecepatan dan durasinya tergantung pada tujuan atau efek yang ingin Anda capai. Dengan demikian, perusahaan Google menerapkan elemen masuk dan keluar yang muncul di layar saat diperlukan untuk menarik perhatian, atau menghilang dari layar saat tidak diperlukan lagi.

TIPS UNTUK ANIMASI YANG DIGUNAKAN PADA WEBSITE

Saat menerapkan animasi di situs web Anda, Anda juga harus mempelajari semua kendalanya dengan cermat. Elemen animasi masih dapat mengganggu kinerja situs dan UX.

Pertama, Anda harus memeriksa dengan baik apakah animasinya tidak memperlambat situs Anda, kecepatan unduh dan kinerja keseluruhan. Hal ini dapat diungkapkan hanya dengan membandingkan situs Anda dengan animasi dan kinerja game PC kelas berat. Jika game berjalan lebih lancar di desktop Anda daripada di situs web, ini harus menjadi alasan untuk mempertimbangkan kembali animasi yang digunakan.

Gunakan CSS saat membuat animasi untuk situs web Anda. JQuery sangat ideal dan digunakan di banyak proyek, tetapi ini benar-benar dapat memperlambat kinerja situs web Anda. Kode CSS memungkinkan Anda membuat animasi sederhana yang terlihat bagus di perangkat apa pun tanpa membebani desain Anda dan membuatnya tampak hebat.

Pastikan animasi Anda responsif. Situs web yang responsif adalah suatu keharusan jika Anda ingin sukses. Dan jika itu hanya berfungsi dan tampak bagus di layar desktop, Anda mungkin kalah dalam pertarungan untuk pengguna. Ada banyak alat yang memungkinkan Anda membuat animasi responsif (seperti Adobe After Effects atau Invision) dan pembuat situs web (Webflow dan MotoCMS) yang menggabungkan efek animasi responsif ke dalam alur kerja Anda. Mereka menawarkan berbagai jenis animasi yang dapat digunakan di dalam situs untuk meningkatkan kegunaan dan desainnya.

Animasi harus menarik perhatian, tapi tidak terlalu banyak. Pastikan gerakannya tidak memakan banyak waktu atau bertahan terlalu lama di layar. Hal ini sangat penting terutama jika kita berbicara tentang elemen yang sering berinteraksi dengan pengguna. Ini mungkin menyenangkan sekali atau dua kali, tetapi jika sering digunakan, animasinya menjadi mengganggu.

Mulailah dengan menggunakan elemen bergerak kecil di situs Anda. Faktanya, animasi hanyalah sarana untuk mencapai tujuan, bukan tujuan itu sendiri. Anda tidak perlu menyalakannya di mana pun Anda mau. Ingat - penggunaan harus dibenarkan.

Terbaik sertakan animasi dalam elemen UI atau objek yang paling sering berinteraksi dengan pengguna. Seperti menu navigasi atau formulir berlangganan. Dan pikirkan baik-baik sebelum menambahkan kotak memantul atau gambar geser: bagaimana pengaruhnya terhadap pengalaman pengguna, apakah ini akan meningkatkan interaksi dengan situs?

Animasi sangat bagus untuk menciptakan desain yang berkesan. Ini masih banyak digunakan dalam desain web, meskipun terdapat berbagai masalah kecil dengan kecepatan pemuatan atau pembekuan. Namun hal utama yang harus Anda ingat saat memperkenalkan elemen animasi adalah dampaknya terhadap kegunaan. Namun di mana dan dalam jumlah berapa untuk mengintegrasikan animasi ke situs web Anda, terserah Anda.

Dan terakhir, beberapa contoh di mana animasi digunakan untuk mencapai target secara akurat.