Tutorial hari ini adalah yang akan meninggalkan rasa terkesan dimana kamu menulis begitu sedikit code untuk mencapai animasi yang menakjubkan. DrawSVG oleh kelompok cerdas menakjubkan di GreenSock membolehkanmu untuk menampilkan (atau menyembunyikan) secara progresif goresan sebuah SVG. Mari periksa bagaimana cara kerjanya dengan membuat sebuah preloader bergerak.
Apa Yang Dilakukan DrawSVG?
Seperti yang disebutkan, plugin DrawSVG akan memberimu kekuatan untuk menampilkan (atau menyembunyikan) goresan sebuah SVG, namun itu juga dapat membuat animasi keluar dari pusat goresan (atau posisi / segmen apapun). Ini apa tepatnya yang akan kita lakukan dalam latihan mendatang.
DrawSVG adalah bagian dari GreenSock Animation Platform (GSAP) dan dapat digunakan dalam animasi TweenLite, TweenMax, TimeLineLite atau TimelineMax apapun. Semua fitur populer dalam GSAP (runtime control, callback, kemudahan, manajemen overwrite, nesting) akan berkerja dengan animasi SVG indahmu juga! *adu tinju*
Mendapatkan Copy DrawSVG
Akses ke DrawSVGPlugin ditambah dokumentasi dan dukungan memerlukan sebuah Keanggotaan Club Greensock. Pada waktu penulisan artikel ini biayanya dimulai dari $50 hingga $150 per tahun tergantung pada jenis keanggotaan.
Coba DrawSVGPlugin Secara Gratis di Codepen!
Ada versi khusus DrawSVGPlugin dan berfungsi penuh ditautkan dari dalam GreenSock’s DrawSVGPlugin Codepens, jadi silahkan coba periksa, tambahkan sendiri grafis SVGmu, dan mencoba DrawSVGPlugin.
Catatan: versi khusus plugin ini hanya akan berkerja pada domain CodePen.
Membangun Loader
Code yang mengikuti mewakili semua yang kita perlukan untuk membuat loader SVG ini berkerja!
Kamu akan menemukan render demo dalam browser manapun yang mendukung SVG (dukungan yang cukup solid jika kamu mengabaikan IE8 dan sebelumnya). Kamu dapat juga melihat demo Filler Loader pada CodePen.
Di dalam index.html terdapat sebuah tag <svg> sederhana yang berisi tag <circle>. Terdapat dua atribut yang terpasang pada <circle> yang membantu memposisikan di dalam kotak bounding (persegi hitam). Dua atribut ini adalah cx dan cy dan posisi lingkaran di dalam viewBox pada elemen <svg>.
Kamu dapat melihat bagaimana sistem ini berkerja dalam gambar yang mengikuti. Nama pertama seri mewakili <circle> tanpa atribut apapun, frame kedua menambahkan cx="50" dan frame terakhir menambahkan cy="50". Nilai x dan y pada atribut ini mengacu kepada sistem koordinat kartesius yang memposisikan bentuk pada bidang horizontal dan vertikal.
Atribut terakhir (r) pada circle mengatur radius lingkaran kita atau, dengan kata lain, panjang dari titik pusat lingkaran ke tepi kotaknya. Silahkan menyesuaikan nilai dalam demo CodePen saya untuk melihat hasil saat nilai diubah.
Styles
Sekarang untuk beberapa styles.
1
.filler-loader{
2
height:32px;
3
width:32px;
4
transform:rotate(-90deg);
5
}
6
7
.fill-path{
8
fill:none;
9
stroke:white;
10
stroke-linecap:butt;
11
stroke-width:8px;
12
}
Contoh khusus ini memiliki styling yang sangat minimal. Kita menentukan beberapa hambatan seperti width dan height (32x32), kemudian class .fill-path adalah apa yang memberikan path tampilannya dengan mengatur beberapa properti SVG yang tersedia untuk kita dalam tanah CSS. Kita memberikan path sebuah lebar, warna, dan jenis goresan akhir. Jenis akhir untuk demo ini diatur ke butt dan secara lengkap membuat kotak pada titik akhir path.
Sekarang kita dapat memutar lingkaran -90deg (berlawanan jarum jam). Kamu dapat melihat mengapa pada layar berikut menangkap di bawah. Gambar di kiri menggambarkan lingkaran sebelum putaran dan gambar kedua menggambarkan lingkaran setelah rotasi.
JavaScript
Sekarang untuk membuatnya berkerja.
1
varloader=newTimelineMax({repeat:-1}),
2
fill_path=$('.fill-path'),
3
fill_duration=1.2,
4
fill_position='+=.25';// place tween .25secs after end of init tween
Jika kamu belum pernah melihat TimelineMax jangan takut. Kamu dapat membaca lebih lanjut tentang itu di sini sebelum melanjutkan lebih jauh.
Pikirkan TimelineMax sebagai sebuah timeline yang akan kita tambahkan dengan frame kita. Dalam kasus kita memiliki satu timeline tunggal yang mengandung sebuah obyek dengan sebuah key:value yang dipasangkan untuk mengendalikan pemutaran animasi. Pemutaran diatur untuk mengulang, diwakili dengan nilai -1 pada kunci repeat pada pilihan TimelineMax obyek. Karena kita menggunakan jQuery untuk penarikan DOM kita menangkap path dengan menggunakan class .fill-path sebagai sebuah kait. Ini adalah acuan yang akan kita gunakan bagi path saat kita mulai melakukan animasinya.
Baris sisa terakhir pada JavaScript kita adalah dimana sulapnya benar-benar terjadi. Obyek yang berisi drawSVG mulai dengan mengikuti animasi path searah jarum jam dari kosong (drawSVG: '0') menjadi isi (drawSVG: '100%'). Sekarang setelah kita mengisi jalur dalam satu arah kita perlu membalikkan isinya (berlawanan jarum jam). Ini dimana metode to() hadir dan kita telah mengatur drawaSVG ke '100% 100%'. Karena kita mengakhiri pengisian animasi pada 100% kita perlu membalikkan pengisian lainnya ke 100%. Ini menggerakkan pengisian dari dimana pun posisi goresan ke sebuah keadaan dimana goresan itu ada sepanjang jalur. Tada!
Kesimpulan
Seperti yang telah kita lihat DrawSVG sangatlah ringan dan cepat untuk diatur dalam membuat animasi jalur untuk SVG dan menyenangkan untuk dibuat bahkan bagi pengembang pemula. Dengan sangat sedikit pengaturan kita dapat membawa peralatan tempur kita ke project mendatang membuat interaksi dan pengalaman yang menyenangkan.
Jika kamu memiliki pertanyaan silahkan ajukan dalam komentar di bawah. Selamat membuat animasi!
Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
