Persiapan dengan platform animasi Greensock

Greensock Animation Platform (GSAP) memungkinkan Anda untuk menghidupkan apa pun yang dapat Anda akses dengan JavaScript termasuk DOM, Canvas dan CSS, serta objek khusus Anda sendiri.

GSAP juga membantu menyelesaikan inkonsistensi browser untuk lebih mudah Pengujian Pengguna (baik hosting web. Dapat membantu di sini juga), memungkinkan Anda menggunakan objek untuk mengelola animasi kompleks, dan berjalan hingga 20 kali lebih cepat dari jQuery. Ini telah menjadi standar dalam industri ini, dan telah digunakan di situs web pemenang penghargaan yang tak terhitung jumlahnya. Punya situs untuk dibangun? Inilah panduan kami untuk yang terbaik Pembangun Situs Web sekitar.

01. Siapkan file HTML dasar

Cara terbaik untuk mempelajari GSAP adalah melihatnya beraksi. Dalam tutorial ini Anda akan belajar tentang fitur utama platform dengan contoh kerja yang dapat Anda gunakan dalam proyek Anda hari ini!

Mulailah dengan menyiapkan file HTML dasar, di mana Anda dapat menjatuhkan kode JavaScript Anda. Sertakan gambar dengan a logo kelas. Anda akan menggunakan GSAP untuk menghidupkan properti untuk melihat cara kerjanya.

 & lt; html lang = "en" & gt;
& lt; head & gt;
  & lt; gaya & gt;
    .logo {lebar: 150px; }
  & lt; / style & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// kode di sini
& lt; / skrip & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Termasuk perpustakaan GSAP

Selanjutnya, Anda harus menambahkan GSAP ke proyek web Anda. Antara Anda & lt; image & gt; dan & lt; script & gt; Tag, masukkan tautan ke perpustakaan GSAP. Anda dapat mengunduh zip langsung dari sini , atau ambil dari Github. (Jika Anda punya file untuk dibagikan, pilih yang sempurna penyimpanan awan ). File juga di-host pada CDN CloudFlare super cepat, jadi cara paling sederhana adalah menggunakan file yang dihosting seperti ini:

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & script & gt; 

03. Animasi dengan Tweening

Tweening adalah proses mengubah nilai dari waktu ke waktu untuk membuat animasi. Misalnya, memindahkan objek dari A ke B, scaling, atau memutarnya. Anda juga dapat men-tween nilai kustom Anda sendiri.

Cara paling sederhana untuk men-tween properti adalah dengan menggunakan Tweenmax.to () fungsi. Ini membutuhkan objek target, durasi dan properti / nilai pasangan yang Anda animasi. Untuk melihat fungsi beraksi, cobalah masing-masing baris kode di bawah ini menggunakan logo sebagai objek target:

 // Tween X Posisi dari saat ini
hingga 400 lebih dari 2 detik
Tweenmax.to (". Logo", 2, {x: 400});
// tween y posisi dari saat ini
hingga 200 dan opacity ke 0, lebih dari 1
kedua
Tweenmax.to (". Logo", 1, {y: 200, opacity: 0});
// tween x dan y ke 100, skala untuk
1.5, dan putar 90 DEG, lebih dari 2
kedua
Tweenmax.to (". Logo", 2, {x: 100, Y: 100, Skala: 1.5, Rotasi: 90}); 

04. Tween dari dan dari keto

Anda dapat men-tween properti dari nilai saat ini ke yang baru menggunakan untuk() , tetapi Anda juga bisa tween dari nilai untuk nilai saat ini. Misalnya, jika Anda logo mulai pada posisi x 0. Dan Anda ingin berakhir di sana, Anda bisa melakukan ini:

 tweenmax.dari (". Logo", 2, {x: 400}); 

Dalam hal ini, logo Anda akan segera pindah ke x = 400. dan kemudian tween ke x = 0. . Anda bahkan dapat mendefinisikan nilai awal dan akhir, mengabaikan nilai saat ini menggunakan dari untuk() seperti ini:

 tweenmax.fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. Mereda

Pelonggaran adalah 'gaya' animasi, sebagai nilai transisi dari A ke B. alih-alih tingkat kecepatan konstan, yang disebut 'linear', Anda dapat menerapkan fungsi dengan kurva kecepatan. Apakah mereka mulai perlahan dan secara bertahap mempercepat? Apakah mereka berhenti tiba-tiba dan bangkit sedikit di akhir? Dalam animasi gaya ini menambah karakter dan emosi pada pekerjaan Anda. Anda dapat menerapkan fungsi pelonggaran seperti ini:

 tweenmax.to (". Logo", 2, {x: 100, y: 100, rotasi: 90, kemudahan:}); 

06. EMPERING FUNGSI DAN IN / OUT

GSAP mencakup berbagai fungsi pelonggaran, seperti kembali , melambung , elastis , dosa , circ , dan expo. . Anda mungkin juga memperhatikan bahwa meredakan Fungsi memiliki properti easeIn , yang kami gunakan dalam langkah di atas. Anda juga bisa menggunakan easeout. dan EASINOUT. . Ini menunjukkan di mana kurva pelonggaran diterapkan dalam animasi. Cobalah yang berikut untuk melihat hasilnya:

 // Esuding dengan bouncing
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotasi: 90, kemudahan: bouncing.);
// mereda masuk dan keluar dengan elastis
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotasi: 90, kemudahan: elastis.); 

07. Menunda tween

Kadang-kadang Anda ingin menunda dimulainya animasi, baik untuk menyinkronkannya dengan animasi lain, atau untuk membuatnya menunggu suatu peristiwa terjadi. Anda dapat menggunakan properti khusus satu GSAP yang disebut menunda untuk melakukan ini. Cobalah kode berikut untuk melihat bagaimana Anda dapat menunda remaja untuk waktu tertentu:

 tweenmax.to (". Logo", 1, {y: 100, kemudahan: bouncing.easeout});
// tunda tween ini sebesar 1 detik
Tweenmax.to (". Logo", 1, {rotasi: 90, kemudahan: circ.easeout, delay: 1}); 

08. Fungsi panggilan balik

Untuk mengintegrasikan animasi dengan kode Anda, penting untuk mengetahui kapan peristiwa terjadi, terutama ketika animasi berakhir atau dimulai. Anda dapat menggunakan diComplete. panggilan balik acara untuk ini. Anda mungkin ingin tahu kapan dua belas mulai, menggunakan Onstart. . Dan Anda juga mungkin ingin menyinkronkan tween Anda dengan animasi lain, atau menggunakan tween dan pelonggarannya untuk memperbarui beberapa objek khusus lainnya. Menggunakan onupdate. panggilan balik untuk ini. Inilah cara Anda menggunakan panggilan balik:

 tweenmax.to (". Logo", 1, {
Y: 100,
Kemudahan: Bouncing.
OnComplete: Tweencomplete.
});
Fungsi Tweencomplete () {
konsol.log ("tween selesai");
} 

09. Parameter panggilan balik

Saat menembakkan panggilan balik, Anda mungkin ingin meneruskan informasi bersama dengan panggilan balik ke fungsi yang menanganinya. Anda mungkin perlu meneruskan informasi tentang penelepon atau nilai tertentu. Ini memungkinkan Anda untuk mengintegrasikan animasi Anda dengan sisa basis kode Anda. Semua parameter dilewatkan melalui CALLBACK + "PARAMS" , itu adalah onupdateParams. .

Dalam contoh berikut, Anda dapat melacak kemajuan tween menggunakan kata kunci {diri} dan dapat melihat cara meneruskan beberapa parameter menggunakan array:

 tweenmax.to (". Logo", 1, {
Y: 100,
Kemudahan: Bouncing.
onupdate: tweenupdate,
onupdateParams: ["{diri}",
"lengkap"]
});
fungsi tweenupdate (tween,
pesan) {
Persentase var = tween.
Kemajuan () * 100; // kemajuan()
adalah nilai 0-1
konsol.log (persentase +
"" + Pesan);
} 

10. Mengontrol animasi

Oke, jadi Anda sekarang dapat membuat tweens dan meringankan remaja, panggilan balik dan parameter api. Tetapi bagaimana Anda mengontrol animasi? Seringkali Anda ingin memulai atau menghentikan mereka berdasarkan peristiwa lain.

Jika Anda perlu menghentikan animasi, Anda dapat menggunakan berhenti sebentar() metode. Jika Anda ingin melanjutkan tween, gunakan lanjut() . Untuk benar-benar menghancurkan penggunaan tween membunuh() . Cobalah yang berikut ini dan lihat apa yang terjadi:

 // var untuk menahan referensi ke tween
var tween = tweenmax.to (".
Logo ", 2, {y: 100, kemudahan: Bouncing.
easoutout});
// jeda Segera
tween.puse ();
// mulai dari acara
SetteOut (fungsi () {tween.
resume ()}, 1000);
// Balikkan animasi pada acara
SetteOut (fungsi () {tween.
membalikkan ()}, 3000); 

11. CSS dan CSSplugin

CSSplugin disertakan saat Anda menggunakan Tweenmax. . Ini adalah penghemat waktu yang besar, dalam hal itu menormalkan perilaku di browser dan mendeteksi otomatis ketika diperlukan untuk animasi. CSSplugin dapat menangani dua belas warna, animasi SVG dan kinerja yang dioptimalkan dengan caching dan trik internal lainnya - dan seringkali lebih efisien untuk menerjemahkan posisi melalui CSS.

Anda telah melihat ini beraksi ketika Anda menggunakan kegelapan dan posisi animasi. Ini berfungsi tanpa pengkodean khusus!

12. 2D dan 3D Transforms

Transformasi CSS memungkinkan Anda untuk skala, memutar translate dan miring. Mereka bekerja di 2D dan 3D untuk membuat efek indah dengan cepat. GSAP termasuk properti transformasi bawaan seperti x. , Y. , rotasi , Rotasix. , rotasi. , skewx. dan skala . Coba oleskan tween berikut ke gambar Anda, bukan yang sudah kami coba:

 tweenmax.to (". Logo", 3, {
X: 100,
Y: 100,
Skala: 1.5,
Rotasi: 360,
Kemudahan: Bounce.easeout}); 

13. Timeles.

Setelah Anda bergerak melampaui satu atau dua remaja, Anda mungkin bertanya-tanya bagaimana mengelola beberapa animasi. GSAP termasuk A. linimasa objek untuk melakukan hal itu. Anda menambahkan tweens ke linimasa objek dan dapat menggunakan posisi parameter setelah tween ke waktu mereka. Anda dapat memiliki Ruang Tweens satu demi satu, atau memiliki celah, atau bahkan tumpang tindih dengan mereka. Tambahkan beberapa gambar lagi ke HTML Anda dengan kelas logo2. dan logo3. masing-masing.

Untuk melihat cara kerjanya, cobalah yang berikut ini linimasa kode:

 // Buat instance timeline
var tl = timelinemax baru ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}))));
// perhatikan "0" final untuk membuat
Yang ini dimulai pada 0 detik.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// perhatikan "+.25" untuk membuat ini
satu mulai dari 0,25 detik
tl.add (tweenmax.to (". logo3", 1,
{Rotasi: 180, Y: 50,
X: 50}), "+. 25"); 

14. Kontrol Timeline.

Serta mengontrol animasi, Anda mungkin ingin mengontrol jadwal juga. Untungnya, Anda dapat menjeda, melanjutkan dan mundur sama seperti Anda bisa dengan animasi. Anda juga dapat menambahkan parameter ke timeline ke ulang , yoyo. dan tambahkan panggilan balik untuk seluruh timeline. Anda juga dapat mengontrol kecepatan timeline menggunakan Timescale. Properti. Coba ganti deklarasi timeline Anda dengan kode berikut untuk melihat cara kerjanya:

 var tl = timelinemax baru ({
// ulangi tanpa batas
Ulangi: -1,
YOYO: BENAR,}); 

15. Dapatkan dan atur properti

Satu fitur yang benar-benar berguna adalah mendapatkan dan mengatur properti remaja dan jadwal. Dengan begitu, Anda bisa mengetahui kemajuan dan durasi keseluruhan, atau mengumpulkan informasi lain, tentang objek GSAP. Dalam contoh kode ini Anda bisa Dapatkan durasi timeline, dan kemudian set durasinya untuk mengubahnya. Ini berfungsi sama untuk Rweens juga. Ini cara lain yang bagus untuk bereaksi secara real time untuk acara, dan memodifikasi animasi dengan cepat. Tambahkan berikut ini setelah kode timeline Anda sebelumnya:

 // Dapatkan durasi saat ini
timeline.
consol.log (tl.duration ());
// menetapkan durasi ke 5 detik
Setelah menunggu 2 detik
SUDAHOUT (FUNGSI () {
TL.Duration (5);
}, 2000); 

Artikel ini awalnya diterbitkan dalam desainer Web Majalah Desain Web Kreatif. Beli Masalah 279. atau langganan .

Baca lebih lajut:

• Animasi SVG SuperCharge dengan GSAP
• Ekspor Animasi Efek ke HTML5
• Cara membuat animasi yang skala untuk semua perangkat