Saya memiliki beberapa ilustrasi di Illustrator dan saya berencana untuk menghidupkannya untuk situs web yang sedang saya kerjakan, saya pernah mendengar tentang toolkit Create.js dengan flash, tetapi apakah ini cara terbaik untuk pergi atau apakah ada yang lain " lebih baik "cara melakukannya?
Berikut adalah contoh jenis animasi yang saya tuju: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Ada banyak cara untuk menghidupkan berbagai hal di web. Bahkan ada lebih banyak cara untuk membuat animasi kemudian ekspor ke animasi web.
Ada manfaat besar untuk merancang animasi dalam sesuatu seperti AfterEffects atau Animate CC (yang dapat mengimpor file Illustrator dan Photoshop) karena alasan pembagian kerja yang jelas dan penggunaan editor grafis.
Dengan itu, Anda harus selalu, pada akhirnya, mengkompilasi ke salah satu dari yang berikut :
Kemampuan interaksi terbatas:
Lebih sepenuhnya interaktif:
Sekarang, saya akan membahas masing-masing dengan sedikit lebih detail.
GIF adalah cara yang baik untuk pergi ketika animasi tidak memerlukan banyak interaksi, tidak perlu berukuran secara dinamis, dan relatif kecil. GIF yang dibuat dengan baik dapat sedetail ilustrasi yang Anda tautkan tanpa kekhawatiran kinerja. Bahkan interaksi kecil menggunakan overlay transparan yang diletakkan di atasnya (atau hanya sebagian saja) dimungkinkan.
Catatan: sekarang ada .gifvformat yang dibuat oleh Imgur yang mengubah file GIF dengan cepat menjadi format video WebM atau MP4. Ini meningkatkan kinerja dengan mengurangi ukuran file akhir sangat. Anda mungkin mempertimbangkan untuk melakukan hal yang sama.
Cara lain untuk menjaga animasi yang halus tetapi sangat bergaya adalah dengan menggunakan sprite. Google menggunakan pendekatan ini untuk hal-hal seperti animasi logo . Contoh hebat lainnya adalah situs web lama Alexander Engzell yang memiliki animasi tipografi yang sakit menggunakan pendekatan ini. Ini optimal ketika GIF terlalu besar tetapi Anda tidak perlu banyak interaksi.
Saya juga melihat animasi JavaScript yang sangat menarik yang menyerupai sprite atau GIF yang digunakan oleh Google (arahkan gambar Chrome di kiri atas - ini membutuhkan Chrome) tetapi menggunakan topeng animasi sebagai gantinya. Saya menduga mereka menggunakan pendekatan ini untuk membatasi ukuran file total.
Kami telah memperoleh kemampuan hebat terkait video dalam beberapa tahun terakhir. The <video>elemen membiarkan ini kami menyesuaikan cara kita berinteraksi dan menggunakan video tidak seperti sebelumnya. Sekarang kita dapat menggunakan video latar belakang layar penuh dengan mudah dan melakukan hal-hal seperti pergi bingkai demi bingkai pada scroll . Saya juga memperhatikan bahwa FaceBook menggunakan video untuk beberapa animasi sederhana ketika menyambut pengguna di feed mereka di sekitar acara khusus. Keuntungannya adalah ia dapat dikompres ke ukuran file yang cukup kecil dan dapat melakukan berbagai animasi yang lebih luas (apa pun yang dapat dilakukan oleh perangkat lunak pengeditan video). Dengan demikian, jika seseorang dapat membuat video yang sakit maka cukup mudah untuk mengubahnya menjadi tambahan halaman web yang fantastis.
Jelas, video tidak bagus untuk sebagian besar animasi di web (mis. Transisi tombol, dll.), Jadi jangan gunakan di mana-mana.
Dengan semua ini dikatakan, jika Anda ingin animasi dihasilkan secara dinamis, ketika Anda membutuhkan lebih dari interaksi yang benar-benar dasar, ketika Anda ingin membuat lingkungan 3D, dan dalam banyak kasus lain, GIF, sprite, atau video tidak akan potonglah. Setelah ini diputuskan, ada beberapa opsi lain, yang terbaik tergantung pada animasi dan kebutuhan Anda.
Saya tidak memiliki statistik, tetapi sebagian besar animasi web yang saya lihat menggunakan Canvas . Kanvas bagus untuk digunakan karena kinerjanya dan fleksibilitas dalam kreasi. Hanya menggunakan satu elemen browser (DOM) karena fakta bahwa itu hanya melukis - seperti pada kanvas nyata - hal-hal di atas satu sama lain Dengan melacak apa yang dilukis dan di mana dengan JavaScript, kita dapat membuat beberapa animasi dan bahkan game yang sangat mengagumkan.
Namun, kelemahan utama untuk menggunakan Canvas adalah kesulitan relatif untuk skala. Seringkali, tergantung pada animasi tentu saja, lebih sulit untuk membuat animasi Canvas responsif daripada menggunakan cara lain. Kelemahan lain adalah memiliki banyak konten di Kanvas tidak terlalu SEO friendly karena elemen kanvas tidak dapat dijelajahi (Anda dapat mengatasi ini dengan meletakkan beberapa HTML konten yang tersembunyi secara visual jika berlaku). Pada catatan yang sama, hal-hal seperti pemilihan teks untuk pengguna sulit dengan Canvas (terutama tanpa menggunakan perpustakaan seperti CreateJS).
Penggunaan utama Canvas adalah orat - oret Google , yang sering dilakukan dalam Canvas. Ketika mereka memiliki game atau animasi interaktif, mereka menggunakan Canvas setiap kali saya melihatnya. Jika tidak ada interaksi, mereka akan menggunakan GIF atau sprite.
Ada banyak perpustakaan hebat untuk membantu bekerja dengan Canvas dengan lebih mudah, meskipun itu jelas tidak diperlukan tergantung pada apa yang perlu dilakukan. Di antara yang dibuat hanya untuk Canvas adalah CreateJS (yang dapat Anda ekspor ke dari Animate CC), Pixi.js , PaperJS , KineticJS , dan FabricJS (ditempatkan sesuai dengan kesan saya terhadap mereka). Plugin After Effects bernama Lottie (sebelumnya BodyMovin) juga dapat mengekspor ke Canvas (atau SVG [1] ) dan memiliki mesin animasi build.
Tentu saja, Anda juga dapat memasangkan perpustakaan animasi yang lebih besar seperti GSAP dengan Kanvas dengan mudah. Untuk sesuatu yang sedetil ilustrasi yang Anda tautkan saya sarankan menggunakan beberapa jenis kerangka kerja, tetapi untuk banyak hal itu tidak benar-benar diperlukan, hanya berguna - terutama jika Anda sudah tahu cara menggunakan salah satunya.
Cara lain yang sangat kuat untuk menghidupkan berbagai hal di web dengan cara yang mudah responsif adalah dengan menggunakan SVG ( Scalable Vector Graphics ). Mereka memenuhi tujuan mereka - menjadi vektor yang dapat diskalakan - dengan baik. Banyak yang merasa menggunakan SVG membingungkan pada awalnya, tetapi kebanyakan hal seperti sistem koordinat dan transformasi SVG memiliki artikel hebat yang menjelaskannya.
Salah satu dari banyak hal indah tentang SVG adalah bahwa ia dapat dianimasikan dengan JavaScript, CSS murni (termasuk :hoverstatus, transforms, transitions, dan animations), atau animasi SMIL (cara "asli" untuk menghidupkan berbagai hal dengan SVG - tetapi IE tidak t mendukung sama sekali dan itu secara bertahap disusutkan ). Saya sarankan mencoba menggunakan CSS terlebih dahulu dan kemudian JavaScript setiap kali itu tidak (relatif) sederhana di CSS. Untuk morphing elemen SVG, praktis diperlukan untuk menggunakan alat seperti plugin MorphSVG GSAP kecuali Anda baik-baik saja dengan hanya dukungan parsial, dalam hal ini SMIL mungkin dapat diterima.
Karena elemen SVG bisa dalam bentuk apa pun, mereka dapat digunakan untuk membuat beberapa efek keren . Sarah Drasner membuat beberapa tolok ukur kinerja bermanfaat tentang animasi SVG yang menunjukkan cara-cara menjiwai SVG mana yang paling bijaksana.
Bergantung pada animasi (dan kebutuhan dukungan browser), perpustakaan seperti Snap.svg atau GSAP mungkin berguna, tetapi sering kali CSS dan, jika diperlukan, hanya sedikit JS khusus yang diperlukan. Dengan itu, plugin After Effects yang disebut Lottie (sebelumnya BodyMovin) dan ekstensi Flash yang disebut Flash 2 SVG dapat sangat membantu untuk membuat animasi SVG.
Untuk lebih detail, lihat posting terkait ini khusus pada animating elemen SVG.
PS Sebaiknya gunakan SVG dalam <object>tag atau disematkan langsung dalam <svg>elemen XML jika interaktif dan sebagai gambar latar belakang jika tidak interaktif, tetapi ada cara lain untuk melakukannya.
Dalam pengalaman saya, animasi dan transisi CSS terutama harus digunakan untuk elemen UI dan transisi dan animasi dasar lainnya. Bahkan kemudian, kadang-kadang menggunakan perpustakaan animasi JS seperti GSAP atau Velocity.js untuk animasi / transisi UI sesuai. Itu benar-benar tergantung pada jenis perilaku yang Anda inginkan dan apakah itu nyaman untuk dilakukan dalam CSS.
Meskipun kami dapat membuat hal - hal gila dengan CSS murni, umumnya lebih sulit untuk membuat ilustrasi rumit seperti yang Anda berikan sebagai contoh menggunakan CSS, bahkan ketika memanipulasi gambar sebagai tambahan. Animasi CSS yang kompleks sering kali lebih sulit untuk dijaga daripada rekan-rekan JavaScript mereka juga. Kelemahan lainnya adalah bahwa animasi CSS sulit untuk diubah dengan JavaScript dan tidak berfungsi dengan baik jika dicampur dengan JavaScript.
Dengan itu, interaksi sederhana menggunakan transisi dan animasi biasanya harus menggunakan CSS; Anda harus default untuk itu. Untuk mulai mempelajari cara menghidupkan menggunakan CSS, lihat pengantar saya untuk animasi web .
Anda juga dapat menemukan animasi yang bermanfaat dan fungsi pelonggaran di perpustakaan seperti Animate.css yang dapat Anda tarik dan tambahkan ke proyek Anda sendiri. Anda hampir tidak akan membutuhkan seluruh perpustakaan, hanya mengambil bagian yang Anda inginkan.
Animasi JavaScript berbasis DOM cukup mudah. Mereka memiliki reputasi buruk karena perpustakaan animasi yang mengerikan seperti jQuery animate(), tetapi mereka dapat berkinerja tinggi, terutama ketika menggunakan API animasi web (dibahas di bawah), atau perpustakaan animasi khusus seperti GSAP , Velocity.js , atau mo.js ( GSAP bahkan memiliki plugin khusus untuk menggantikan jQuery .animatesecara khusus). Menggunakan perpustakaan seperti itu, mereka sering dapat mengungguli jenis animasi lain untuk animasi yang lebih intensif, seperti menjiwai banyak elemen.
Alasan utama mengapa Anda perlu menggunakan animasi berbasis DOM adalah jika Anda memiliki banyak animasi pengguna atau jadwal rumit yang melibatkan elemen DOM yang sudah dibuat. Seringkali yang terbaik adalah mencoba dan menggunakan sesuatu seperti Canvas di atas DOM karena alasan yang telah ditentukan.
Perpustakaan seperti GSAP mari kita lakukan hal-hal gila seperti memperlambat animasi saat melayang dengan melacak matriks animasi. Dengan cara ini, animasi berbasis DOM dapat lebih dikustomisasi dan interaktif daripada bentuk animasi lainnya jika dilakukan dengan baik. Satu-satunya sisi buruknya adalah kadang-kadang, tergantung pada bagaimana itu dibangun dan apa yang perlu dilakukan, itu tidak akan berkinerja baik.
WebGL adalah cara untuk membuat terutama karya 3D. Ini memiliki beberapa proyek luar biasa yang harus Anda periksa. Jelas itu tidak digunakan pada setiap halaman web, tetapi penting untuk disebutkan.
Ini benar-benar menjiwai elemen DOM untuk membuat lingkungan 3D (dan 2D) yang mengagumkan karena potensi yang dimilikinya. Saat menggunakan pustaka, WebGL kembali menggunakan Kanvas tetapi masih tidak memiliki dukungan yang besar pada ponsel dan dapat berkinerja berat. Secara umum, cukup jelas kapan Anda perlu menggunakan WebGL atau tidak.
Dari pengalaman saya, menggunakan perpustakaan WebGL praktis diperlukan. Untungnya ada beberapa yang bagus. ThreeJS adalah yang paling umum yang pernah saya lihat diikuti oleh PixiJS . Kerangka kerja WebGL seperti A-Frame juga dapat membuat mengambilnya dan membuat hal-hal dasar cukup mudah.
The web animasi API merupakan upaya untuk membakukan bagaimana animasi diimplementasikan dan dipelihara di browser dipasangkan dengan perbaikan kinerja. Ini dimaksudkan untuk digunakan dengan elemen DOM termasuk SVG. Ini menyerupai bagaimana animasi CSS terstruktur (dalam bentuk pencarian JS) tetapi menambahkan kemampuan seperti garis waktu dan peningkatan kinerja.
Ini meningkatkan kinerja dengan menempatkan animasi pada utas komposer (untuk lebih jelasnya lihat posting hebat ini pada subjek). Untuk pengantar cara menggunakannya, lihat dokumen Mozilla atau pos pengantar ini .
Anda mungkin bertanya, " Apakah ini akan menggantikan perpustakaan animasi JavaScript? " Jawabannya adalah " Semoga beberapa ". Ini bermanfaat bagi semua orang untuk meningkatkan mesin animasi browser asli dan, seperti yang terjadi, beberapa perpustakaan animasi yang kurang kuat akan menjadi tidak berguna. Dengan demikian, perpustakaan animasi yang lebih kuat masih akan memiliki manfaat tambahan seperti yang dicatat GSAP . Apakah Anda memerlukan perpustakaan atau tidak begitu WAAPI didukung secara luas masih ditentukan oleh kebutuhan Anda.
WAAPI saat ini tidak memiliki dukungan yang baik tetapi dapat digunakan dengan polyfill dalam produksi hari ini. Sepertinya akan terus menjadi lebih baik dan mendapatkan lebih banyak dukungan.
Hindari menggunakan properti yang tidak memiliki kinerja atau menyebabkan reflows / repaints .
Hindari menjiwai banyak elemen pada halaman karena mereka lebih intensif dan juga bisa menyusahkan untuk berubah nanti.
Saat menggunakan CSS, gunakan transitionanimasi berlebihan jika memungkinkan (sesuai alasan). Mereka berkinerja lebih baik dan umumnya lebih mudah untuk dikerjakan.
Gunakan will-changeproperti secara cerdas pada elemen besar yang akan Anda animasikan sehingga browser tahu sebelumnya. Untuk detail dan saran lebih lanjut tentang hal ini baca sesuatu seperti artikel SitePoint ini pada subjek.
Hindari setIntervaldan requestAnimationFramepilih ketika melakukan penentuan waktu dalam JavaScript (perpustakaan animasi yang bagus seperti GSAP melakukan ini untuk Anda jika Anda menggunakan garis waktu mereka).
Ketika Anda bisa, gunakan API animasi web karena memiliki kemampuan untuk menghidupkan dengan metode lain dalam JavaScript yang tidak dimiliki.
Anda tidak boleh menjalankan Flash di produk akhir . Animasi JavaScript berkinerja lebih baik, lebih dinamis, lebih mudah diedit, tidak memerlukan unduhan apa pun, bekerja di lebih banyak platform (Flash tidak berfungsi pada sebagian besar tablet / ponsel), dan lebih responsif daripada Flash lama yang besar. Mereka juga tidak terlalu mudah diakses dan tidak ramah SEO.
Dengan itu, Animate CC (rebranding Flash) adalah cara yang berguna untuk membuat animasi dan dapat mengekspor ke Canvas menggunakan Create.js .
Biasanya ada beberapa metode yang dapat Anda gunakan untuk membuat animasi. Yang terbaik tergantung pada apa yang ingin Anda lakukan, dan kadang-kadang tidak ada metode yang lebih baik. Sering kali saya menemukan diri saya menggunakan banyak pada proyek yang sama. Yang penting adalah berpikir kritis , untuk memahami dengan tepat bagaimana Anda ingin animasi berperilaku, dan untuk memutuskan metode berdasarkan itu. Ini juga membantu jika Anda sudah bekerja sedikit.
[1] - Lottie juga dapat mengekspor ke Android asli, iOS, dan React Native .
Dalam pengalaman saya, ketika melakukan animasi statis (animasi yang tidak dimaksudkan untuk interaksi dengan pengguna) saya menemukan bahwa yang paling berhasil bagi saya adalah menggerakkan ilustrasi di After Effects dan setelah itu mengekspor hasil akhir ke file .GIF. Ini membuat animasi ini benar-benar ramah browser dan menjamin visualisasi yang identik di perangkat apa pun.
Namun, jika Anda mencari sesuatu yang dapat berinteraksi dengan pengguna, saya percaya Canvas memang cara untuk pergi, dan untuk itu CreateJS tampaknya tepat untuk pekerjaan dengan perpustakaan EaseJS.
Bagaimanapun, menurut contoh Anda, Anda bisa melakukannya dengan file GIF animasi dan mendapatkan hasil yang sama persis.
sumber
Jika Anda bekerja dengan After Effects, Anda dapat menggunakan plug-in Bodymovin . Ini membuat pekerjaan Anda untuk penggunaan seluler dan web. Anda akan memiliki file .json dan lottie.js yang dapat Anda gunakan dalam HTML Anda. Tetapi pertama-tama Anda harus mematikan Izinkan Script untuk Menulis file dan mengakses Jaringan dalam pengaturan umum. Setelah selesai, buka Window , Extensions , dan cari Bodymovin . Pilih komposisi Anda, tetapkan lokasi untuk menyimpan dan klik render. Masukkan file .json dan lottie.js Anda ke HTML dan pekerjaan Anda selesai. Saya pikir GIF bukan solusi terbaik karena perlu lebih banyak waktu untuk memuat.
Anda dapat mengunduhnya di sini: http://aescripts.com/bodymovin Cukup tambahkan harga Anda, atau jika Anda menginginkannya secara gratis, Anda cukup memasukkan $ 0,00 ...
Berikut adalah tutorial untuk menggunakan Bodymovin dan mengatur animasi Anda di situs web Anda dengan Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Jika Anda tahu dasar-dasar HTML dan CSS maka itu akan mudah bagi Anda. Tutorial itu membantu saya, saya harap ini bisa membantu Anda.
sumber