Baru-baru ini saya belajar tentang animasi kerangka di atas kanvas. Mendengar namanya pasti Anda tahu bahwa ini berbeda dengan animasi di atas kanvas sebelumnya.
Tentang animasi kerangka, saya pertama kali melihatnya secara tidak sengaja di tim Tencent, tetapi karena tutorial di situs resminya sangat sedikit, hanya ada demo kecil untuk referensi, dan anehnya kasus yang diunduh secara resmi tidak dapat dijalankan, mungkin operasi saya adalah salah, tapi tidak masalah, mari pelajari tentang animasi kerangka yang sangat canggih ini melalui demo kecil ini. Saya juga baru mengenalnya, dan pemahaman saya kurang komprehensif.
Sebelum kita mulai, mari pelajari tentang AlloyStickPengenalan resmi menyatakan bahwa AlloyStick adalah mesin animasi kerangka yang dikembangkan menggunakan teknologi HTML5 dan dapat digunakan untuk pengembangan animasi HTML5 dan pengembangan game HTML5; AlloyStick terutama terdiri dari mesin animasi kerangka dan editor animasi kerangka menyediakan kerangka yang kuat animasi. Dengan fungsi pengeditan, dengan mengatur bingkai kunci animasi dan mengandalkan hubungan tweening dan kerangka otomatis yang kuat, Anda dapat membuat animasi kerangka Canvas yang realistis dan jelas, yang dapat berjalan dengan lancar di PC, ponsel, tablet, dan perangkat lainnya. Ya, mudah untuk mengatakannya dan sangat menarik.
Yang disebut animasi kerangka secara harafiah berarti animasi yang digambar melalui tulang.
Ya, meskipun terlihat seperti ini, itu sesuai dengan ekspektasi. Bagaimanapun, mereka memiliki fungsi tweening otomatis yang sangat kuat. Anda dapat membayangkan setiap bagian dihubungkan dengan cara yang sangat mulus, seperti bulu-bulu PS.
Karena fungsinya yang sangat kuat, pasti memiliki kelebihan uniknya sendiri.
Mari kita mulai demo kecil di bawah ini
Animasi kerangka pada dasarnya terdiri dari tiga bagian: data kerangka, data skinning, dan data animasi. Dengan ketiga bagian data ini, AlloyStick dapat membuat animasi kerangka yang jelas. Tentu saja ketiga bagian data ini tidak perlu dibuat secara manual, hanya perlu dioperasikan di editor untuk menghasilkannya secara otomatis. Setelah data dibuat, Anda dapat memanggil dan menjalankan animasi kerangka sebagai berikut. Langkah pertama adalah memperkenalkan alloysk.js, lalu menambahkan sumber daya resource.js. Perlu dicatat bahwa png berkulit diperkenalkan dengan tag img, dan tentu saja juga dapat dimuat di js. resource.js mencakup data skinning, data hubungan tulang, dan semua data tindakan termasuk nama dan parameter animasi. Pada langkah kedua, objek panggung Stage dan objek peran Armature dibuat sesuai dengan file sumber daya baru, dan objek Stage mengelola objek Armature. Metode playTo adalah metode inti, yang memungkinkan karakter memainkan animasi aksi yang berbeda. Anda dapat menambahkan peristiwa untuk beralih di antara tindakan yang berbeda. Akhirnya memulai tahap stage.start().
// Langkah pertama adalah membuat kanvas <canvas id=canvas width=800px height=600px> Maaf, browser Anda tidak mendukung canvas. Disarankan agar Anda menggunakan browser Chrome</canvas>
// Langkah kedua adalah memperkenalkan skin resource dalam bentuk gambar atau js <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// Langkah ketiga memperkenalkan alloysk.js dan resource.js // Langkah keempat adalah persiapan var canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new alloyge.Scene( canvas.getContext('2d'))var player = new alloysk.Armature('xiaoxiao',textureImg)//Langkah kelima membuat animasi// Parameter kecepatan tindakan: status tindakan, kecepatan, kecepatan awal, apakah akan selalu mengeksekusi. Anda juga dapat mengatur tindakan lain di sini, seperti roll roll// Memperbarui beberapa status tindakan: lari run roll roll simpleHit lempar sesuatu dengan tangan kanan secondHit pukulan dengan tangan kanan // jump_kick tendangan samping ayo provokasi santai santai sabun ambil sabun player.playTo('run',50,15,true);// Posisi animasi player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Memulai monitor FPS (fungsi tambahan tidak diperlukan) alloy.monitorFPS(scene); scene, Dan Anda dapat meneruskan loop panggilan balik untuk memanggil // Langkah terakhir untuk mengeksekusi animasi scene.start(); Efeknya seperti running boy di bawah ini. Maafkan saya yang belum membuka pintu untuk membuat animasi gif..
Kode yang relevan dapat diunggah ke github https://github.com/aurora-polaris/canvas3
Karena saya baru dalam hal ini, saya tidak memahami banyak hal dengan baik. Saya akan menyelesaikannya ketika saya punya waktu.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.