Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation

Memulai Animasi Web

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Motion telah menjadi bagian yang sangat penting dari bidang desain web dalam beberapa tahun terakhir. Motion dan animasi menambahkan layer dimensi ke antarmuka, membantu pengguna, menawarkan umpan balik, menyenangkan, dan terlibat di sepanjang jalan.

Pada artikel ini, saya akan menjalankan langkah-langkah yang terlibat dalam belajar animasi untuk web, dari apa itu semua, meskipun transisi langsung, animasi yang lebih kompleks, dan sumber daya yang berguna Akan ada beberapa latihan praktis dan interaktif untuk mengumpulkan points di rumah. Pada akhirnya, Anda akan memiliki gagasan yang solid tentang lanskap animasi web saat ini dan bagaimana Anda bisa mencengkeraminya.

Kita akan melihat yang berikut ini:

  • Apa, dan Kenapa?
  • Transisi CSS
  • Animasi Keyframe CSS
  • Gerak Otentik
  • Fungsi Cubic Bezier (Timing)
  • CSS Perpustakaan dan Alat
  • SVG
  • JavaScript
  • Prototyping

Apa, dan Mengapa

Disiplin desain web selalu berubah, dan satu aspek yang muncul dalam beberapa tahun terakhir adalah kemampuan untuk membuat animasi. Situs Web telah menjadi lebih mampu, processors lebih cepat, dan perangkat genggam telah membuka jalan untuk "gestures"; swiping, pinching, dan force touching.

Motion menawarkan beberapa hal yang meningkatkan pengalaman pengguna, termasuk:

  • Hubungan sebab dan akibat: menyoroti tindakan dan reaksi, satu hal menyebabkan hal lain.
  • Umpan balik: memberitahu pengguna bahwa mereka telah berhasil (atau tidak berhasil) menyelesaikan tindakan, seperti mengklik sesuatu, atau memasukkan data formulir.
  • Kemajuan: mengilustrasikan bahwa satu hal mengikuti yang lain, setiap aksi dalam pemuatan bars dan spinners menjadi contoh sempurna.
  • Menyenangkan: desain yang baik sering dikatakan tidak mungkin, namun gerakan yang diimplementasikan dengan baik dapat benar-benar menyenangkan dan melibatkan pengguna Anda.

Motion meningkatkan pengalaman pengguna dan membawa kehidupan ke web. Dengan semua ini dalam pikiran, penting bahwa, sebagai perancang antarmuka, Anda mempertimbangkan animasi. Mari kita pergi dengan dasar-dasar!

Sumber Belajar

Transisi CSS

Transisi CSS seringkali sebuah gateway perancang web menuju dunia motion. Mereka menginstruksikan situs web untuk mengambil keadaan awal dari sebuah elemen, kemudian keadaan akhir, dan transisi dengan mulus di antara keduanya Sintaksnya relatif langsung, terdiri dari empat properti dan versi singkatan:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Mari kita mulai dengan sebuah tombol. Dalam contoh ini kita memiliki sebuah tombol dengan beberapa gaya dasar untuk membuatnya terlihat seolah-olah terangkat dari halaman sedikit. ecara default, jika Anda mengarahkan kursor ke atasnya, warnanya akan berubah. Kemudian jika Anda klik di atasnya, tampaknya akan ditekan ke bawah. Kita telah melakukan ini dengan menggunakan properti backgroundposition-top, dan position-left, namun perubahan dalam setiap kasus terjadi seketika:

Sekarang mari kita membuat efeknya lebih halus, dengan menambahkan transition ke elemen .button . Menambahkan, misalnya, transition: all 1s; akan memastikan bahwa semua perubahan properti akan bertransisi dengan lancar selama 1 detik.

Uncomment aturan pertama di panel CSS dan Anda akan melihatnya mulai berlaku:

Sekarang Anda telah melihat pekerjaan itu, coba uncommenting pada peraturan kedua. Pada contoh kedua, kita telah mencantumkan masing-masing properti yang berubah secara terpisah, jadi kita dapat menentukan kecepatan transisi yang berbeda untuk masing-masing properti.

Terakhir, coba uncommenting contoh ketiga, di mana Anda akan melihat kita telah menambahkan timing functions juga. Ini mempengaruhi tingkat transisi-kita akan segera membicarakannya secara singkat.

Sumber Belajar

Animasi Keyframe CSS

Dengan transisi CSS di bawah ikat pinggang Anda, sekarang saatnya menggali lebih dalam diri Anda untuk menerapkan lebih banyak usaha untuk mencapai suatu tujuan. Animasi keyframe CSS memberi kontrol yang jauh lebih besar, memungkinkan Anda menentukan perubahan sepanjang garis waktu. Dua langkah diperlukan untuk animasi keyframe; mendefinisikan keyframes itu sendiri, dan menugaskan animasi ke elemen pilihan Anda.

Katakanlah kita mulai dengan sebuah bola.

Sekarang kita bisa mendefinisikan beberapa keyframes, pengaturan keadaan from , dan keadaan to . Di sini kita mengatakan bahwa  left position akan dimulai pada 5%, animasi 85%, secara efektif memindahkan bola ke seluruh layar.

Anda dapat melihat kita telah meletakkan from dan to dalam deklarasi @keyframes . Dan kita memberikan nama animasi kita move.  Dan kita memberikan nama animasi kita move. Sekarang kita perlu menugaskan animasi ini ke bola kita, yang kita sukai:

Hal ini diimplementasikan dalam bentuk yang paling sederhana, formulir shorthand. Kita perlu menentukan berapa lama kita ingin animasi bertahan, dan animasi mana yang kita terapkan. Sekarang kita perlu menugaskan animasi ini ke bola kita, yang kita sukai:

Catatan: animasi menendang di atas pemuatan halaman, jadi Anda harus menekan tombol rerun di sudut pena yang disematkan ini untuk melihat sesuatu terjadi.

Kontrol Lebih

Menuju tahap from and to yang lebih sederhana, kita dapat menentukan poin sepanjang garis waktu dengan menggunakan persentase. Menggunakan 0% dan 100% akan memberi kita hasil yang persis sama seperti sebelumnya:

Mari kita tambahkan langkah ekstra di tengah, dan bawa bola kembali ke posisi awal. Kita juga akan membuat animasi iteration-count infinite, jadi terus terjadi perulangan. Pengaturan nilai di pena di bawah dan lihat hasilnya berlaku:

Akan sangat mungkin menambahkan beberapa animasi ke satu elemen, mengubah arah animasi, dan mengubah keseluruhan timing. Lihatlah sumber daya ini untuk mengetahui lebih lanjut!

Sumber Belajar

Gerak Otentik

Motion membawa benda statis ke kehidupan, dan perbedaan gerak otentik yang bisa dilakukan untuk ini sangat besar. Motion memberi massa benda, menempatkannya di ruang angkasa, dan dunia fisika nyata tiba-tiba berlaku untuk itu. Jika sebuah benda bergerak dengan cara yang biasa kita kenal, kemungkinan besar kita akan membuat hubungan emosional yang sangat penting itu. Ini adalah perbedaan antara lingkaran yang bergerak naik turun, dan bola memantul:

Perbedaan antara keduanya jelas (meski pantulannya tidak sempurna). Belajar bagaimana memberi keaslian animasi Anda sangat penting.

"Sebagian besar aksi alami cenderung mengikuti lintasan melengkung, dan animasi harus mematuhi prinsip ini dengan mengikuti 'arcs' tersirat untuk realisme yang lebih besar." -  Dua Belas Prinsip Dasar Animasi

Sumber Belajar

Fungsi Cubic Bezier (Timing)

Kami telah membahas "easing" beberapa kali dalam artikel ini; Ini adalah tingkat di mana sesuatu bergerak, dan dapat dinyatakan sebagai kurva di sepanjang dua sumbu. Di dalam CSS ada beberapa fungsi built-in timing yang dapat Anda gunakan dengan kata kunci mereka (linearease-inease-in-out dll) namun Anda dapat menggambarkan timing ini lebih tepat dengan fungsi cubic bezier, yang terlihat seperti ini:

12511
.1,.25,.1,1

Seiring berjalannya waktu sepanjang sumbu x, kecepatan gerakan semakin cepat dan melambat sepanjang sumbu y. Contoh di atas digunakan pada bola pantulan kita sebelumnya; Anda bisa membayangkan bola bergerak cepat ke atas, lalu melambat saat mencapai puncaknya. Lihatlah kurva ini di cubic-bezier.com untuk membantu Anda memvisualisasikannya.

Kurva dikendalikan oleh dua pegangan (yang akan Anda ketahui jika Anda pernah menggunakan the pen tool di Adobe Illustrator atau Sketch) dan fungsi cubic bezier yang dapat kita gunakan di CSS mencerminkan pegangan tersebut. Mereka mewakili:

There are four values, each one ranging (for the sake of argument) from 0 to 1 They represent:

  • koordinat x untuk mengatasi 1 (.1)
  • koordinat y untuk mengatasi 1 (.25)
  • kootdinat x untuk mengatasi 2 (.1)
  • koordinat y untuk mengatasi 2 (1)

Memahami bagaimana fungsi bezier bekerja secara dramatis akan meningkatkan animasi Anda, terutama jika Anda bertujuan untuk melakukan motion autentik.

Sumber Belajar

Libraries dan Tools CSS

Coding animasi CSS yang menarik dengan tangan bisa jadi sulit, namun ada sejumlah libraries yang tersedia yang melakukan sesuatu berat untuk Anda. Animate.css, oleh Dan Eden, adalah stylesheet yang penuh dengan animasi berbasis keyframe, semuanya dengan nama kelas khusus, siap digunakan.

Sumber Belajar

Lebih banyak lagi Libraries CSS

SVG

SVG (Scalable Vector Graphics) telah menjadi teman terbaik web designer terbaik dalam beberapa tahun terakhir, memberi kita grafis yang tajam, halaman yang lebih ringan, dan elemen animasi Beberapa dari apa yang telah kita bahas dapat diterapkan secara langsung pada elemen SVG, namun banyak properti berperilaku berbeda.

nilah SVG inline dengan transisi yang diterapkan pada warnanya pada hover. Namun, Anda akan melihat bahwa kita menggunakan properti fill , bukan background-color yang akan kita harapkan dengan elemen HTML:

SVG dapat animasi dengan CSS seperti yang telah kita bahas di bagian artikel ini. Jika Anda bisa mengubah atau menerjemahkannya dengan HTML, Anda bisa melakukan hal yang sama dengan SVG.

Tapi SVG juga bisa dimanipulasi melalui SMIL (Synchronized Multimedia Integration Language) yang memungkinkan Anda menggunakan hal-hal seperti elemen <animate> , langsung di dalam SVG. Lihat lingkaran SVG ini, transisi melintasi layar:

Ini adalah sebuah lingkaran, yang berisi <animate> yang menentukan atribut untuk menghidupkan (koordinat cx dalam kasus ini), dari posisi 50px sampai 400px, durasi 2 detik, dan pengulangan tanpa batas waktu.

SMIL adalah perangkat yang sangat kuat, mulai membaca di bawah ini!

Sumber Belajar

Suka ide menganimasi SVG tapi tidak yakin apa yang harus dianimasi? Simak  layanan ilustrasi vektor  di Envato Studio dan lihat apa yang ditawarkan!

Characters Elements and Object ready for Video Animation
Karakter, Elemen dan Objek siap untuk Video Animasi

JavaScript

Banyak pengembang front-end pertama kali bermain dengan JavaScript (atau jQuery) dengan menambahkan animasi ke halaman web. Dimana dukungan browser untuk alternatif CSS samar, JS adalah taruhan yang bagus.

Library UI jQuery hadir dengan sejumlah pembantu UI off-the-shelf, termasuk metode effect(), yang ditunjukkan di bawah ini (pilih efek dari dropdown dan perhatikan seperti yang diterapkan pada konten:

Di luar ini, JavaScript (di tangan yang tepat, bukan saya) dapat menawarkan animasi yang serius, dan karena Adobe Flash secara resmi menyerahkan pengunduran dirinya beberapa pustaka JavaScript yang brilian telah muncul. GreenSock’s Animation Platform (GSAP) bisa dibilang merupakan pengembang yang paling hebat yang memberi banyak pengguna alat berbasis waktu dan tween.

Lihatlah kursus pemula kita dan lihat bagaimana Anda memesan dengan GSAP!

Sumber Belajar

Prototyping

Lewatlah sudah hari-hari hasil desain statis cukup-gambar dan diagram alir tidak cukup mengkomunikasikan informasi. Saat ini klien yang cerdik ingin melihat dan merasakan apa yang Anda rancang, alami gerakannya, itulah sebabnya mengapa prototypes menjawab lebih banyak pertanyaan.

Prototypes bisa sangat mentah, atau mencerminkan produk akhir dengan cukup akurat, namun di manapun mereka jatuh pada skala ini, membuatnya perlu efisien. Dimana gerak dan animasi yang bersangkutan ada sejumlah aplikasi untuk membantu Anda mengkomunikasikan desain Anda.

Adobe Animate adalah Flash untuk generasi berikutnya, menawarkan alat animasi canggih. Adobe After Effects adalah alat produksi video, namun juga menawarkan gerakan berbasis timeline yang canggih. Tapi kemudian ada aplikasi yang lebih sederhana, seperti Prinsip Mac, dan bahkan Keynote:

Keynote Motion Graphic Experiment, oleh Linda Dong

Setelah desain motion telah menjadi bagian dari apa yang Anda lakukan, menemukan alat terbaik untuk menunjukkan kepada dunia adalah langkah penting!

Sumber Belajar

Kesimpulan

Dan disana kita memilikinya! Panduan ini seharusnya memberi Anda pemahaman yang solid tentang lanskap animasi web seperti yang ada saat ini. Dengan semua sumber belajar di bawah genggaman Anda, Anda akan dipersenjatai dengan seperangkat keterampilan baru untuk mengeksplorasi dunia desain motion

 Saya harap Anda mendapatkan semua ini berguna. Silakan berbagi informasi dan sumber daya Anda sendiri di komentar di bawah ini, atau di Forum Komunitas Envato.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.