Bounce.js: Buat Animasi CSS Kompleks Cepat

Bounce.js: Alat yang berkuasa untuk dengan mudah membuat animasi CSS yang licin

Bounce.js, yang dicipta oleh Joel Besada, adalah alat yang mudah dan mudah digunakan yang membantu pemaju dengan cepat menjana animasi CSS yang lancar dan elegan. Ia adalah sebahagian daripada perpustakaan JavaScript yang baru muncul dan gelombang penjana, dengan berkesan memudahkan proses penciptaan animasi kompleks.

imej dari ipythat

JavaScript -bahasa skrip mudah yang asalnya direka untuk meningkatkan kesan dinamik laman web -telah membuat kemajuan yang besar sejak penubuhannya pada tahun 1995. Dicipta oleh Brendan Eich, pengasas bersama Mozilla, JavaScript secara beransur-ansur menggantikan Adobe Flash secara beransur-ansur dalam tempoh lima tahun yang lalu dan telah menjadi teknologi pilihan untuk animasi web, permainan dan aplikasi.

Kebangkitan JavaScript telah menghasilkan satu kumpulan baru perpustakaan dan penjana, yang membolehkan pemaju mengakses ciri animasi yang lebih kompleks dengan lebih mudah. Bounce.js adalah salah satu daripada mereka.

Bounce.js membolehkan anda menghasilkan animasi CSS yang lancar dan elegan melalui antara muka, pratonton, berkongsi dan eksport yang mudah. Operasinya sangat intuitif! Jika anda suka kesan animasi yang indah, cuba Bounce.js.

Seterusnya, kami akan meneroka aliran kerja fungsi dan animasi Bounce.js dan buat animasi tersuai. Saya percaya anda akan merasa sangat menarik!

antara muka

antara muka Bounce.js adalah ringkas dan jelas, menjadikan proses penciptaan animasi sangat mudah.

di sebelah kiri adalah senarai komponen di mana anda boleh menambah pelbagai kesan ke rantaian animasi dan membuat penyesuaian. Ia juga menyediakan pelbagai pratetap animasi yang boleh anda lihat dan mengubah suai, menjimatkan masa untuk menambah komponen. Preset animasi "Road Runner" sangat menarik, dan pengendalian penulis butirannya sangat mengagumkan. Banyak pratetap disediakan sebagai templat untuk memudahkan pencampuran animasi tersuai dan menjimatkan masa.

Pusat skrin adalah kawasan pratonton animasi, dan persegi bertindak sebagai pemegang tempat untuk memaparkan semua tindakan animasi.

Terdapat tiga butang di bawah skrin pratonton: main animasi, animasi gelung dan gerakan perlahan.

Fungsi gerakan perlahan amat berguna untuk analisis terperinci mengenai trajektori gerakan animasi.

Setiap animasi yang anda buat mempunyai URL yang unik, klik "Dapatkan URL Pendek" untuk mendapatkan pautan pendek.

Penafian: Seperti kebanyakan penjana kod, kod yang ditulis dengan baik sering jauh lebih tinggi daripada kod yang dihasilkan secara automatik. Walau bagaimanapun, menulis kod secara manual boleh menjadi lebih memakan masa dan intensif buruh. Sekiranya anda tidak merancang untuk menyesuaikan kod secara manual selepas itu, disyorkan untuk tidak bergantung sepenuhnya pada Bounce.js. Bounce.js menggunakan transformasi matriks berat, yang bukan cara terbaik untuk semua adegan animasi.

Saya mengalami ini secara peribadi semasa membuat animasi ini. Walau bagaimanapun, animasi anda mungkin tidak begitu rumit seperti ini, yang merupakan perkara yang baik. Ingat: Semakin lama garis masa animasi, semakin banyak kod yang anda hasilkan, jadi jangan terlalu banyak.

Ini adalah asas -asas. Seluruh proses tidak rumit secara teknikal - selebihnya bergantung pada imaginasi anda.

Pengeluaran Tangan-Asal

mari buat animasi tersuai. Dalam contoh di bawah, saya akan menunjukkan cara membuat animasi payung terjun -jenis animasi yang dibesar -besarkan yang biasanya dilihat dalam kartun -melihat dari atas ke bawah.

Dalam Bounce.js, animasi dipecah menjadi "komponen". Anda boleh memikirkan komponen sebagai bahagian yang berlainan dari langkah tarian. Ingat, kita hanya merancang tingkah laku animasi, bukan objek yang ia animasi, atau latar belakang/panggung. Sudah tentu, apabila tindakan kami selesai, adalah remeh untuk memohon kepada mana -mana objek dalam mana -mana tetapan.

Komponen animasi 1

Q: Apa yang akan dilakukan oleh Skydiver selepas dia terjatuh?

A: Sudah tentu, mereka akan membuka payung terjun. Oleh itu, mari kita ubahnya menjadi animasi.

Cara terbaik untuk mensimulasikan pembukaan payung terjun ialah menggunakan komponen

. Merujuk kepada saiz asal persegi dalam pratonton, saya menggunakan saiz asal 0.2 di sini, dan saiz akhir adalah 4. Pada asasnya, ia mendapat 20 kali lebih besar pada akhir animasi.

Oleh kerana lebar dan panjang payung terjun (ketinggian yang dilihat dari atas) adalah sama, kita menyimpan nisbah aspek dua dimensi yang sama. Kami memilih atribut untuk pelonggaran kerana ia sesuai dengan keperluan kami. Dalam tempoh, kami menentukan julat masa yang perlu diliputi animasi. Oleh kerana payung terjun dibuka dengan cepat, saya menetapkannya di sini untuk 2000 milisaat.

Petua: Jika anda membuat animasi yang kompleks, sebaiknya menyimpan komponen dalam susunan yang sama kerana ia diaktifkan supaya ia tidak mudah dikelirukan.

Medan memantul

menentukan bilangan kali elemen melantun semasa animasi. Dalam kes ini, saya menaip 16, yang merupakan jumlah yang agak tinggi, tetapi masuk akal untuk animasi payung terjun.

Begitu juga dengan nilai kekakuan . Mari kita tetapkan nilai minimum untuk ini.

Komponen animasi 2

Seterusnya, kita akan mensimulasikan pergerakan payung terjun, sama seperti angin mengubah jalannya dengan cara yang halus dan rawak. Untuk melakukan ini, kami akan menggunakan komponen

translate

. Saya telah menambah langkah halus di sini (25 unit ke kanan dan 15 unit ke bawah) yang sepatutnya mencukupi. Saya cadangkan menggunakan melantun sebagai pelonggaran lagi kerana kelancaran animasi.

Oleh kerana komponen ini akan dimainkan sepanjang animasi, saya membiarkannya bermain untuk 20000ms, yang harus meliputi keseluruhannya. Payung terjun akan bergerak dari awal garis masa, jadi kita tidak perlu kelewatan di sini. Oleh kerana sukan payung terjun akan lebih terjejas oleh angin, tetapi lebih keras daripada komponen pertama, saya memberikannya 22 bounces dan 3 kekakuan .

Komponen Animasi 3

Akhirnya, kami akan menambah komponen terakhir animasi.

Jika anda memerhatikan skydiver dari atas, dia jelas akan kelihatan lebih kecil dan lebih kecil kerana peredaran masa dan peningkatan jarak.

jadi saiz awalnya akan menjadi 1, dan saiz pada akhir animasi sebenarnya 0. Mari masukkan nilai ini untuk lebar dan ketinggian.

Tempoh animasi sepatutnya agak lama di sini, jelas. 25,000 milisaat sudah cukup.

Oleh kerana komponen animasi ini akan dimainkan pada masa yang sama dengan komponen lain (iaitu tiada kelewatan), kita tidak perlu menambah sebarang kesan lantunan atau kekakuan kerana ia mewarisi dari komponen sebelumnya. Jadi, seperti tangkapan skrin di sini, biarkan mereka menjadi 0.

Sudah tentu, anda boleh menyesuaikan dan mencampur hasil anda pada kehendak, yang hanya panduan kasar, tetapi hasilnya jelas di tangan anda.

Walau bagaimanapun, anda harus mempunyai hasil yang sama selepas itu.

Sebaik sahaja anda berpuas hati dengan hasilnya, anda boleh mengeksport animasi sebagai CSS dan menggunakannya dalam projek anda.

Anda juga boleh mencari repositori Bounce.js pada GitHub.

apa pendapat anda?

Dengan kemunculan banyak pendekatan baru yang inovatif untuk laman web reka bentuk dan animasi, penjana seperti Bounce.js sangat mudah, terutamanya dalam menjimatkan masa berharga anda untuk menulis secara manual kod animasi tersebut.

Cuba dan hantarkan eksperimen anda di bahagian komen. Kami ingin mengetahui hasil anda!

soalan yang sering ditanya mengenai Bounce.js

bagaimana memasang bounce.js dalam projek saya?

Untuk memasang Bounce.js, anda boleh menggunakan NPM atau Bower. Jika anda menggunakan npm, anda boleh menggunakan arahan

untuk memasangnya. Untuk Bower, gunakan arahan

. Setelah dipasang, anda boleh memasukkannya dalam fail HTML menggunakan tag skrip. npm install bounce.js bower install bounce.js Bolehkah saya menggunakan Bounce.js dengan perpustakaan JavaScript yang lain?

Ya, Bounce.js serasi dengan perpustakaan JavaScript yang lain. Ia tidak mengganggu fungsi perpustakaan lain. Anda boleh menggunakannya dengan perpustakaan seperti jquery, react, angular, dan vue.js.

Bagaimana untuk membuat animasi menggunakan Bounce.js?

Mewujudkan animasi dengan Bounce.js melibatkan membuat objek lantunan baru dan menambah komponen kepadanya. Anda boleh menambah komponen seperti zoom, berputar, kuali dan kecondongan. Selepas menambah komponen, anda boleh menggunakan kaedah

untuk menggunakan animasi kepada elemen.

Bolehkah saya mengawal tempoh dan kelewatan animasi dalam Bounce.js?

Ya, Bounce.js membolehkan anda mengawal tempoh dan kelewatan animasi anda. Anda boleh menetapkan tempoh dan kelewatan menggunakan kaedah duration dan delay masing -masing. Nilai dalam milisaat.

bagaimana untuk menghubungkan animasi dalam bounce.js?

anda boleh menggunakan kaedah chain untuk menghubungkan animasi dalam bounce.js. Kaedah ini membolehkan anda melaksanakan animasi secara berurutan. Anda boleh lulus pelbagai objek melantun ke kaedah chain untuk menghubungkannya bersama -sama.

Bolehkah saya menggunakan Bounce.js untuk reka bentuk responsif?

Ya, Bounce.js boleh digunakan untuk reka bentuk responsif. Animasi yang dicipta dengan Bounce.js berskala dan menyesuaikan diri dengan saiz skrin yang berbeza. Anda juga boleh menggunakan pertanyaan media untuk mengawal bagaimana animasi berkelakuan pada peranti yang berbeza.

Bagaimana untuk menghentikan animasi dalam bounce.js?

anda boleh menggunakan kaedah stop untuk menghentikan animasi dalam bounce.js. Kaedah ini menghentikan animasi dan menetapkan semula elemen ke keadaan awalnya.

Bolehkah saya menggunakan Bounce.js untuk animasi kompleks?

Ya, Bounce.js dapat mencipta animasi kompleks. Anda boleh menggabungkan pelbagai komponen dan menghubungkan animasi untuk menghasilkan kesan kompleks. Walau bagaimanapun, ini memerlukan pemahaman yang baik tentang perpustakaan dan animasi CSS.

Adakah Bounce.js serasi dengan semua pelayar?

Bounce.js serasi dengan pelayar yang paling moden. Walau bagaimanapun, beberapa ciri mungkin tidak berfungsi dalam pelayar yang lebih tua. Adalah lebih baik untuk menguji animasi anda dalam pelayar yang berbeza untuk memastikan keserasian.

Bolehkah saya menggunakan Bounce.js untuk projek komersial?

Ya, Bounce.js adalah sumber terbuka dan boleh didapati secara percuma untuk projek peribadi dan komersial. Anda boleh menggunakannya untuk membuat animasi untuk laman web, aplikasi, permainan, dan projek lain.

Atas ialah kandungan terperinci Bounce.js: Buat Animasi CSS Kompleks Cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!