Cara Membuat Animasi dan Transisi dengan Motion UI

Animasi dan transisi memungkinkan desainer memvisualisasikan perubahan dan membedakan konten. Animasi dan transisi adalah efek bergerak itu membantu pengguna mengenali ketika sesuatu berubah di situs, misalnya mereka mengklik tombol dan sepotong informasi baru muncul di layar. Menambahkan gerakan ke aplikasi dan situs web meningkatkan pengalaman pengguna, karena memungkinkan pengguna untuk melakukannya memahami konten dengan cara yang lebih intuitif.

Kami dapat membuat animasi dan transisi baik dari awal atau dengan menggunakan perpustakaan atau kerangka kerja. Kabar baik bagi kami, orang-orang yang berada di depan mata, adalah Zurb, pencipta Foundation, Oktober lalu, open-source Motion UI, animasi dan pustaka transisinya berdasarkan Sass.

Ini awalnya dibundel dengan Foundation for Apps, dan sekarang, untuk rilis mandiri itu mendapat perbaikan, termasuk sistem antrian animasi dan pola CSS yang fleksibel. Motion UI juga memberi daya pada beberapa komponen kerangka kerja Foundation, seperti slider Orbit, Toggler switcher, dan Reveal modal, jadi ini adalah alat yang cukup kuat.

Mulai

Meskipun Motion UI adalah pustaka Sass, Anda tidak perlu menggunakannya dengan Sass, karena Zurb memberi pengembang kit starter yang praktis yang hanya berisi CSS yang dikompilasi. Anda dapat mengunduhnya dari halaman muka Motion UI, dan dengan cepat mulai membuat prototipe dengan menggunakan animasi CSS dan kelas transisi yang telah ditentukan.

Starter kit tidak hanya berisi Motion UI, tetapi juga framework Foundation, yang berarti Anda dapat menggunakan grid Foundation dan semua fungsi lain dari Foundation for Sites jika Anda mau..

Starter kit juga dikirimkan bersama index.html file yang memungkinkan Anda dengan cepat menguji kerangka kerja.

Jika Anda membutuhkan penyesuaian yang lebih canggih dan ingin memanfaatkan Sass Sassin Motion UI yang kuat, Anda dapat menginstal versi lengkap yang berisi sumber .scss file dengan npm atau Bower.

Dokumentasi Motion UI saat ini setengah matang. Anda dapat menemukannya di sini di Github, atau berkontribusi padanya jika Anda mau.

Prototipe cepat

Untuk mulai membuat prototipe, Anda dapat mengedit index.html file starter kit, atau buat file HTML Anda sendiri. Anda bisa membangun tata letak dengan menggunakan kisi Foundation, tetapi Motion UI juga dapat digunakan sebagai pustaka mandiri tanpa kerangka Foundation.

Ada 3 jenis utama kelas CSS yang telah ditentukan sebelumnya di Motion UI:

1. Kelas Transisi - memungkinkan untuk menambahkan transisi, seperti geser, fading, dan efek engsel ke elemen HTML.
2. Kelas Animasi - memungkinkan Anda untuk menggunakan berbagai efek guncangan, goyangan, dan pemintalan
3. Kelas Pengubah - bekerja bersama dengan kelas transisi dan animasi, dan mereka memungkinkan Anda menyesuaikan kecepatan, waktu, dan penundaan gerakan.

Membangun HTML

Hal yang hebat tentang kelas CSS yang telah ditentukan adalah bahwa mereka tidak hanya dapat digunakan sebagai kelas tetapi juga sebagai atribut HTML lainnya. Misalnya kamu bisa menambahkannya ke nilai atribut dari menandai, atau kamu bisa menggunakannya dalam kebiasaan Anda sendiri data-* atribut demikian juga.

Dalam cuplikan kode di bawah ini saya memilih opsi yang terakhir ini kelas perilaku dan pengubah yang terpisah. Saya menggunakan lambat dan meredakan atribut pengubah sebagai kelas, dan membuat custom animasi data atribut untuk peningkatan skala transisi. Itu Klik saya Tombol ini dimaksudkan untuk memicu efek.

 
 Klik saya  

Memainkan Animasi dan Transisi dengan jQuery

Motion UI juga menyertakan pustaka JavaScript kecil yang dapat memainkan transisi dan animasi ketika peristiwa tertentu terjadi.

Perpustakaan itu sendiri dapat ditemukan di starter kit di motion-ui-starter> js> vendor> motion-ui.js jalan.

Itu menciptakan MotionUI objek yang memiliki dua metode: animateIn () dan animateOut (). Transisi atau animasi terikat ke elemen HTML tertentu (the tag dalam contoh kami) dapat dipicu dengan jQuery dengan cara berikut:

 $ (function () $ (". button"). klik (function () var $ animation = $ ("# boom"). data ("animasi"); MotionUI.animateIn ($ ("# boom") , $ animasi);););

Dalam cuplikan kode di atas, kami mengakses animasi data atribut dengan menggunakan built-in jQuery data() metode, kemudian disebut animateIn () metode MotionUI obyek.

Ini kode lengkap dan hasilnya. Saya menggunakan kelas tombol bawaan Foundation frameworks untuk Klik saya tombol, dan menambahkan beberapa CSS dasar juga.

Karena Motion UI cukup fleksibel, Anda juga dapat menambah dan memicu transisi dan animasi dengan banyak cara lain.

Sebagai contoh pada contoh di atas kita tidak perlu menggunakan animasi data atribut kustom, tetapi cukup menambahkan kelas perilaku dengan addClass () Metode jQuery ke elemen dengan cara berikut:

 $ ('# boom'). addClass ('scale-in-up');

Kustomisasi dengan Sass

Kelas CSS pra-dibuat UI Motion menggunakan nilai default yang dapat dengan mudah disesuaikan dengan bantuan Sass. Ada Sass mixin di balik setiap transisi dan animasi, yang memungkinkan untuk mengubah pengaturan efek. Dengan cara ini Anda dapat dengan mudah membuat animasi atau transisi yang sepenuhnya custom.

Kustomisasi tidak akan bekerja dengan starter kit, Anda harus menginstal versi Sass jika Anda ingin mengonfigurasi efek sesuai dengan kebutuhan Anda sendiri.

Untuk menyesuaikan transisi atau animasi, pada awalnya Anda harus melakukannya temukan mixin terkait. Itu _classes.scss file berisi nama-nama kelas CSS yang dikompilasi dengan mixins masing-masing.

Dalam contoh kami, kami menggunakan .peningkatan skala atribut, dan dengan melihat _classes.scss, kita dapat dengan cepat mengetahui bahwa itu menggunakan mui-zoom mixin:

 // Transitions @mixin motion-ui-transitions ... // Scale .scale-in-up @include mui-zoom (dalam, 0,5, 1);  ...

Motion UI menggunakan mui- awalan ke mixin, dan setiap mixin memiliki file sendiri. Motion UI memiliki konvensi penamaan yang cukup jelas, sehingga kita dapat dengan cepat menemukan mui-zoom mixin dalam _zoom.scss mengajukan:

 @mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, skala-dan-pudar), $ durasi: null, $ timing: null, $ delay: null) ...

Menggunakan teknik yang sama Anda dapat dengan mudah mengontrol setiap fitur animasi atau transisi dengan mengubah nilai-nilai variabel Sass masing-masing.

Mengkonfigurasi Kelas Pengubah

Kelas pengubah yang mengontrol perilaku (kecepatan, waktu, dan penundaan) dari animasi dan transisi juga dapat dikonfigurasi dengan Sass dengan memodifikasi nilai-nilai dari masing-masing variabel dalam _settings.scss mengajukan.

Setelah Anda melakukan perubahan, Motion UI akan melakukannya gunakan nilai-nilai baru sebagai standar di setiap animasi dan transisi, jadi Anda tidak perlu mengkonfigurasi mixin terkait satu per satu.