Bagaimana Membuat Animasi dan Peralihan dengan UI Pergerakan

Animasi dan peralihan membolehkan pereka untuk memvisualisasikan perubahan dan membezakan kandungan. Animasi dan peralihan adalah kesan yang bergerak membantu pengguna mengenali apabila sesuatu perubahan di laman web, contohnya mereka mengklik pada butang dan sekeping maklumat baru muncul di skrin. Menambah pergerakan ke apl dan tapak web meningkatkan pengalaman pengguna, kerana ia membolehkan pengguna untuk memahami kandungan secara lebih intuitif.

Kita boleh membuat animasi dan peralihan sama ada dari awal atau dengan menggunakan perpustakaan atau rangka kerja. Berita baik untuk kita, frontend orang, ialah Zurb, pencipta Yayasan, UI Motion terbuka yang diterima pada bulan Oktober, animasi dan perpustakaan peralihan berdasarkan Sass.

Ia pada asalnya digabungkan dengan Yayasan untuk Aplikasi, dan sekarang, untuk melepaskan mandiri, ia mendapat perubahan, termasuk satu sistem antrian animasi dan corak CSS yang fleksibel. UI Pergerakan juga menguasai beberapa komponen rangka kerja Yayasan, seperti slaid Orbit, penukar Toggler, dan modal Mengungkap, jadi alat yang cukup teguh.

Bermula

Walaupun Motion UI adalah perpustakaan Sass, anda tidak semestinya perlu menggunakannya dengan Sass, kerana Zurb menyediakan pemaju dengan kit permulaan yang berguna yang mengandungi hanya CSS yang dikompilasi. Anda boleh memuat turunnya dari laman utama Motion UI, dan dengan cepat mula prototaip dengan menggunakan animasi CSS yang telah ditetapkan dan kelas peralihan.

Kit permulaan tidak hanya mengandungi UI Gerakan, tetapi rangka kerja Yayasan juga, yang bermaksud anda boleh menggunakan grid Yayasan dan semua fungsi Yayasan untuk Tapak lain jika anda mahu.

Kit permulaan juga dihantar dengan index.html fail yang membolehkan anda dengan cepat menguji rangka kerja.

Sekiranya anda memerlukan pelarasan yang lebih canggih dan mahu mengambil leverage daripada campuran Sass kuat Motion UI, anda boleh memasang versi penuh yang mengandungi sumber .scss fail dengan npm atau Bower.

Dokumentasi UI Gerakan sedang dibakar setengah. Anda boleh mencari di sini di Github, atau menyumbang jika anda mahu.

Prototyping Pantas

Untuk memulakan prototaip, anda boleh mengeditnya index.html fail kit permulaan, atau buat fail HTML anda sendiri. Anda boleh membina susun atur dengan menggunakan grid Yayasan, tetapi Motion UI juga boleh digunakan sebagai perpustakaan mandiri tanpa rangka kerja Yayasan.

Terdapat 3 jenis utama kelas CSS yang telah ditetapkan dalam Motion UI:

1. Kelas Peralihan - memungkinkan untuk menambah peralihan, seperti gelongsor, memudar, dan mengalihkan kesan kepada elemen HTML.
2. Kelas Animasi - membolehkan anda menggunakan kesan gegaran, gegaran dan berputar yang berlainan
3. Kelas Modifier - bekerjasama dengan kelas peralihan dan animasi, dan mereka membiarkan anda menyesuaikan kelajuan, masa, dan kelewatan pergerakan.

Membina HTML

Perkara yang bagus tentang kelas CSS yang telah ditetapkan adalah bahawa mereka bukan sahaja boleh digunakan sebagai kelas tetapi juga sebagai atribut HTML yang lain. Sebagai contoh, anda boleh tambah mereka kepada nilai sifat dari tag, atau anda boleh gunakannya dalam adat anda sendiri data- * atribut juga.

Dalam coretan kod di bawah, saya memilih pilihan terakhir ini kelas tingkah laku dan pengubahsuaian berasingan. Saya menggunakannya lambat dan mudah sifat pengubah sebagai kelas, dan membuat adat animasi data atribut untuk skala-dalam-up peralihan. The Klik saya butang dimaksudkan untuk mencetuskan kesannya.

 
 Klik Me  

Memainkan Animasi dan Peralihan dengan jQuery

UI Pergerakan termasuk pustaka JavaScript kecil juga yang boleh memainkan peralihan dan animasi apabila peristiwa tertentu berlaku.

Perpustakaan itu sendiri boleh didapati di kit starter di gerakan-ui-starter> js> vendor> motion-ui.js jalan.

Ia mencipta MotionUI objek yang mempunyai dua kaedah: animateIn () dan animateOut (). Peralihan atau animasi terikat kepada elemen HTML tertentu (yang tag dalam contoh kami) boleh dicetuskan dengan jQuery dengan cara berikut:

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

Dalam coretan kod di atas, kami mengakses animasi data atribut dengan menggunakan jQuery's built-in data () kaedah, kemudian dipanggil animateIn () kaedah MotionUI objek.

Berikut adalah kod penuh dan hasilnya. Saya menggunakan kelas butang terbina dalam rangka kerja Yayasan untuk Klik saya butang, dan menambah beberapa asas CSS juga.

Memandangkan UI Motion agak fleksibel, anda juga boleh menambah dan mencetuskan peralihan dan animasi dalam banyak cara lain.

Sebagai contoh dalam contoh di atas, kita tidak semestinya perlu menggunakannya animasi data atribut tersuai, tetapi hanya boleh menambah kelas tingkah laku dengan addClass () kaedah jQuery kepada elemen dengan cara berikut:

 $ ('# boom'). addClass ('skala dalam');

Ubahsuaian dengan Sass

Kelas CSS buatan UI Motion menggunakan nilai lalai yang boleh dengan mudah disesuaikan dengan bantuan Sass. Terdapat campuran Sass di belakang setiap peralihan dan animasi, yang memungkinkan untuk mengubah tetapan kesannya. Dengan cara ini, anda boleh membuat animasi atau peralihan sepenuhnya sepenuhnya.

Penyesuaian tidak akan berfungsi dengan kit permulaan walaupun, anda perlu memasang versi Sass jika anda mahu mengkonfigurasi kesan mengikut keperluan anda sendiri.

Untuk menyesuaikan peralihan atau animasi, pada mulanya anda perlu cari campuran yang berkaitan. The _classes.scss fail mengandungi nama-nama kelas CSS yang dikumpulkan dengan campuran masing-masing.

Dalam contoh kami, kami menggunakan .skala-dalam-up atribut, dan dengan melihat _classes.scss, kita dapat dengan cepat mengetahui bahawa ia menggunakannya mui-zoom mixin:

 // Transisi @mixin gerakan-ui-peralihan ... // Skala. Skala-dalam-up @include mui-zoom (dalam, 0.5, 1);  ...

UI gerakan menggunakan mui- awalan ke mixin, dan setiap mixin mempunyai fail sendiri. UI Pergerakan mempunyai konvensyen menamakan diri yang jelas, jadi kami dapat dengan cepat mencari mui-zoom mixin dalam _zoom.scss fail:

 @mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade) null, $ delay: null) ...

Menggunakan teknik yang sama, anda boleh dengan mudah mengawal setiap ciri animasi atau peralihan dengan mengubah nilai-nilai pembolehubah Sass masing-masing.

Mengkonfigurasi Kelas Pengubah

Kelas pengubah yang mengawal kelakuan (kelajuan, masa, dan kelewatan) animasi dan peralihan juga dikonfigurasikan dengan Sass dengan mengubah nilai-nilai pembolehubah masing-masing dalam _settings.scss fail.

Selepas anda membuat perubahan, UI Motion akan gunakan nilai baru sebagai lalai dalam setiap animasi dan peralihan, jadi anda tidak perlu mengkonfigurasi campuran yang berkaitan satu demi satu.