Ekspor Animasi Efek ke HTML5

Animasi di web ada di sini untuk menginap. Itu dalam segala hal mulai dari gerakan halus yang membantu membawa kami UI Design. Untuk hidup, untuk pengalaman kanvas yang sepenuhnya animasi dan eksperimen WebGL yang menantang apa yang kita pikir mungkin dimungkinkan di browser.

Sementara kreativitas devs dan kemampuan browser meningkat, animasi di web telah lama menjadi hubungan yang buruk dengan video - sesuatu yang didekati oleh komunitas grafis gerak dengan hati-hati selama bertahun-tahun. Ingatlah bahwa jika Anda memiliki situs yang kompleks untuk mempertahankan, Anda hosting web. Layanan harus tepat.

• Panduan Pro untuk Desain UI

Pengembang mengandalkan perpustakaan seperti Greensock dan Snap.SVG untuk melakukan pengangkatan berat dalam mereproduksi animasi melalui JavaScript. Sementara alat-alat ini telah memberikan banyak fleksibilitas, mereka tidak dapat dibandingkan dengan presisi dan kehalusan animasi yang dapat dicapai menggunakan After Effects CC. Garis waktu dan grafik pelonggaran sendiri. Dari perspektif web, setelah efek sangat cocok untuk men-tweaking dan mencoba gerakan sebelum berkomitmen untuk kode.

Memasukkan BodyMovin. , ekstensi inovatif untuk Adobe After Effects yang mengekspor animasi langsung dari efek setelah JavaScript untuk ditampilkan dan dimanipulasi di browser. Dibuat oleh Hernan Torrisi. , Bodymovin menghilangkan banyak hambatan antara animator dan pengembang. Pada tingkat dasarnya, plugin bertindak sebagai fitur 'render untuk web' ajaib Adobe lupa. Di mana yang paling maju, ini membuka kemungkinan baru untuk animasi interaktif.

BodyMovin adalah tautan dalam rantai alat, plugin, dan sistem yang naik untuk memenuhi beberapa kemungkinan baru ini. Lottie Airbnb dan Keyframes Facebook. Keduanya membangun fondasi ini - dan mereka akhirnya membawa alat animasi paling kuat ke web.

Mengapa menggunakan bodymovin?

SVG telah mengambil alih Internet dan membawa serta harapan bahwa semuanya harus berkualitas tinggi, ringan dan terukur. Bodymovin membuat segalanya dalam komposisi Anda dengan SVG yang sangat tajam yang menyimpan kualitas vektornya pada ukuran berapa pun. Tidak ada lagi kompromi untuk meringankan GIF atau memaksa pengguna Anda untuk memuat file video bloated.

Serta menyederhanakan proses mengekspor animasi Anda, Bodymovin membuka cara lebih banyak potensi bagi pengembang untuk menjadi kreatif dengan pengalaman interaktif baru. Lihat CODEPEN untuk beberapa cara fantastis ekstensi telah digunakan - dari rig IK interaktif untuk animasi-as-Anda-tipe teks interaktif.

Untuk lebih menyederhanakan proses Web Dev Anda, coba a Pembangun Situs Web .

Animasi yang diekspor dapat dimanipulasi di browser seperti elemen lain, memungkinkan kami untuk memikirkan animasi sebagai alat interaktif dan eksperimental dalam desain web. Dan sekarang karena bodymovin, membawa animasi Anda ke web tidak pernah semudah ini. Dalam tutorial ini Anda akan belajar bagaimana mengekspor animasi dari efek setelah dan membuat animasi looping sederhana yang merespons dengan klik pengguna.

Cara Menyiapkan File Efek Anda

Dukungan untuk fitur After Effects telah meningkat pesat dan Anda dapat mengharapkan hasil yang cukup bagus langsung dari kotak. Yang sedang berkata, layer 3D terbang mewah Anda tidak akan bermain bagus jadi waspadai batas-batas sebelum Anda memulai. Sebelum Anda memulai proyek, selalu unduh versi terbaru dari BodyMovin dan periksa halaman github untuk melihat fitur mana yang saat ini didukung.

Jangan terlalu tergesa-gesa untuk pindah ke bagian yang menyenangkan ... file rapi membuat pikiran rapi. Dalam hal ini mereka juga akan membantu mengambil beberapa pekerjaan ekstra dari browser dan memberi Anda pemutaran halus halus. Pertama, Anda akan ingin memastikan bahwa konten Anda berada di After Effects Shape Layers untuk daya vektor penuh. Untuk mengonversi file Illustrator untuk membentuk lapisan Anda cukup mengklik kanan dan memilih membuat bentuk dari lapisan vektor. Setiap lapisan yang tidak bentuk pada tahap ini kemudian akan dikonversi menjadi gambar dan mereka tidak akan dianggap sebagai vektor.

Selanjutnya, ada cek melalui lapisan dan sublayers Anda; Ada peluang bagus, Anda dapat menyederhanakan isi bentuk tanpa mengorbankan apa pun. Cobalah untuk menebang jumlah kelompok, jalur, dan isi hanya penting.

Berhati-hati dengan topeng

Masker adalah cara mudah untuk tergelincir pada tahap ini. Ketahuilah bahwa alpha mask akan bekerja dengan SVG Renderer tetapi tidak akan muncul jika Anda memilih untuk beralih ke kanvas. Masker bisa mahal dalam kinerja jadi gunakan secara efisien.

Rendering.

BodyMovin bekerja dalam dua bagian - ekstensi efek setelah mengkonversi data animasi ke file JSON dan pemutar bodymovin.js untuk memasukkan di halaman web Anda yang dapat menafsirkan file ini dan membuatnya di browser.

Pikirkan file Anda baik untuk pergi? Buka ekstensi bodymovin melalui jendela & gt; Ekstensi dan kemudian bodymovin.

Setelah Anda menekan Refresh, Anda akan melihat daftar semua komposisi dalam proyek setelah efek ini. Pilih comp yang Anda pilih dan kemudian pilih folder tujuan di dalam proyek web Anda. Ketika Anda senang cukup klik render dan perhatikan keajaiban terjadi. Setelah selesai, Anda akan mendapatkan pesan 'Selesai'. Selamat! Anda baru saja mengekspor file JSON dengan semua informasi yang perlu Anda buat membuat ulang animasi.

Untuk menguji animasi Anda yang baru diekspor, klik Pratinjau & GT; Render saat ini dan ingat untuk menggosok timeline karena Anda mungkin melihat sesuatu yang terlihat sedikit berbeda dengan apa yang Anda harapkan. Jika Anda menemukan masalah, lompat kembali dan periksa layer Anda - itu bisa menjadi fitur yang tidak didukung atau ekspresi yang digunakan dalam efek setelah.

Beberapa plugin efek setelah rubberhose sekarang mendukung bodymovin. Rubberhose memanfaatkan layer pemandu dan lapisan tersembunyi. Untuk mengaktifkan ini, cukup klik pada pengaturan COG di sebelah komposisi yang Anda pilih dan centang fitur yang Anda butuhkan.

Jika semuanya terlihat bagus, hanya ada satu hal lagi yang perlu Anda lakukan sebelum Anda pergi setelah efek di belakang. Pada tahap ini Anda harus memiliki file data segar.JSON yang menjelaskan animasi Anda, tetapi tidak ada pemain bodymovin untuk menafsirkannya. Dalam ekstensi, klik tombol 'Dapatkan pemain' di kanan atas dan simpan dengan file JSON Anda.

Muat animasi

Sekarang Anda memiliki semua yang Anda butuhkan, mari kita langsung ke dalam kode dan meletakkan dasar-dasar untuk membuat animasi Anda tampil di halaman.

Pertama-tama buat wadah baru #Anim_container. untuk memegang animasi Anda. Anda juga perlu memasukkan bodymovin.js. file sebelum tag tubuh penutupan. Selanjutnya beri tahu Bodymovin segalanya tentang animasi Anda dan memuatnya ke dalam wadah baru.

Mari kita berjalan melalui pengaturan langkah demi langkah:

 Var Container = Document.GetElementByid ('anim_container');
// atur animasi kami

var animdata = {
wadah: wadah,
Renderer: 'SVG',
Autoplay: Benar,
Loop: Benar,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loadanimation (animdata); 

Anda perlu mendefinisikan semua parameter untuk animasi. Beri tahu bodymovin wadah yang Anda inginkan animasi dimuat dan kemudian katakan untuk membuat animasi sebagai elemen SVG. Selanjutnya, beri tahu animasi untuk bermain segera setelah dimuat dan Anda ingin loop kembali ke awal ketika selesai.

Properti Path memberi tahu pemain bodymovin tempat untuk menemukan file data JSON untuk animasi. Karena kebijakan berbagi sumber daya lintas asal (CORS), teknik yang akan Anda gunakan untuk mengakses file JSON hanya akan berfungsi jika Anda menggunakan server atau server lokal. Untuk bekerja secara lokal, Anda dapat membuat data itu.Jon menjadi file JavaScript yang menetapkan objek ke variabel. Dalam hal itu pengaturan Anda mungkin terlihat seperti ini:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getelementbyid ('anim_container');
// atur animasi kami
var animdata = {
wadah: wadah,
Renderer: 'SVG',
Autoplay: Benar,
Loop: Benar,
AnimationData: Data.
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Refresh halaman dan animasi Anda harus diputar di dalam wadah. Pilih dengan alat dev Anda dan Anda akan melihat bahwa setiap elemen dalam animasi sekarang terkandung dalam & lt; g & gt; Tag, dan sedang ditransformasikan secara real-time.

Terlihat luar biasa, bukan? Anda sekarang harus memiliki animasi yang indah dan segar yang ditampilkan di browser (tanpa tag video celaka di hadapan ...). Animasi akan selalu berskala agar sesuai dengan wadahnya, jadi silakan dan meledakkannya!

Bodymovin memiliki berbagai metode kuat untuk mengendalikan animasi setelah dimuat. Menyebut metode seperti anim.puse () atau anim.setdirection () akan memungkinkan Anda untuk memanipulasi pemutaran dengan cara yang berbeda. Mari kita lihat beberapa contoh:

• Anim.SetDirection (-1) akan memainkan animasi secara terbalik
• anim.puse () dan anim.play () akan mulai dan menghentikan animasi
• anim.setspeed (0.5) akan memainkan animasi dengan kecepatan setengah

Tambahkan interaksi

Dalam langkah selanjutnya Anda akan mengeksplorasi beberapa cara berbeda untuk menambah interaksi ke animasi Anda melalui Javascript. Dalam contoh ini kita mengekspor animasi setelah efek dengan dua bagian: bagian A dan bagian B. Bagian A menggunakan frame dari satu hingga 20 (segitiga memegang tongkat pogo) Bagian B menggunakan frame dari 20 hingga 40 (segitiga melompat-lompat pada tongkat pogo).

Sekarang, Anda ingin bermain bagian A pada loop kemudian (hanya setelah klik pengguna) Bagian putar dan loop B. Anda dapat menggunakan properti PlaySancments untuk membagi animasi dengan cara ini. Metode ini akan memakan dua argumen - array dengan nilai awal dan akhir dan boolean kedua - isframe. Mengatur ini untuk benar akan memberi tahu animasi untuk membaca nilai awal dan akhir sebagai bingkai, sedangkan false akan mengatakannya untuk membaca nilai-nilai ini sebagai waktu.

 anim.puse ();
anim.playSegmen ([0,20], benar); 

Menambahkan ini memberitahu bodymovin untuk berhenti pada bingkai pertama dan bermain hanya animasi dari 0 hingga 20 frame. Saat Anda mengatur animasi Anda dengan a Loop: True. Properti Ini akan terus bermain lagi dan lagi.

Mari kita atur seluruh contoh. Anda akan menggunakan dua segmen animasi untuk contoh ini, sehingga Anda akan membuat dua fungsi:

 Var Container = Document.GetElementByid ('anim_container');
// atur animasi kami
var animdata = {
wadah: wadah,
Renderer: 'SVG',
AUTOPLAY: SALAH,
Loop: Benar,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loadanimation (animdata);
// Ketika animasi dimuat, jalankan fungsi pertama kami
anim.addeventlistener ('domloaded', firstloop);
// buat fungsi pemutaran kami
Fungsi firstloop () {
anim.playSegmen ([0,20], benar);
};
fungsi secondloop () {
anim.playsegmen ([20,40], benar);
};
// dengarkan acara klik
wadah.addeventlistener ('klik', fungsi (acara) {
anim.addeventlistener ('loopcomplete', sejalan);
}); 

Jalan untuk pergi! Sekarang animasi Anda akan tetap beroperasi sampai pengguna mengkliknya, maka itu akan memulai loop kedua. Satu-satunya masalah sekarang adalah bahwa lompatan seperti ini sangat tiba-tiba dan itu dapat merusak kelancaran animasi.

Situasi yang ideal adalah memasukkan bagian ketiga ke animasi, salah satu yang transisi dari memegang tongkat pogo untuk melompat di atasnya. Sekarang struktur Anda akan terlihat seperti ini:

• firstloop. - bingkai 0 sampai 20
• transisi - bingkai 20 hingga 30
• sejalan. - bingkai 30 hingga 50

Kami ingin animasi Anda tetap di loop pertama sampai diklik. Pada saat itu Anda akan ingin menunggu akhir loop Anda saat ini masuk dan pindah ke transisi. Setelah transisi selesai pindah ke loop kedua Anda. Ini terdengar rumit tetapi tetap bersamaku! Ini kode Anda penuh:

 Var Container = Document.GetElementByid ('anim_container');
// atur animasi kami
var animdata = {
wadah: wadah,
Renderer: 'SVG',
AUTOPLAY: SALAH,
Loop: Benar,
PATH: 'DATA.JSON'
};
var anim = bodymovin.loadanimation (animdata);
// Ketika animasi dimuat, jalankan fungsi pertama kami
anim.addeventlistener ('domloaded', firstloop);
// buat fungsi pemutaran kami
Fungsi firstloop () {
anim.playsegmen ([0,20], benar);
};
Transisi Fungsi () {
anim.playsegmen ([20,30], benar);
anim.removeEventListener ('loopcomplete');
anim.addeventlistener ('loopcomplete', sejalan);
};
fungsi secondloop () {
Anim.PlaySegmen ([30.100], Benar);
anim.removeEventListener ('loopcomplete');
};
// dengarkan acara klik
wadah.addeventlistener ('klik', fungsi (acara) {
anim.addeventlistener ('loopcomplete', transisi);
}); 

Pada klik, Anda menggunakan a loopcomplete. Pendengar menunggu sampai Anda mencapai frame loop terakhir, lalu jalankan transisi() fungsi. Di sini Anda menghapus pendengar terakhir, memainkan set bingkai berikutnya dan kemudian melakukan hal yang sama lagi. Setelah transisi selesai itu akan menelepon sejalan () .

Itu dia!

Anda telah bekerja dengan beberapa fitur bodymovin hari ini, tetapi jika Anda tertarik untuk belajar lebih banyak tentang plugin, Anda dapat menemukan banyak informasi tentang Bodymovin github. halaman. Untuk contoh-contoh lainnya, lihat koleksi codepen bodymovin yang selalu mengesankan.

Semoga tutorial ini akan memberi Anda gambaran tentang berbagai cara yang dapat Anda gabungkan penggunaan efek setelah dan bodymovin untuk menghasilkan beberapa animasi supercool untuk web!

Anda sekarang dapat mengatur animasi untuk diekspor untuk web, membawa file yang diekspor ke browser dan membuat animasi Anda responsif untuk mengklik. Pikirkan melampaui file MP4 yang sebelumnya Anda gunakan dan lihat ke bodymovin untuk menciptakan pengalaman web yang jauh lebih kaya di masa depan.

Mampu melibatkan animator dengan cermat dalam proses pengembangan menjadi semakin penting, dan bidang animasi web bergerak sangat cepat. Dengan koleksi ekstensi baru yang terus berkembang, plugin, dan kerangka kerja, animator dan pengembang dapat mengharapkan proses ini menjadi lebih mudah dan lebih baik dari waktu ke waktu. Saya untuk orang tidak sabar untuk melihat apa yang ditahan di masa depan.

Punya banyak file untuk dicadangkan? Lihatlah kita penyimpanan awan Pilihan.

Artikel ini awalnya muncul di Net Magazine. pada tahun 2017. Berlangganan di sini .

Baca lebih lajut:

• Buat dan Animasi Poligon SVG
• 14 Adobe yang luar biasa Setelah efek plugin.
• Buat storyboard untuk animasi web