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

Menambah Rayuan ke Animasi Anda di Web

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Final product image
What You'll Be Creating

Apabila kita bercakap mengenai penggunaan animasi kita sering membincangkan cara praktikal kita boleh mencipta peralihan, animasi, dan sebagainya. Animasi adalah cara yang ampuh untuk membuat reka bentuk kami menonjol, tetapi bukannya memberi tumpuan kepada bagaimana animasi individu berfungsi, cara menggabungkan pelbagai animasi dapat mencipta sesuatu yang lebih kuat.

Rayuan

12 prinsip asas animasi Disney mentakrifkan "Rayuan" sepadan dengan "karisma dalam pelakon". Itulah bagaimana realisme, gaya, dan substansi animasi menambah untuk mewujudkan rasa watak yang penonton mendapati sebenar dan menarik.

The Illusion of Life Disney Animation
The Illusion of Life: Animasi Disney di mana 12 prinsip dasar animasi dibentangkan

Ia teknik yang digunakan untuk kesan hebat oleh Stripe. Stripe adalah pemproses pembayaran, dan menyediakan alat untuk membenamkan borang pembayaran di laman web. Bentuk-bentuk ini terkenal dengan reka bentuk yang indah, terutamanya penggunaan animasi mereka.

Dalam artikel ini saya akan membincangkan bagaimana pelbagai animasi boleh digunakan untuk membuat kesan lebih daripada jumlah bahagiannya, dan menunjukkan bagaimana anda boleh menggunakan pengetahuan ini secara praktikal.

Kad Media Sosial

Dalam contoh ini, kami akan menggunakan animasi untuk membentangkan kad dengan perincian dan pautan ke web dan akaun sosial lain.

Apabila butang ditekan, ia akan meminta kad untuk muncul dengan beberapa ikutan pilihan . Daripada menggunakan tetingkap modal lama biasa, kami akan menggunakan animasi untuk menjadikannya lebih menarik.

Untuk menjadikannya menarik, terdapat beberapa animasi yang berlaku. Pelbagai potongan menghidupkan dan memperkenalkan setiap elemen dalam rangka. Ini membantu penonton memahami sambungan antara apa yang mereka telah ditekan dan kandungan dan susunan animasi membantu menarik mata kepada ikon ikut.

Menyediakan HTML

Untuk memulakan, kami memerlukan butang untuk menekan dan kad untuk dipaparkan. Kad akan disembunyikan apabila kandungan dipaparkan pertama.

Butang adalah imej dan beberapa teks. Apabila ditekan, ia akan menunjukkan kad itu. Kad terdiri daripada empat bahagian; butang rapat, seksyen butiran, headshot dan bar ikon yang mengandungi ikon sosial. Untuk contoh ini, kami menggunakan ikon SVG sebaris yang diambil dari koleksi Entypo.

Styling

Sebelum masuk ke dalam animasi mari tambahkan beberapa gaya ke butang dan kad. Pertama, butang:

Nota: kami telah menambah garis besar: tiada; ke .kad rawak elemen kerana sesetengah pelayar menambah cahaya yang luar biasa kepada butang 'tumpuan' (yang tidak kita kehendaki):

Kemudian kita akan gaya kad dan setiap bahagian di dalamnya.

Perhatikan bahawa kami menetapkan kad ini untuk dipaparkan: tiada pada mulanya. Kami akan mengawal ini menggunakan JavaScript.

The Basic Show and Hide

Daripada menyelam ke CSS, kami akan mula menetapkan tindakan asas untuk menunjukkan dan menyembunyikan maklumat hubungan. Ini akan menggunakan JavaScript sedikit (dan dalam kes ini jQuery) untuk menambah dan membuang kelas bergantung pada apa yang diklik:

Sekarang kita harus dapat menunjukkan dan menyembunyikan kad menggunakan jQuery dan sifat CSS paparan.

Lihat pertunjukan asas dan sembunyikan contoh di sini:

Sebelum Animasi

Dengan susun atur yang ada, kita perlu menambah beberapa gaya tambahan untuk menyembunyikan pelbagai elemen supaya kita dapat menghidupkannya ke dalam pandangan.

Elemen-elemen ini akan mempunyai kelewatan sebelum animasi mereka berkuatkuasa, jadi perlu di luar pandangan pada mulanya.

Animasi asas

Dengan mekanisme untuk menunjukkan dan menyembunyikan kad, kita boleh mula melampirkan animasi. JavaScript di atas menambah keadaan pertunjukan ke kad yang di show, dan kami boleh melampirkan animasi ke kelas ini yang akan memperkenalkan bahagian-bahagian individu kad tersebut.

Untuk melakukan ini, kami akan menggunakan sifat animasi CSS dan set kerangka utama.

Ini berguna untuk membuat animasi kegunaan umum dalam CSS dan menggunakannya semula. Animasi mudah seperti pudar masuk dan keluar boleh didefinisikan sekali dan digunakan di beberapa tempat.

Untuk menunjukkan bagaimana kerangka utama ditakrifkan, mari kita buat pudar dan pudar animasi.

Keyframes adalah satu siri langkah, yang ditentukan sebagai peratusan. Mereka boleh menjadi beberapa langkah tetapi dalam contoh kami, kami hanya menetapkan awal (0%) dan akhir (100%) keyframes. Dalam fade-in masuk kita bermula dengan tiada kelegapan (0) dan berakhir dengan kelegapan penuh (1). Animasi fade-out tidak bertentangan.

Kita boleh menggunakan sifat animasi untuk memohon animasi pudar ini ke butang apabila ia ditunjukkan dan tersembunyi.

Ketiadaan animasi di sini memberitahu kad untuk menggunakan animasi fade-in, yang berlangsung 0.4 saat dengan kelewatan 1 saat. Animasi akan bermain sekali dan berhenti pada akhir (depan) dan menggunakan fungsi pemasaan yang ease-out.

Apabila kelas sembunyi diterapkan pada butang, animasi fade-out akan berkuat kuasa.

Fungsi Bouncy Masa Berkesan 

Bahagian pertama yang akan kami sediakan ialah bar ikon. Memandangkan ini adalah pautan, kita mahu ia menonjol dan menjadi perkara pertama yang diketahui orang.

Apabila menghidupkan kami boleh mencipta kesan menarik menggunakan fungsi fungsi masa. Dalam kes ini kita akan menggunakan fungsi pemasaan kubik-bezier untuk menambah beberapa "melantun" apabila bar ikon muncul.

Mula-mula kita akan membuat beberapa kerangka kunci mudah untuk mempunyai bar mula kecil dan tumbuh tinggi.

Kini kami boleh menggunakan set kerangka utama ini ke bar ikon apabila kelas pameran ditambahkan ke kad.

Kesan melenting dibuat dengan menggunakan fungsi pemasaan kubik-bezier. Fungsi masa menggambarkan perubahan dalam kelajuan melalui animasi, dan boleh direka untuk menembak lebih awal atau akhir animasi. Animasi ini berjalan sedikit, kemudian membetulkan, membuat lantunan.

Kelewatan Animasi

Dengan bar ikon diperkenalkan, kita perlu menghidupkan seksyen yang mengandungi butiran dan headshot. Kami ingin bahagian ini muncul selepas bar ikon diperkenalkan. Untuk mencapai matlamat ini, kami akan menggunakan hartanah kelewatan animasi.

Animasi yang digunakan untuk seksyen detail ditetapkan untuk mempunyai tempoh 0.7 saat, dan kelewatan 0.5 saat. Ini bermakna animasi tidak akan bermula sehingga selepas bar ikon diperkenalkan.

Kami juga menggunakan fungsi pemasaan masa padu di sini untuk memberikan beberapa lantunan.

Seterusnya kita mentakrifkan kerangka utama untuk animasi bekas ini.

Prinsip animasi kontena-detail-show bermula dengan bekas yang tidak kelihatan dengan ketinggian sifar, dan menghidupkan ke ketinggian penuh. Fungsi pemasaan kubik padu kemudian membuat animasi melepaskan sedikit untuk memberikannya sedikit lantunan.

Menggabungkan Pelbagai Animasi

Pelbagai animasi boleh digunakan dalam satu harta tunggal. Selagi animasi tidak bertentangan dengan satu sama lain (dengan cuba menghidupkan harta yang sama), mereka boleh digunakan untuk menambah nuansa kepada animasi. Animasi berganda ditakrifkan seperti animasi tunggal, tetapi dipisahkan oleh koma.

Dalam kes ini, kita akan memudar dalam kandungan kepala, nama dan perihalan sementara pada masa yang sama menggunakan fungsi pop-masuk untuk memaparkan mereka dari jarak jauh.

Jika kita telah menggunakan satu animasi tunggal, dengan fungsi pemasaan masa padu, kesan pudar akan kelihatan melantun dan kelihatan ganjil. Sebaliknya, kita akan mempunyai pudar menggunakan fungsi pemasaan linear dan zum akan mempunyai kesan lantunan.

Mula-mula kita mentakrifkan kerangka utama pop-in.

Ini menggunakan perubahan skala untuk membolehkan setiap elemen bermula lebih kecil dan skala sehingga saiz normalnya.

Mari kita bawa kandungan. Setiap elemen mempunyai dua animasi, dan setiap unsur mempunyai kelewatan animasi yang sedikit lebih lama untuk menonjolkan penampilan mereka.

Ikon Tutup

Animasi ikon dekat menggunakan kekunci frames fade-in yang telah kami jelaskan sebelum ini.

Panggilan ke Tindakan

Kami hanya perlu menunjukkan ikon sekarang. Apabila menyampaikan animasi, perkara terakhir yang dihidupkan adalah di mana perhatian penonton akan berakhir. Ini bermakna bahawa mata penonton akan mengikuti animasi dan selesai melihat ikon yang kami mahu mereka pilih.

Kami sekali lagi akan menggunakan ciri kelewatan animasi untuk memastikan ia diperkenalkan. Mula-mula kita mentakrifkan kerangka utama animasi untuk ikon:

Setiap ikon akan berputar sedikit apabila mereka memudar. Kita kini boleh melampirkan animasi ini kepada setiap ikon, dengan menggunakan kelewatan setiap untuk meremehkannya.

Letakkan semuanya bersama-sama dan kami kini mempunyai kad yang muncul dengan baik apabila butang dipilih.

Satu perkara lagi

Sebelum kita dapat menyelesaikannya, kita perlu menambah tindakan menyembunyikan pada butang yang rapat dan menghidupkan kad itu. Mula-mula kita akan mengemas kini JavaScript. Apabila menekan ikon dekat, JavaScript menunggu satu saat sebelum mengeluarkan kad dengan paparan: tiada.

Ini memberi kita satu saat untuk menghidupkan kad itu-kita akan jatuh dari bahagian bawah skrin. Kerangka utama yang mencapainya adalah seperti berikut:

Kami kemudiannya menggunakan ini sebagai animasi ke kad.

Demo

Meletakkannya bersama-sama, anda dapat melihat hasilnya di sini.

Nota pada Awalan dan Pelayar Keserasian

Animasi disokong dengan baik di seluruh pelayar. Bergantung pada khalayak anda, mereka harus bekerja dalam kebanyakan situasi. Ia bernilai memastikan acara asas dan menyembunyikan fungsi berfungsi dan sebarang animasi ditambah sebagai peningkatan progresif.

Ringkasan

Melalui penggunaan pelbagai animasi, dan terutamanya sifat kelewatan animasi, kami telah mengambil apa yang mungkin menjadi widget yang sangat mudah dan menjadikannya lebih menarik. Animasi membimbing penonton melalui setiap elemen dan mengarahkan mereka ke arah panggilan ke tindakan.

Animasi boleh menjadi cara terbaik untuk berkomunikasi dalam reka bentuk anda. Komunikasi ini membantu pelawat memahami maksud anda serta meningkatkan kredibiliti dan keyakinan terhadap kualiti kerja anda.

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.