App Roh: Mudah Realtime animasi untuk Web

() translation by (you can also view the original English article)

Timeline kontrol penuh, impor & ekspor JSON, memeriksa animasi, antarmuka intuitif, hidup pengeditan, mudah untuk memahami API, ditujukan pada kecepatan, dan umpan balik realtime: segala sesuatu yang Anda inginkan dalam grafis pengguna antarmuka ketika menciptakan dan mengelola web animasi. Dalam artikel ini kita akan mengambil melihat perangkat terbaru yang tersedia untuk web Animator disebut Roh oleh Patrick Brouwer. Kita akan mempelajari bagaimana itu dapat mengubah cara Anda membuat animasi di web. Mari kita menghidupkan!

Bangun dan berjalan

Roh adalah resep tiga bagian, memerlukan:

Aplikasi desktop (timeline).
Runtime (JavaScript file).
Sebuah ekstensi browser yang memungkinkan Anda untuk terhubung ke setiap halaman web dengan berkomunikasi antara app dan runtime.

Aplikasi desktop adalah GUI (grafis antarmuka pengguna) untuk membuat dan mengelola animasi Anda, sementara ekstensi browser menciptakan hubungan antara aplikasi desktop yang sesuai dan halaman web Anda.

App saat ini tersedia untuk Mac, tetapi akan tersedia untuk Windows dan Linux di masa depan sangat dekat. Ekstensi browser Roh adalah benar-benar Chrome saat ini, tapi kompatibel ekstensi untuk browser lain utama (Firefox, Opera dan Safari) sedang dalam pengembangan.

Ketika setiap komponen yang diperlukan di tempat Anda dapat memulai pengembangan animasi Anda. Membuka aplikasi, arahkan ke URL halaman web yang dikehendaki menggunakan browser Anda, mengaktifkan ekstensi dan mulai menghidupkan!

Tips untuk mengembangkan lokal

Jika Anda ingin untuk menghidupkan halaman web dari sistem file lokal Anda, pastikan untuk beralih kotak centang Bolehkan akses ke file URL di pengaturan ekstensi chrome.

spirit browser extension file access url check box setting

Sebaiknya Anda menambahkan data-Roh-id untuk setiap elemen yang ingin menghidupkan ketika mengembangkan lokal.

<!--first group-->
<div data-spirit-id="foo">…</div>

<!--second group-->
<ul data-spirit-id="bar">…</ul>

Ini membuatnya lebih mudah untuk menggunakan GUI untuk mengedit elemen timeline dan juga membuat lebih mudah untuk runtime untuk memilih target Anda tanpa menggunakan elemen berbasis CSS penyeleksi (misalnya body > div > div > ul).

Pemain Runtime

Roh menggunakan apa yang disebut "runtime (player)'. Jika halaman web yang Anda kunjungi memiliki runtime Roh tidak, ekstensi browser akan otomatis menyuntikkan runtime sementara untuk Anda. Runtime adalah hanya file JavaScript (~ 10kb), sehingga setiap kali Anda mendengar istilah "runtime" katakan kepada diri sendiri "JavaScript file".

1	<script src="spirit.js"></script>

Runtime memungkinkan Anda untuk bermain animasi langsung pada halaman web Anda dan memanfaatkan kekuatan dari GSAP untuk semua pemutaran animasi. Itu berarti Anda dapat menggunakan GSAP-sifat khusus serta plugin seperti drawSVG atau morphSVG, bersama dengan strategi lain menghidupkan masih dalam pengembangan (WAAPI).

Runtime tersedia melalui sumber terbuka jika Anda ingin menyumbangkan waktu untuk membantu mempertahankan atau meningkatkan. Jika Anda memilih untuk menginstal runtime player sebagai sebuah paket NPM Anda dapat mengetik install perintah npm menginstal spiritjs--menyimpan dari terminal Anda, atau Anda dapat memberikan benang mencoba menggunakan benang perintah menginstal mereka menambahkan spiritjs.

Inspektur Timeline

Apakah Anda seorang penyemangat web yang mencari sebuah timeline yang mudah untuk mengontrol, menavigasi dan digunakan? Roh telah Anda kembali, dengan antarmuka yang elegan dan intuitif menyediakan banyak pilihan untuk menyempurnakan kreasi Anda. Timeline dapat menggosok dan keyframes ditambahkan dengan mudah. Namun, menyortir elemen, adalah fitur yang menunggu untuk diimplementasikan. Jika Anda berkembang dalam real-time, elemen dapat ditambahkan atau dihapus yang diperlukan. Ketika pekerjaan Anda selesai, klik tombol kembali, ekspor file JSON yang mengandung kemajuan Anda, dan beban menggunakan Roh runtime API ketika diinginkan.

Keyframe masing-masing dapat melakukan fine-tuned waktu dan mengurangi. Menambahkan dan menghapus mereka sangatlah mudah. Unsur-unsur vertikal tercantum dalam Inspektur timeline dan masing-masing memiliki sendiri timeline.

Nilai untuk menghidupkan setiap properti bisa apa saja yang menerima runtime. Itu bahkan dimungkinkan untuk menggunakan kode JavaScript sebagai nilai yang berlalu, memproduksi elemen-elemen yang dinamis dan fleksibel menggunakan mouse peristiwa, bergulir dan posisi deteksi untuk nama hanya beberapa. Pastikan untuk membungkus Anda logika JavaScript untuk nilai properti dengan kurung kurawal seperti {window.innerWidth - this.clientWidth}.

Setiap elemen dapat memiliki banyak sifat-sifat berbeda yang tersedia untuk menghidupkan termasuk properti SVG tertentu yang berhubungan dengan stroke, mengisi, warna, posisi dan ukuran. Anda bahkan dapat memilih klip-jalan, filter, kotak-bayangan dan z-index untuk menghidupkan. Custom properti dapat ditambahkan juga, jika default yang disediakan tidak sesuai dengan kebutuhan Anda. Pastikan custom properti berlalu dalam diselaraskan dengan nama properti CSS yang didokumentasikan oleh spesifikasi W3C.

Pemahaman "kelompok"

Kelompok animasi adalah koleksi benda (elemen HTML) yang ingin Anda menghidupkan. Pikirkan kelompok sebagai "komponen" dimana masing-masing memiliki kemampuan untuk dapat diekspor sebagai JSON.

Anda dapat membuat sebagai banyak kelompok-kelompok seperti yang akan Anda dan memiliki kontrol atas setiap satu dari mereka. Buat grup baru mudah dan menambahkan elemen baru dengan memilih masing-masing langsung dari halaman web Anda, atau melalui panel elemen di Chrome Devtools. Ketika elemen ditangkap tidak memiliki atribut data-Roh-id yang satu-satunya rujukan yang memiliki adalah XPath (relatif ke akar dipilih) jadi terbaik untuk menciptakan atribut referensi ketika pengembangan produksi panggilan.

var tl = new TimelineMax()

spirit.setup().then(() => {

    spirit.load('./my-animations.json').then(groups => {
  	// construct all groups
		groups.construct();

		// control the firing sequence of each group using GSAP
		tl.add(groups.get('group-name'), 0).add(groups.get('group-anothergroupname'), '-=0.25').add(groups.get('group-yetanothergroupname'), '+=0.125')

	})

});

Grup adalah benar-benar hanya koleksi jadwal GSAP jadi jika Anda telah menjadi pengguna GreenSock ini akan menjadi tambahan menyambut alur kerja dan tooling. Kelompok tidak dapat dikontrol sekaligus menggunakan aplikasi desktop (permintaan fitur masa depan), tapi masalah dapat dikurangi dengan menggunakan Roh advanced API sebagai runtime yang memanfaatkan API GSAP untuk contoh timeline tercermin dalam kode di atas. Anda juga dapat memeriksa demo ini dibuat oleh pembuat Roh, menampilkan penggunaan master urutan waktu dengan kontrol UI dan beberapa kelompok:

API Roh

Seperti yang dibahas dalam penjelasan saya sebelumnya yang berkaitan dengan kelompok, Roh memiliki API untuk pengembang yang memerlukan kontrol lebih dalam. Ada dua api yang disediakan; API sederhana dan advanced API.

spirit.loadAnimation({
  container: element, // dom element that contains animation
  loop: true,
  yoyo: true,
  delay: 2
})

Sementara advanced API memungkinkan pengendalian luas, API sederhana dapat mencakup tugas-tugas seperti mengontrol pemutaran melalui serangkaian pilihan. Anda bahkan dapat kembali nilai-nilai, kelompok-kelompok beban dan menambah interaktivitas.

1	spirit.setup()

Advanced API adalah semua tambahan Anda membutuhkan di luar API sederhana. Sebelum Anda dapat menggunakan API maju Anda harus memberitahu runtime di mana ia dapat menemukan contoh-contoh GSAP Tween dan Timeline. Setelah panggilan Roh setup metode di tempat, gerbang banjir akan terbuka memberikan Anda kemampuan untuk melakukan hal-hal seperti konstruksi timeline dan referensi, interaktivitas, keyframe properti referensi dan banyak lagi.

Perpisahan pikiran

Menjaga hal-hal di sync penting, terutama untuk semangat untuk menjalankan secara efektif. Roh aplikasi desktop auto update sendiri di latar belakang, sehingga Anda akan selalu memiliki versi terbaru yang diinstal dan fitur terbaru di ujung jari Anda. Oleh otomatis memperbarui aplikasi Roh, lebih mudah untuk iterate dan mengimplementasikan fitur-fitur baru sepanjang jalan. Ekstensi Chrome juga diperbarui di latar belakang. Setiap beberapa jam, browser akan memeriksa apakah ekstensi diinstal atau aplikasi apapun memiliki URL pembaruan. Untuk masing-masing, itu membuat permintaan ke URL mencari sebuah file XML nyata yang diperbarui.

Pergi ke chrome://extensions dan centang kotak centang modus pengembang di bagian kanan atas, lalu tekan Update ekstensi sekarang tombol. Dengan memastikan konfigurasi ini adalah tempat Roh dapat beroperasi tanpa menyebabkan perilaku yang tidak terduga sebagai fitur baru dan update data ditambahkan.

Jika Anda ingin untuk mengawasi pada fitur-fitur baru dan kemajuan dengan semangat Anda dapat sign up untuk newsletter mereka di sini dan juga mengikuti kemajuan di kegugupan dalam Twitter. Roh pasti adalah alat yang akan mengubah cara Anda membuat animasi untuk web.