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

Menambahkan Daya Tarik pada Animasi Anda di Web

Read Time: 11 mins

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

Ketika kita berbicara tentang penggunaan animasi kita sering membahas cara praktis kita bisa membuat transisi, animasi, dan sebagainya. Animasi adalah cara yang ampuh untuk membuat desain kita menonjol, tapi daripada berfokus pada bagaimana satu animasi bekerja, cara beberapa animasi yang digabungkan dapat menciptakan sesuatu yang lebih hebat lagi.

Appeal

12 prinsip dasar animasi Disney mendefinisikan "Appeal" sesuai dengan "karisma pada seorang aktor". Hal tersebutlah yang menunjukkan bagaimana realisme, gaya, dan substansi penambahan animasi untuk menciptakan karakter khas yang penonton anggap nyata dan menarik.

The Illusion of Life Disney AnimationThe Illusion of Life Disney AnimationThe Illusion of Life Disney Animation
The Illusion of Life: Disney Animation di mana 12 prinsip dasar animasi ditata

Ini adalah teknik dulu berpengaruh besar oleh Stripe. Stripe adalah prosesor pembayaran, dan menyediakan alat untuk menyematkan formulir pembayaran di situs. Form ini terkenal karena di desain dengan indah, terutama penggunaan animasi mereka.

Pada artikel ini saya akan membahas bagaimana beberapa animasi dapat digunakan untuk menciptakan efek lebih dari keseluruhan bagiannya, dan menunjukkan bagaimana Anda dapat menggunakan pengetahuan ini secara praktis.

Social Media Card

Dalam contoh ini kita akan menggunakan animasi untuk menyajikan kartu dengan rincian dan hiperteks ke web dan akun sosial lainnya.

Saat tombol ditekan, hal tersebut akan mengakibatkan kartu muncul dengan beberapa opsi berikut. Daripada menggunakan jendela modal biasa, kita akan menggunakan animasi untuk membuatnya lebih menarik.

Untuk membuatnya menarik, ada beberapa animasi yang dapat digunakan. Berbagai potongan animasi dan mengenalkan setiap elemen secara berurutan. Ini membantu penonton memahami hubungan antara apa yang telah mereka tekan dan konten dan urutan animasi membantu mengarahkan mata mengikuti ikon tersebut.

Menyiapkan HTML

Untuk memulai kita membutuhkan sebuah tombol untuk menekan dan sebuah kartu untuk ditunjukkan. Kartu akan disembunyikan saat konten pertama kali ditampilkan.

Tombolnya adalah gambar dan beberapa teks. Saat ditekan, kartu itu akan muncul. Kartu terdiri dari empat bagian; tombol tutup, bagian rincian, headshot dan ikon bar yang berisi ikon sosial. Untuk contoh ini, kami menggunakan ikon SVG inline yang diambil dari Entypo collection.

Styling

Sebelum masuk ke animasi mari kita tambahkan beberapa gaya pada tombol dan kartu. Pertama, tombolnya:

Catatan: kami telah menambahkan outline: none; ke elemen show-card  karena beberapa browser menambahkan cahaya khas ke keadaan tombol fokus (yang tidak kita inginkan):

Lalu kita akan menata kartu dan masing-masing bagian di dalamnya.

Perhatikan bahwa kita mengatur kartu ini untuk  display: none  Kita kemudian akan mengendalikannya menggunakan JavaScript.

Show and Hide Dasar

Daripada mempelajari lebih lanjut CSS, pertama-tama kita akan menyiapkan tindakan dasar untuk menunjukkan dan menyembunyikan informasi kontak. Ini akan menggunakan JavaScript kecil (dan dalam hal ini jQuery) untuk menambahkan dan menghapus kelas bergantung pada apa yang diklik:

Kita sekarang harus dapat menunjukkan dan menyembunyikan kartu menggunakan jQuery dan properti CSS  display .

Lihat dasar show and hide contohnya di sini:

Sebelum animasi

Dengan tata letak yang tersedia kita perlu menambahkan beberapa gaya tambahan untuk menyembunyikan berbagai elemen sehingga kita bisa menghidupkannya ke tampilan.

   Unsur-unsur ini akan memiliki penundaan sebelum animasi mereka mulai berlaku, jadi perlu di luar pandangan pada awalnya.

Animasi Dasar

Dengan mekanisme yang tersedia untuk menunjukkan dan menyembunyikan kartu, kita bisa mulai melampirkan animasi. JavaScript di atas menambahkan status  show  ke kartu yang ada di acara, dan kami dapat melampirkan animasi ke kelas ini yang akan mengenalkan masing-masing bagian kartu.

Untuk melakukan ini kita akan menggunakan properti  animation  CSS dan set  keyframes.

Akan sangat membantu untuk membuat animasi general-purpose di CSS dan menggunakannya kembali. Animasi sederhana seperti memudar masuk dan keluar dapat didefinisikan sekali dan digunakan di banyak tempat.

Untuk menunjukkan bagaimana  keyframes  didefinisikan, mari kita membuat animasi pudar dan memudar.

Keyframes adalah serangkaian langkah, yang didefinisikan sebagai persentase. Mereka bisa berupa sejumlah langkah tapi dalam contoh kita, kita hanya menentukan awal (0%) dan akhir (100%) keyframes. Dalam  fade-in  kita mulai tanpa opacity (0) dan diakhiri dengan opacity penuh (1). Animasi  fade-out  melakukan yang sebaliknya.

Kita bisa menggunakan properti  animation  untuk menerapkan animasi pudar ini ke tombol saat ditampilkan dan disembunyikan.

Animasi Tulisan Cepat di sini memberi tahu kartu untuk menggunakan animasi  fade-in , yang bertahan 0,4 detik dengan penundaan 1 detik. Animasi akan diputar sekali dan berhenti di ujung (ke depan) dan gunakan fungsi waktu  ease-out .

Saat kelas  hide  diterapkan pada tombolnya, animasi  fade-out  mulai berlaku.

Fungsi Waktu Bouncy Effect

Bagian pertama yang akan kami perkenalkan adalah ikon bar. Karena di sinilah letak hubungan, kami ingin hal itu menonjol dan menjadi hal pertama yang diperhatikan orang.

Saat membuat animasi kita bisa membuat efek menarik dengan menggunakan fungsi waktu dengan baik. Dalam hal ini kita akan menggunakan fungsi waktu  cubic-bezier  untuk menambahkan beberapa " bounce " saat ikon bar muncul.

Pertama kita akan membuat beberapa keyframe sederhana untuk memiliki bar awalan kecil dan bertambah ukurannya.

Sekarang kita dapat menerapkan set keyframe ini ke ikon bar saat kelas  show  ditambahkan ke kartu.

Bouncy effect dibuat dengan menggunakan fungsi waktu  cubic-bezier . Fungsi waktu menggambarkan perubahan kecepatan melalui animasi, dan dapat dirancang untuk over-shoot pada awalan atau akhir animasi. Animasi ini berjalan sedikit di atas, lalu dikoreksi, dengan diciptakannya bounce.

Penundaan animasi

Dengan ikon bar diperkenalkan, kita perlu menghidupkan bagian yang berisi rincian dan headshot. Kita ingin bagian ini muncul setelah ikon bar diperkenalkan. Untuk mencapai hal ini kita akan menggunakan properti  animation-delay .

Animasi yang diaplikasikan ke bagian  details  diatur untuk memiliki durasi 0,7 detik, dan penundaan 0,5 detik. Ini berarti animasi tidak akan dimulai sampai setelah ikon bar diperkenalkan.

Kami juga menggunakan fungsi waktu cubic bezier disini untuk memberikan beberapa bounce.

Selanjutnya kita mendefinisikan keyframes untuk wadah animasi ini.

Keyframe animasi  show-detail-container  dimulai dengan wadah tak terlihat dengan tinggi nol, dan meng animasi hingga keseluruhan. Fungsi waktu cubic bezier kemudian membuat animasi overshoot sedikit untuk memberikan beberapa bounce.

Menggabungkan Beberapa Animasi

Beberapa animasi dapat diterapkan dalam satu properti. Selama animasi tidak saling bertentangan (dengan mencoba menghidupkan properti yang sama), mereka bisa digunakan untuk menambahkan nuansa ke animasi. Beberapa animasi didefinisikan seperti animasi tunggal, namun dipisahkan dengan koma.

Dalam kasus ini kita akan memberikan efek memudar pada headshot, nama dan konten deskripsi dimana pada saat yang sama menggunakan fungsi  pop-in  agar gambar tampak lebih dekat dari jarak yang jauh.

Jika kita menggunakan satu animasi tunggal, dengan fungsi waktu cubic bezier, efek pudar akan tampak bounce dan terlihat aneh. Sebagai gantinya, kita akan memiliki fade menggunakan fungsi waktu linier dan zoom akan menghasilkan efek bounce.

Pertama kita mendefinisikan keyframe  pop-in .

Ini menggunakan transformasi  scale  agar masing-masing elemen mulai lebih kecil dan bertambah besar menjadi normal.

Mari kita bawa kontennya. Setiap elemen memiliki dua animasi, dan masing-masing elemen memiliki animasi yang sedikit delay lebih lama untuk mengatur secara bergiliran penampilan mereka.

Ikon Penutup

Animasi ikon penutup menggunakan keyframe  fade-in  yang telah kita definisikan sebelumnya.

Calls to Action

Kita hanya perlu menunjukkan ikonnya sekarang. Saat menyajikan animasi, animasi yang terakhir adalah tempat perhatian penonton akan berakhir. Ini berarti bahwa penonton akan mengikuti animasi dan pada akhirnya melihat ikon yang kita ingin mereka pilih.

Kami akan kembali memanfaatkan properti animasi delay untuk memastikannya diperkenalkan terakhir. Pertama, kita mendefinisikan keyframes animasi untuk ikon:

Setiap ikon akan berputar sedikit saat memudar. Kita sekarang bisa melampirkan animasi ini ke masing-masing ikon, dengan menggunakan penundaan pada masing-masing untuk menghadirkan mereka secara bergiliran.

Pergunakan semua ini bersama-sama dan sekarang kita memiliki kartu yang tampil dengan baik saat tombol dipilih.

Satu Hal Lagi

Sebelum kita bisa menyelesaikannya, kita perlu menambahkan tindakan  hide  ke tombol penutup dan membuat animasi kartu pergi. Pertama kita akan mengupdate JavaScript. Saat menekan ikon  close , JavaScript menunggu satu detik sebelum mengeluarkan kartu dengan  display: none.

Ini memberi kita waktu satu detik untuk membuat animasi dari kartu-kita akan melihatnya jatuh dari bagian bawah layar. Keyframes yang mencapainya adalah sebagai berikut:

Kita kemudian menerapkannya sebagai animasi ke kartu.

Demo

Setelah mempergunakan semuanya, Anda bisa melihat hasilnya di sini.

Catatan tentang Prefixes dan Kompatibilitas Browser

Animasi didukung dengan baik  di seluruh browser. Bergantung pada penonton Anda, semua hal tersebut harus bekerja dalam banyak situasi. Perlu memastikan dasar fungsi show and hide bekerja dan animasi apapun ditambahkan sebagai progressive enhancement.

Ringkasan

Dengan penggunaan beberapa animasi, dan khususnya properti  animation-delay , kami telah menggunakan widget yang sangat sederhana dan membuatnya lebih menarik. Animasi memandu penonton melalui masing-masing elemen dan mengarahkannya ke calls to action.

Animasi bisa menjadi cara yang hebat untuk berkomunikasi dalam desain Anda. Komunikasi ini membantu pengunjung memahami maksud Anda sekaligus meningkatkan kredibilitas dan kepercayaan diri terhadap kualitas pekerjaan Anda.

Advertisement
Did you find this post useful?
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.