Sebelum karir saya terjun ke pengembangan, saya melakukan banyak pekerjaan grafis gerak di After Effects. Tetapi bahkan dengan latar belakang itu, saya masih menemukan animasi di web cukup membingungkan.
Grafik video dirancang dalam rasio tertentu dan kemudian diekspor. Selesai! Tapi tidak ada "pengaturan ekspor" di web. Kami hanya mendorong kode ke dunia dan animasi kami harus beradaptasi dengan perangkat apa pun yang mereka gunakan.
Jadi mari kita bicara animasi responsif! Bagaimana cara terbaik untuk mendekati animasi di web liar liar? Kami akan membahas beberapa pendekatan umum, beberapa tip khusus GSAP, dan beberapa prinsip gerak. Mari kita mulai dengan beberapa pembingkaian…
Bagaimana animasi ini akan digunakan?
Artikel Zach Saucier tentang animasi responsif merekomendasikan mengambil langkah mundur untuk memikirkan hasil akhir sebelum melompat ke kode.
Akankah animasi menjadi modul yang diulang di beberapa bagian aplikasi Anda? Apakah perlu skala sama sekali? Mengingat hal ini dapat membantu menentukan metode di mana animasi harus diskalakan dan mencegah Anda membuang-buang tenaga.
Ini adalah saran yang bagus. SEBUAH besar bagian dari mendesain animasi responsif adalah mengetahui apakah dan bagaimana animasi itu perlu diskalakan, dan kemudian memilih pendekatan yang tepat sejak awal.
Sebagian besar animasi termasuk dalam kategori berikut:
- Tetap: Animasi untuk hal-hal seperti ikon atau pemuat yang mempertahankan ukuran dan rasio aspek yang sama di semua perangkat. Tidak ada yang perlu dikhawatirkan di sini! Hard-code beberapa nilai piksel di sana dan lanjutkan hari Anda.
- Cairan: Animasi yang perlu beradaptasi dengan lancar di berbagai perangkat. Sebagian besar animasi tata letak termasuk dalam kategori ini.
- Ditargetkan: Animasi yang khusus untuk perangkat atau ukuran layar tertentu, atau berubah secara substansial pada titik henti sementara tertentu, seperti animasi khusus desktop atau interaksi yang mengandalkan interaksi khusus perangkat, seperti sentuhan atau arahkan kursor.
Animasi yang lancar dan terarah membutuhkan cara berpikir dan solusi yang berbeda. Mari lihat…
Animasi cair
As Andy bel mengatakan: Jadilah mentor browser, bukan micromanager — berikan browser beberapa aturan dan petunjuk yang solid, lalu biarkan browser membuat keputusan yang tepat untuk orang yang mengunjunginya.
(Di sini adalah slide dari presentasi itu.)
Animasi yang lancar adalah tentang membiarkan browser melakukan kerja keras. Banyak animasi dapat dengan mudah menyesuaikan dengan konteks yang berbeda hanya dengan menggunakan unit yang tepat sejak awal. Jika Anda mengubah ukuran pena ini, Anda dapat melihat bahwa animasi menggunakan unit viewport skala dengan lancar saat browser menyesuaikan:
Kotak ungu bahkan mengubah lebar pada breakpoint yang berbeda, tetapi karena kami menggunakan persentase untuk memindahkannya, animasi juga ikut skala.
Menganimasikan properti tata letak seperti left dan top dapat menyebabkan perubahan tata letak dan animasi 'janky' yang gelisah, jadi jika memungkinkan tetap berpegang pada transformasi dan opasitas.
Kami tidak hanya terbatas pada unit ini — mari kita lihat beberapa kemungkinan lain.
unit SVG
Salah satu hal yang saya sukai tentang bekerja dengan SVG adalah kita dapat menggunakan unit pengguna SVG untuk animasi yang responsif di luar kotak. Petunjuknya ada di nama itu benar-benar— scalable Grafis Vektor. Di tanah SVG, semua elemen diplot pada koordinat tertentu. Ruang SVG seperti kertas grafik tanpa batas tempat kita dapat mengatur elemen. Itu viewBox mendefinisikan dimensi kertas grafik yang bisa kita lihat.
viewBox="0 0 100 50”Dalam demo berikutnya, SVG kami viewBox is 100 satuan lebar dan 50 unit tinggi. Ini berarti jika kita menganimasikan elemen dengan 100 unit sepanjang sumbu x, itu akan selalu bergerak dengan seluruh lebar SVG induknya, tidak peduli seberapa besar atau kecil SVG itu! Berikan demo ukuran untuk dilihat.
Menganimasikan elemen anak berdasarkan lebar wadah induk sedikit rumit di HTML-land. Sampai sekarang, kami harus mengambil lebar induk dengan JavaScript, yang cukup mudah saat Anda menganimasikan from posisi yang berubah, tetapi sedikit lebih fiddlier saat Anda menganimasikan to di suatu tempat seperti yang Anda lihat di demo berikut. Jika titik akhir Anda adalah posisi yang diubah dan Anda mengubah ukuran layar, Anda harus menyesuaikan posisi itu secara manual. berantakan…
Jika Anda menyesuaikan nilai pada pengubahan ukuran, ingatlah untuk bangkit kembali, atau bahkan mengaktifkan fungsi setelah browser selesai mengubah ukuran. Pendengar pengubahan ukuran memicu banyak peristiwa setiap detik, jadi memperbarui properti pada setiap peristiwa merupakan pekerjaan berat bagi browser.
Tapi, animasi speed-bump ini akan segera menjadi sesuatu dari masa lalu! Drum roll tolong…
Unit Kontainer! Hal-hal yang indah. Saat saya menulis ini, mereka hanya berfungsi di Chrome dan Safari — tetapi mungkin saat Anda membaca ini, kami juga akan memiliki Firefox. Lihat mereka beraksi di demo berikutnya. Lihatlah anak-anak kecil itu pergi! Bukankah itu menarik, animasi yang relatif terhadap elemen induk!
Data dukungan browser ini berasal dari kaniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan lebih tinggi.
Desktop
| Chrome | Firefox | IE | Tepi | Safari |
|---|---|---|---|---|
| 105 | Tidak | Tidak | 105 | 16.0 |
Ponsel / Tablet
| android-chrome | Firefox Android | Android | iOS Safari |
|---|---|---|---|
| 106 | Tidak | 106 | 16.0 |
Transisi tata letak fluida dengan FLIP
Seperti yang kami sebutkan sebelumnya, di SVG-land setiap elemen ditempatkan dengan rapi pada satu grid dan sangat mudah untuk dipindahkan secara responsif. Di HTML-land itu jauh lebih kompleks. Untuk membangun tata letak yang responsif, kami menggunakan banyak metode pemosisian dan sistem tata letak yang berbeda. Salah satu kesulitan utama membuat animasi di web adalah banyak perubahan tata letak tidak mungkin untuk dianimasikan. Mungkin elemen perlu pindah dari posisi relative untuk fixed, atau beberapa anak dari wadah fleksibel harus diacak dengan mulus di sekitar area pandang. Mungkin sebuah elemen bahkan perlu di-parent kembali dan dipindahkan ke posisi yang sama sekali baru di DOM.
Rumit, ya?
Sehat. Teknik FLIP di sini untuk menyelamatkan hari; itu memungkinkan kita untuk dengan mudah menghidupkan hal-hal yang mustahil ini. Premis dasarnya adalah:
- Pertama: Ambil posisi awal elemen yang terlibat dalam transisi.
- Terakhir: Pindahkan elemen dan ambil posisi akhir.
- Membalikkan: Kerjakan perubahan antara keadaan pertama dan terakhir dan terapkan transformasi untuk membalikkan elemen kembali ke posisi semula. Ini membuatnya tampak seperti elemen-elemennya masih ada di pertama posisi tetapi sebenarnya tidak.
- Bermain: Hapus transformasi terbalik dan hidupkan ke mereka palsu pertama negara ke terakhir negara.
Berikut demo menggunakan plugin FLIP GSAP yang melakukan semua pekerjaan berat untuk Anda!
Jika Anda ingin memahami sedikit lebih banyak tentang implementasi vanilla, pergilah ke Paul Lewis posting blog — dia adalah otak di balik teknik FLIP.
Penskalaan SVG . yang lancar
Anda mendapatkan saya ... ini bukan benar-benar tip animasi. Tetapi mengatur panggung dengan benar sangat penting untuk animasi yang bagus! SVG menskalakan dengan sangat baik secara default, tetapi kita dapat mengontrol bagaimana skalanya lebih jauh dengan preserveAspectRatio, yang sangat berguna saat rasio aspek elemen SVG dan viewBox rasio aspek berbeda. Ini bekerja dengan cara yang sama seperti background-position dan background-size properti di CSS. Deklarasi terdiri dari nilai keselarasan (background-position) Dan Pelajari or Iris referensi (background-size).
Adapun referensi Meet and Slice itu — slice adalah seperti background size: cover, dan meet adalah seperti background-size: contain.
preserveAspectRatio="MidYMax slice"— Sejajarkan dengan bagian tengah sumbu x, bagian bawah sumbu y, dan naikkan skala untuk menutupi seluruh area pandang.preserveAspectRatio="MinYMin meet"— Sejajarkan ke kiri sumbu x, bagian atas sumbu y, dan perbesar sambil mempertahankan keseluruhanviewBoxterlihat.
Tom Miller mengambil ini selangkah lebih maju dengan menggunakan overflow: visible di CSS dan elemen yang mengandung untuk mengungkapkan "panggung kiri" dan "kanan panggung" sambil menjaga ketinggian dibatasi:
Untuk animasi SVG yang responsif, akan berguna untuk menggunakan kotak tampilan SVG untuk membuat tampilan yang memotong dan menskala di bawah lebar browser tertentu, sementara juga menampilkan lebih banyak animasi SVG ke kanan dan kiri saat browser lebih lebar dari itu ambang. Kita dapat mencapai ini dengan menambahkan overflow yang terlihat di SVG dan menggabungkannya dengan a
max-heightpembungkus untuk mencegah SVG dari penskalaan terlalu banyak secara vertikal.
Kanvas penskalaan yang lancar
Kanvas jauh lebih berkinerja untuk animasi kompleks dengan banyak bagian yang bergerak daripada menganimasikan SVG atau HTML DOM, tetapi secara inheren juga lebih kompleks. Anda harus bekerja untuk keuntungan kinerja itu! Tidak seperti SVG yang memiliki unit responsif yang indah dan skala yang luar biasa, harus diatur dan diatur secara mikro sedikit.
Saya suka mengatur saya sehingga bekerja dengan cara yang sama seperti SVG (saya mungkin bias) dengan sistem unit yang indah untuk bekerja di dalam dan rasio aspek tetap. juga perlu digambar ulang setiap kali ada perubahan, jadi ingatlah untuk menunda menggambar ulang hingga browser selesai mengubah ukurannya, atau debounce!
George Francis juga mengumpulkan ini perpustakaan kecil yang indah yang memungkinkan Anda untuk menentukan Kanvas viewBox atribut dan preserveAspectRatio — persis seperti SVG!
Animasi yang ditargetkan
Terkadang Anda mungkin perlu mengambil pendekatan yang kurang lancar dan lebih terarah pada animasi Anda. Perangkat seluler memiliki real estat yang jauh lebih sedikit, dan kinerja jus animasi yang lebih sedikit daripada mesin desktop. Jadi masuk akal untuk menyajikan animasi yang dikurangi kepada pengguna seluler, bahkan mungkin tanpa animasi:
Terkadang animasi responsif terbaik untuk seluler bukanlah animasi sama sekali! Untuk UX seluler, prioritaskan membiarkan pengguna mengonsumsi konten dengan cepat dibandingkan menunggu animasi selesai. Animasi seluler harus meningkatkan konten, navigasi, dan interaksi daripada menundanya. Eric van Holtz
Untuk melakukan ini, kita dapat menggunakan kueri media untuk menargetkan ukuran area pandang tertentu seperti yang kita lakukan saat menata gaya dengan CSS! Berikut adalah demo sederhana yang menunjukkan animasi CSS yang ditangani menggunakan kueri media dan animasi GSAP yang ditangani dengan gsap.matchMedia():
Kesederhanaan demo ini menyembunyikan banyak keajaiban! Animasi JavaScript memerlukan sedikit lebih banyak penyiapan dan pembersihan agar dapat bekerja dengan benar hanya pada satu ukuran layar tertentu. Saya telah melihat kengerian di masa lalu di mana orang baru saja menyembunyikan animasi dari tampilan di CSS dengan opacity: 0, tetapi animasi masih berjalan di latar belakang menggunakan sumber daya.
Jika ukuran layar tidak cocok lagi, animasi harus dimatikan dan dilepaskan untuk pengumpulan sampah, dan elemen yang terpengaruh oleh animasi harus dibersihkan dari gaya inline yang diperkenalkan oleh gerakan untuk mencegah konflik dengan gaya lainnya. Sampai gsap.matchMedia(), ini adalah proses yang rumit. Kami harus melacak setiap animasi dan mengelola semua ini secara manual.
gsap.matchMedia() alih-alih memungkinkan Anda dengan mudah memasukkan kode animasi Anda ke dalam fungsi yang hanya dijalankan saat tertentu permintaan Media pertandingan. Kemudian, ketika tidak lagi cocok, semua animasi GSAP dan Pemicu Gulir dalam fungsi itu dikembalikan secara otomatis. Kueri media tempat animasi muncul melakukan semua kerja keras untuk Anda. Ada di GSAP 3.11.0 dan ini adalah pengubah permainan!
Kami juga tidak hanya dibatasi oleh ukuran layar. Ada sebuah banyak fitur media di luar sana untuk menghubungkan ke!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Dalam demo berikut kami telah menambahkan tanda centang untuk prefers-reduced-motion sehingga setiap pengguna yang menemukan animasi disorientasi tidak akan terganggu oleh hal-hal yang berputar-putar.
Dan lihat demo menyenangkan Tom Miller lainnya di mana dia menggunakan rasio aspek perangkat untuk menyesuaikan animasi:
Berpikir di luar kotak, di luar ukuran layar
Ada banyak hal yang perlu dipikirkan tentang animasi responsif daripada sekadar ukuran layar. Perangkat yang berbeda memungkinkan interaksi yang berbeda, dan mudah untuk menjadi sedikit kusut jika Anda tidak mempertimbangkannya. Jika Anda membuat status hover di CSS, Anda dapat menggunakan hover fitur media untuk menguji apakah pengguna primer mekanisme input dapat mengarahkan kursor ke elemen.
@media (hover: hover) {
/* CSS hover state here */
}Beberapa saran dari Jake Whiteley:
Seringkali kita mendasarkan animasi kita pada lebar browser, membuat asumsi naif bahwa pengguna desktop menginginkan status hover. Saya pribadi memiliki banyak masalah di masa lalu di mana saya akan beralih ke tata letak desktop> 1024px, tetapi mungkin melakukan deteksi sentuh di JS - yang mengarah ke ketidakcocokan di mana tata letak untuk desktop, tetapi JS untuk ponsel. Hari-hari ini saya bersandar pada hover dan pointer untuk memastikan paritas dan menangani ipad Pro atau permukaan windows (yang dapat mengubah jenis pointer tergantung pada apakah penutupnya turun atau tidak)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Saya kemudian akan menggabungkan kueri tata letak CSS dan kueri JavaScript saya, jadi saya mempertimbangkan perangkat input sebagai faktor utama didukung dengan lebar, bukan sebaliknya.
Kiat Pemicu Gulir
Jika Anda menggunakan GSAP Plugin ScrollTrigger, ada utilitas kecil yang berguna yang dapat Anda gunakan untuk membedakan dengan mudah kemampuan sentuh perangkat: ScrollTrigger.isTouch.
0- tanpa sentuhan (hanya penunjuk/mouse)1- sentuh saja perangkat (seperti telepon)2- perangkat dapat menerima menyentuh masukan dan penunjuk mouse (seperti tablet Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Kiat lain untuk animasi yang dipicu gulir responsif…
Demo berikut di bawah ini memindahkan galeri gambar secara horizontal, tetapi lebarnya berubah tergantung pada ukuran layar. Jika Anda mengubah ukuran layar saat Anda setengah jalan melalui animasi yang digosok, Anda bisa berakhir dengan animasi yang rusak dan nilai-nilai basi. Ini adalah speedbump umum, tapi yang mudah dipecahkan! Pop perhitungan yang bergantung pada ukuran layar menjadi nilai fungsional dan set invalidateOnRefresh:true. Dengan begitu, ScrollTrigger akan menghitung ulang nilai itu untuk Anda saat browser mengubah ukuran.
Bonus tip kutu buku GSAP!
Pada perangkat seluler, bilah alamat browser biasanya ditampilkan dan disembunyikan saat Anda menggulir. Ini dianggap sebagai acara pengubahan ukuran dan akan menyala ScrollTrigger.refresh(). Ini mungkin tidak ideal karena dapat menyebabkan lompatan dalam animasi Anda. GSAP 3.10 ditambahkan ignoreMobileResize. Itu tidak memengaruhi perilaku bilah browser, tetapi mencegah ScrollTrigger.refresh() dari menembak untuk pengubahan ukuran vertikal kecil pada perangkat sentuh saja.
ScrollTrigger.config({
ignoreMobileResize: true
});Prinsip gerak
Saya pikir saya akan meninggalkan Anda dengan beberapa praktik terbaik untuk dipertimbangkan saat bekerja dengan gerakan di web.
Jarak dan kemudahan
Hal kecil tapi penting yang mudah dilupakan dengan animasi responsif adalah hubungan antara kecepatan, momentum, dan jarak! Animasi yang bagus harus meniru dunia nyata untuk merasa dipercaya, dan butuh waktu lebih lama di dunia nyata untuk menempuh jarak yang lebih jauh. Perhatikan jarak yang ditempuh animasi Anda, dan pastikan durasi dan easing yang digunakan sesuai dengan konteks animasi lainnya.
Anda juga dapat sering menerapkan easing yang lebih dramatis ke elemen dengan perjalanan lebih jauh untuk menunjukkan peningkatan momentum:
Untuk kasus penggunaan tertentu, mungkin berguna untuk menyesuaikan durasi secara lebih dinamis berdasarkan lebar layar. Dalam demo berikutnya kami menggunakan gsap.utils untuk menjepit nilai yang kita dapatkan kembali dari arus window.innerWidth ke dalam rentang yang wajar, lalu kami memetakan angka tersebut ke durasi.
Spasi dan kuantitas
Hal lain yang perlu diingat adalah jarak dan jumlah elemen pada ukuran layar yang berbeda. Mengutip Steven Shaw:
Jika Anda memiliki beberapa jenis animasi lingkungan (paralaks, awan, pohon, confetti, dekorasi, dll) yang ditempatkan di sekitar jendela, pastikan skala dan/atau sesuaikan jumlahnya tergantung pada ukuran layar. Layar besar mungkin membutuhkan lebih banyak elemen yang tersebar, sementara layar kecil hanya membutuhkan beberapa elemen untuk efek yang sama.
Saya suka bagaimana Opher Wisnia berpikir tentang animasi sebagai panggung. Menambahkan dan menghapus elemen tidak hanya harus menjadi formalitas, itu bisa menjadi bagian dari keseluruhan koreografi.
Saat mendesain animasi responsif, tantangannya bukanlah bagaimana menjejalkan konten yang sama ke dalam viewport sehingga “pas”, melainkan bagaimana mengkurasi kumpulan konten yang ada sehingga mengomunikasikan maksud yang sama. Itu berarti membuat pilihan sadar bagian mana yang akan ditambahkan, dan mana yang harus dihapus. Biasanya dalam dunia animasi hal-hal tidak hanya muncul atau keluar dari bingkai. Masuk akal untuk memikirkan elemen sebagai memasuki atau keluar dari "panggung", menjiwai transisi itu dengan cara yang masuk akal secara visual dan tematik.
Dan itu banyak. Jika Anda memiliki kiat animasi yang lebih responsif, masukkan di bagian komentar. Jika ada sesuatu yang sangat membantu, saya akan menambahkannya ke ringkasan informasi ini!
tambahan
Satu catatan lagi dari Tom Miller saat saya menyiapkan artikel ini:
Saya mungkin terlambat dengan tip ini untuk artikel animasi responsif Anda, tetapi saya sangat menyarankan "menyelesaikan semua animasi sebelum membangun". Saat ini saya sedang memperbaiki beberapa animasi situs dengan "versi seluler". Syukurlah untuk
gsap.matchMedia… tapi saya berharap kita tahu bahwa akan ada tata letak/animasi seluler yang terpisah dari awal.
Saya pikir kita semua menghargai bahwa tip untuk "merencanakan ke depan" ini datang pada menit terakhir. Terima kasih, Tom, dan semoga berhasil dengan retrofit itu.
