Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. TimelineMax
Webdesign

TimelineMax: Pengenalan Tweening

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: Understanding the Mechanics
TimelineMax: Controlling Playback With addPause()

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Final product image
What You'll Be Creating

Di masa lalu animasi tweening adalah istilah yang digunakan untuk menggambarkan urutan bingkai oleh bingkai, atau apa yang kadang-kadang disebut sebagai "diantara." Ini adalah tempat yang mana satu gerakan mengarah ke berikutnya untuk membuat satu fluid motion. Bagi mereka yang memiliki rambut abu-abu Anda mungkin ingat Flash; sebuah aplikasi yang menggunakan ini istilah ketika mengacu pada gerakan frame. Mari kita lihat wawasan ke dalam beberapa contoh dan coba hal tweening yang baik ol' fashioned collage.

Tweening dengan TweenMax

Untuk contoh kedua dalam tutorial ini saya akan memuat TweenMax.min.js yang akan memberikan kami akses ke TimelineMax dan semua core tools menakjubkan GSAP yang ditawarkan. Jika Anda berpikir kembali ke primer TimelineMax saya membahas loading TweenMax.min.js seperti itu lebih nyaman, ditambah satu file ini berisi cukup banyak semua yang kita perlukan (juga apa yang direkomendasikan oleh GreenSock 99%).

TweenMax extends TweenLite, menambahkan banyak fitur yang berguna (tapi non-esensial) seperti repeat(), repeatDelay(), yoyo(), updateTo(), dan banyak lagi. TweenMax dibangun untuk kenyamanan, menyediakan satu file JavaScript yang berisi segala semua yang biasanya Anda butuhkan untuk animating elemen DOM. Hal ini pada dasarnya memungkinkan penulis untuk menentukan satu gerakan sedangkan TimelineMax akan menerima dirantai metode untuk menciptakan satu set yang lebih kompleks dari tweens/sequences.

Urutan loader

Loader adalah objek-objek yang diberikan kepada pengguna ketika mereka menunggu proses untuk memuat. Mereka memberi kita kekuatan untuk menjelajahi kecil, berukuran mikro unsur-unsur yang dapat memiliki bahkan sederhana atau kompleks interaksi – ditambah they're ledakan untuk membuat.

Lihat sekilas demo "String of Pearls" ini:

Mari kita memecah urutan untuk pemahaman yang lebih baik ke dalam bagaimana hal seluruh "tweening" ini bekerja.

Untuk membuat urutan ini akan memerlukan untuk menggunakan metode staggerTo. Jika Anda tidak ingat apa method ini maka saya mendorong Anda untuk berhenti tepat detik ini dan membaca tutorial saya tentang mechanics.

Menurut dokumentasi GreenSock's, staggerTo() method:

"tweens array dari target untuk seperangkat nilai-nilai tujuan.

Dalam kasus kami beberapa sasaran yang akan masing-masing dari lingkaran dalam seluruh SVG.

  1. Argumen pertama kami untuk staggerTo akan menerima pemilih kami menggunakan untuk circles (dalam kasus ini circles).
  2. Argumen kedua kami duration (berapa lama animasi akan berakhir).
  3. Argumen ketiga adalah objek literal yang mengandung sifat-sifat yang kita inginkan untuk tween.
  4. Dan argumen terakhir akan mengadakan nilai stagger (jumlah waktu antara awal setiap animasi).

Hal ini akan mengakibatkan hal berikut; dengan asumsi circles berisi tiga objects...

Mempersiapkan Loader

Untuk memulai dengan benar, kita harus mendefinisikan sebuah timeline baru dan beberapa pengaturan untuk konfigurasi kami.

Untuk membuat timeline ini ulangi ke arah sebaliknya saya menggunakan tombol yoyo dan menetapkan nilai ke true. Sekali lagi, ini akan menyebabkan urutan kami untuk bermain dalam arah yang berlawanan setelah animasi mencapai frame berakhir. Memicu animasi akan memerlukan untuk menargetkan setiap circle dalam SVG dan persis mengapa kita akan membutuhkan referensi menggunakan kekuatan jQuery.

Ada sejumlah cara yang dicatat oleh docs untuk lulus penyeleksi (jangan ragu untuk membaca lebih lanjut tentang itu di sini). Untuk contoh ini, saya akan memilih semua circle sekaligus menggunakan jQuery's typical selector syntax. Hal ini juga sedikit lebih cepat untuk menyimpan referensi kami dalam variabel untuk digunakan kembali, maka circles = $('svg circle').

Variabel stagger_options adalah sebuah objek literal yang berisi properti untuk memberikan animasi ini kehidupan. Kita memindahkan objek kami menggunakan tombol y karena GSAP CSSPlugin mengkonversi transform nilai untuk matrix setara dan pada akhirnya kecepatan segalanya bagi kita. Ada daftar seluruh mengubah sifat pendek-tangan yang jauh lebih unggul dan jauh lebih mudah digunakan dibandingkan typical CSS transforms:

GSAP setara dengan CSS properti

CSS GSAP
translateX() x
translateY() y
translateZ() z
Rotate() rotasi
rotateY() rotationY
rotateX() rotationX
scaleX() scaleX
scaleY() scaleY
skewX() skewX
skewY() skewY

Kami juga dapat mengontrol untuk mengurangi (merasakan animasi) dan lulus dalam berbagai jenis gerakan. Bagi pecinta visual di luar sana Anda dapat periksa visualizer oleh GreenSock untuk mendapatkan pemahaman yang lebih baik ke berbagai memudahkan tersedia.

Bagian akhir untuk pembuatan ini adalah melampirkan method staggerTo ke timeline kami dan memasukkan variabel didefinisikan sebelumnya dan dalam urutan yang benar untuk method ini tertentu (elements, duration, options, jumlah stagger).

Chaining Tween kedua

Jika Anda tidak sabar untuk membuat urutan lain setelah urutan stagger selesai Anda pasti bisa chain method lain seperti fromTo:

Melanjutkan

Mari kita mencoba dengan SVG saya sebut "Polyman." Baru saja saya menulis sebuah artikel untuk CSS-Trik pada animating polygons dan memutuskan untuk menggunakan contoh yang sama untuk latihan tweening lain di sini. Mari kita coba menggunakan method staggerFromTo() dan melihat apa jenis magic kita.

Output SVG berikut (XML) sedikit disingkat untuk diskusi, tetapi seperti yang Anda lihat SVG kami terdiri dari beberapa Tag; Khusus<g>dan <path>. Juga perhatikan path yang menghubungkan ke wajah manusia dikelompokkan bersama sebagai bagian untuk memiliki lebih finer kontrol atas stagger (misalnya telinga, mata, hidung...).

Untuk setup timeline awal kami akan menentukan pilihan global kami menggunakan object literal yang akan menunda awal animasi, Ulangi urutan, penundaan animasi pada ulangi dan akhirnya bermain animasi terbalik.

Memaksa mengubah nilai

Selanjutnya adalah agak baru dan tidak terdokumentasikan properti yang kekuatan mengubah nilai-nilai untuk ditempatkan dalam SVG mengubah atribut (bertentangan dengan gaya CSS).

Properti ini ditambahkan untuk membuat segalanya lebih mudah bagi developer untuk mendapatkan sekitar bug di Safari mana menggabungkan opacity dan transforms (seperti mengubah: scale() misalnya) akan menghasilkan hasil yang aneh. Pada 1.16.0 useSVGTransformAttr set ke true secara otomatis dan secara khusus ditargetkan pada kami pal Safari sehingga tidak lagi diperlukan untuk penulis untuk menentukan seperti yang telah saya tetapkan di atas.

Karena metode staggerFromTo menerima argumen terpisah untuk from dan to posisi saya ingin men-setup kedua objek literal di luar metode untuk organisasi dan tujuan  mudah terbaca.

Kita mendefinisikan dua objek literal karena kita perlu semua kami from dan to properti didefinisikan dalam rangka untuk animasi ini untuk melakukan nya banyak hal. Jika tidak jelas kita akan dari nilai-nilai yang ditetapkan dalam stagger_opts_from  dan berakhir dengan nilai-nilai yang ditetapkan dalam stagger_opts_to.

Kunci force3D memaksa GSAP untuk menerapkan nilai 3D untuk mengubah elemen; makna matrix3d() berdasarkan matrix(), atau translate3d() daripada translate(). Ini biasanya menghasilkan browser menempatkan unsur yang ditargetkan ke lapisan compositor sendiri memungkinkan untuk lebih efisien update dengan animasi.

Secara default force3D set ke auto (sebagai 1.15.0) jadi ada sebenarnya tidak perlu menggunakannya sama sekali (kecuali Anda secara khusus ingin perilaku true bukan auto untuk tween itu).

Anda dapat mengatur nilai  force3D  global untuk semua remaja menggunakan properti  defaultForce3D  yang disediakan oleh CSSPligin ;

Atau Anda dapat mengatur ini secara per-tween sebagai gantinya:

Sembunyikan di Window Load

Jika animasi Anda mencoba menganti properti CSS, Anda perlu memastikan bahwa spesifik khusus Anda tidak bertabrakan dengan apa yang dinyatakan dalam JavaScript Anda, jika tidak nilai-nilai CSS asli akan didahulukan dan animasi Anda tidak akan beraksi seperti yang diharapkan.

CSS di atas akan menyembunyikan Polyman pada load di awal window sehingga pada mulanya kita tidak akan melihat rekan bearded kita seperti yang akan Anda alami dengan apa yang biasa disebut sebagai FOUT (Flash Of Unstyled Text).

Karena sebagian besar konfigurasi kami didefinisikan, kami akhirnya dapat mulai mengatur garis waktu kami, menargetkan jalur SVG, menentukan nilai terhuyung-huyung ( stagger_val) dan menyelesaikan dengan menentukan berapa lama seluruh animasi akan berlangsung (durasi).

Sama seperti itu dan dengan gelombang halus magic wand kami dan sedikit taburan uncord dust kami melewati semua variabel yang diperlukan yang didefinisikan sebagai argumen ke dalam method StaggerFormTo !

Viola! Dalam satu garis sederhana, Polyman mulai bernafas dan menjadi makhluk hidup nyata (juga tidak benar-benar). Cukup keren ya?

Lain kali

Dalam tutorial berikutnya dari seri TweenMax kami, kami akan melihat cara membuat titik jeda pada garis waktu, sehingga animasi secara otomatis berhenti ketika mencapai titik yang diinginkan. Method addPause() relatif baru dan memungkinkan Anda menempatkan jeda di mana saja dalam garis waktu. Ini jauh lebih akurat daripada menggunakan callback yang memanggil  fungsi untuk menghentikan fungsi (yang harus Anda lakukan sebelum  addPause() yang  ada). Sampai waktu berikutnya selamat tweening!

Terima kasih khusus kepada para pembaca yang mengikuti perjalanan Green Stock ini!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.