Her Ekran Boyutu ve Cihaz için Duyarlı Animasyonlar

Kariyer geliştirmeye atılmadan önce After Effects'te bir sürü hareketli grafik çalışması yaptım. Ancak bu arka plana rağmen, web'de animasyon yapmayı oldukça şaşırtıcı buldum.

Video grafikleri belirli bir oranda tasarlanır ve ardından dışa aktarılır. Tamamlandı! Ancak web'de herhangi bir "dışa aktarma ayarı" yoktur. Biz sadece kodu dünyaya göndeririz ve animasyonlarımız hangi cihaza girerlerse o cihaza uyum sağlamalıdır.

Öyleyse duyarlı animasyondan bahsedelim! Vahşi vahşi ağda canlandırmaya en iyi nasıl yaklaşırız? Bazı genel yaklaşımları, bazı GSAP'ye özel ipuçlarını ve bazı hareket ilkelerini ele alacağız. Biraz çerçeveleme ile başlayalım…

Bu animasyon nasıl kullanılacak?

Zach Saucier'in duyarlı animasyon hakkındaki makalesi koda atlamadan önce nihai sonucu düşünmek için bir adım geri atmanızı önerir.

Animasyon, uygulamanızın birden çok bölümünde tekrarlanan bir modül olacak mı? Hiç ölçeklenmesi gerekiyor mu? Bunu akılda tutmak, bir animasyonun ölçeklenmesi gereken yöntemi belirlemeye yardımcı olabilir ve sizi boşa çaba harcamaktan alıkoyabilir.

Bu harika bir tavsiye. A Kocaman Duyarlı animasyon tasarlamanın bir parçası, bu animasyonun ölçeklenmesi gerekip gerekmediğini ve nasıl ölçekleneceğini bilmek ve ardından en baştan doğru yaklaşımı seçmektir.

Çoğu animasyon aşağıdaki kategorilere girer:

• Sabit: Tüm cihazlarda aynı boyut ve en boy oranını koruyan simgeler veya yükleyiciler gibi şeyler için animasyonlar. Burada endişelenecek bir şey yok! Orada bazı piksel değerlerini sabit kodlayın ve gününüze devam edin.
• Akışkan: Farklı cihazlar arasında akıcı bir şekilde uyum sağlaması gereken animasyonlar. Çoğu düzen animasyonu bu kategoriye girer.
• Hedeflenen: Belirli bir cihaza veya ekran boyutuna özel olan veya yalnızca masaüstü animasyonları veya dokunma veya fareyle üzerine gelme gibi cihaza özel etkileşime dayanan etkileşimler gibi belirli bir kesme noktasında önemli ölçüde değişen animasyonlar.

Akışkan ve hedefli animasyonlar, farklı düşünme biçimleri ve çözümler gerektirir. Hadi bir bakalım…

Akışkan animasyonu

As Andy çan diyor ki: Tarayıcının mikro yöneticisi değil, danışmanı olun - tarayıcıya bazı katı kurallar ve ipuçları verin, ardından onu ziyaret eden insanlar için doğru kararları vermesine izin verin. (Burada slaytlar bu sunumdan.)

Akışkan animasyon, tarayıcının zor işi yapmasına izin vermekle ilgilidir. Pek çok animasyon, başlangıçtan itibaren doğru birimleri kullanarak farklı bağlamlara kolayca uyum sağlayabilir. Bu kalemi yeniden boyutlandırırsanız, animasyonun kullanıldığını görebilirsiniz. görüntü alanı birimleri tarayıcı ayarladıkça akıcı bir şekilde ölçeklenir:

Mor kutu, farklı kesme noktalarında genişliği bile değiştirir, ancak onu taşımak için yüzdeleri kullandığımızdan, animasyon da onunla birlikte ölçeklenir.

Animasyon gibi düzen özellikleri left ve top mizanpajın yeniden akmasına ve gergin 'janky' animasyona neden olabilir, bu nedenle mümkün olduğunda dönüşümlere ve opaklığa bağlı kalın.

Yine de sadece bu birimlerle sınırlı değiliz - hadi diğer olasılıklara bir göz atalım.

SVG birimleri

SVG ile çalışmayı sevdiğim şeylerden biri, kutudan çıktığı gibi duyarlı olan animasyon için SVG kullanıcı birimlerini kullanabilmemizdir. İpucu gerçekten isimde - Ölçek Vektör grafiği. SVG-land'de tüm elemanlar belirli koordinatlarda çizilir. SVG alanı, öğeleri düzenleyebildiğimiz sonsuz bir grafik kağıdı gibidir. bu viewBox görebildiğimiz grafik kağıdının boyutlarını tanımlar.

viewBox="0 0 100 50”

Bu sonraki demoda, SVG'miz viewBox is 100 birimleri geniş ve 50 birim boyunda. Bu, öğeyi şu şekilde canlandırırsak, 100 x ekseni boyunca birimler, SVG ne kadar büyük veya küçük olursa olsun, her zaman ana SVG'sinin tüm genişliği kadar hareket edecektir! Demoyu görmek için yeniden boyutlandırın.

Bir üst kapsayıcının genişliğine dayalı olarak bir alt öğeyi canlandırmak, HTML-land'de biraz aldatıcıdır. Şimdiye kadar JavaScript ile ebeveynin genişliğini yakalamak zorundaydık, bu da animasyon yaparken yeterince kolay from dönüştürülmüş bir konum, ancak canlandırırken biraz daha kemancı to Aşağıdaki demoda görebileceğiniz gibi bir yerde. Uç noktanız dönüştürülmüş bir konumsa ve ekranı yeniden boyutlandırırsanız, bu konumu manuel olarak ayarlamanız gerekir. Dağınık… 🤔

Yeniden boyutlandırmada değerleri ayarlarsanız, şunu unutmayın: ifşa etmek, hatta tarayıcı yeniden boyutlandırmayı bitirdikten sonra işlevi tetikleyin. Yeniden boyutlandırma dinleyicileri her saniyede bir ton olay tetikler, bu nedenle her olaydaki özellikleri güncellemek tarayıcı için çok fazla iş gerektirir.

Ancak, bu animasyon hız artışı yakında geçmişte kalacak! Davul rulo lütfen… 🥁

Çok istenen (imkansız!?) bir özellik olarak yaklaşık 15 yıl sonra, boyut tabanlı Konteyner Sorguları ve birimleri hem Chrome/Edge 105 hem de Safari 16'da gönderildi! Firefox çok geride değil.

(ayrıca: stil sorgularının bir prototipi var!)https://t.co/A2zgd9l4FC

— Mia (@KorkunçMia) Eylül 15, 2022

Konteyner Üniteleri! Güzel şeyler. Bunu yazdığım sırada yalnızca Chrome ve Safari'de çalışıyorlar - ama belki siz bunu okuduğunuzda Firefox'umuz da olacak. Bir sonraki demoda bunları çalışırken kontrol edin. Şu küçük adamların gidişine bakın! Ana öğelere göre bu heyecan verici, animasyon değil mi!

FLIP ile akışkan düzeni geçişleri

Daha önce de belirttiğimiz gibi, SVG-land'de her öğe düzgün bir şekilde tek bir ızgaraya yerleştirilmiştir ve duyarlı bir şekilde hareket etmesi gerçekten kolaydır. HTML-land'de çok daha karmaşık. Duyarlı düzenler oluşturmak için bir dizi farklı konumlandırma yöntemi ve yerleşim sisteminden yararlanırız. Web'de animasyon yapmanın ana zorluklarından biri, çok mizanpajdaki değişikliklerin canlandırılması imkansızdır. Belki bir elemanın konumundan hareket etmesi gerekir relative için fixedveya esnek bir kapsayıcının bazı alt öğelerinin görünüm alanı çevresinde düzgün bir şekilde karıştırılması gerekir. Belki bir öğenin yeniden ebeveynlenmesi ve DOM'da tamamen yeni bir konuma taşınması bile gerekebilir.

Zor, ha?

Peki. FLIP tekniği günü kurtarmak için burada; bu imkansız şeyleri kolayca canlandırabilmemizi sağlar. Temel öncül:

• Ad: Geçişe dahil olan öğelerin başlangıç ​​konumunu alın.
• Soyad: Elemanları hareket ettirin ve son konumu alın.
• Evirmek: İlk ve son durum arasındaki değişiklikleri hesaplayın ve öğeleri orijinal konumlarına geri döndürmek için dönüşümleri uygulayın. Bu, öğelerin hala içindeymiş gibi görünmesini sağlar. ilk konum ama aslında değiller.
• OYNA: Tersine çevrilmiş dönüşümleri kaldırın ve onlara animasyon uygulayın. sahte ilk devlete son devlet.

İşte tüm ağır işleri sizin için yapan GSAP'nin FLIP eklentisini kullanan bir demo!

Vanilya uygulaması hakkında biraz daha fazla bilgi edinmek istiyorsanız, Paul Lewis'in sayfasına gidin. blog yazısı — FLIP tekniğinin arkasındaki beyindir.

Akışkan bir şekilde ölçeklenen SVG

Beni yakaladın… bu değil Gerçekten mi bir animasyon ipucu. Ancak iyi bir animasyon için sahneyi doğru ayarlamak zorunludur! SVG, varsayılan olarak süper güzel ölçeklenir, ancak preserveAspectRatioSVG öğesinin en boy oranı ve viewBox en boy oranı farklıdır. İle aynı şekilde çok çalışır background-position ve background-size CSS'deki özellikler. Bildirim bir hizalama değerinden oluşur (background-position) Ve Neden or Dilim referans (background-size).

Meet and Slice referanslarına gelince - slice gibi background size: cover, ve meet gibi background-size: contain.

• preserveAspectRatio="MidYMax slice" — X ekseninin ortasına, y ekseninin altına hizalayın ve tüm görünüm alanını kapsayacak şekilde büyütün.
• preserveAspectRatio="MinYMin meet" — x ekseninin soluna, y ekseninin tepesine hizalayın ve tümünü korurken ölçeği büyütün viewBox gözle görülür.

Tom Miller kullanarak bunu bir adım daha ileri götürür overflow: visible yüksekliği sınırlı tutarken "sol sahne" ve "sağ sahne"yi ortaya çıkarmak için CSS ve içeren bir öğede:

Duyarlı SVG animasyonları için, belirli bir tarayıcı genişliğinin altında kırpılan ve ölçeklenen bir görünüm oluşturmak için SVG görünüm kutusunu kullanmak ve aynı zamanda tarayıcı bundan daha geniş olduğunda SVG animasyonunu sağa ve sola doğru daha fazla ortaya çıkarmak için kullanışlı olabilir. eşik. Bunu, SVG'de görünen taşma ekleyerek ve onu bir max-height SVG'nin dikey olarak çok fazla ölçeklenmesini önlemek için sarıcı.

Akışkan bir şekilde ölçeklenen tuval

Canvas ile karmaşık animasyonlar için çok daha performanslıdır. bir sürü SVG veya HTML DOM'yi canlandırmak yerine hareketli parçaların kullanılması, ancak doğası gereği daha karmaşıktır. Bu performans kazanımları için çalışmalısınız! Güzel yanıt veren birimlere ve kutunun dışında ölçeklendirmeye sahip SVG'nin aksine, patronluk taslamalı ve biraz mikro yönetilmelidir.

benimkini kurmayı seviyorum böylece içinde çalışmak için güzel bir birim sistemi ve sabit bir en boy oranı ile SVG ile (önyargılı olabilirim) aynı şekilde çalışır. ayrıca bir şey her değiştiğinde yeniden çizilmesi gerekir, bu nedenle tarayıcı yeniden boyutlandırma bitene kadar yeniden çizmeyi geciktirmeyi veya geri dönmeyi unutmayın!

George Francis bunu da bir araya sevimli küçük kütüphane bir Kanvas tanımlamanıza izin veren viewBox nitelik ve preserveAspectRatio — aynen SVG gibi!

Hedeflenen animasyon

Bazen animasyonunuza daha az akıcı ve daha yönlendirilmiş bir yaklaşım uygulamanız gerekebilir. Mobil cihazlar, bir masaüstü makineden çok daha az gayrimenkule ve daha az animasyon-meyve suyu performansına sahiptir. Bu nedenle, mobil kullanıcılara azaltılmış animasyon, potansiyel olarak animasyon bile sunmamak mantıklıdır:

Bazen mobil cihazlar için en iyi yanıt veren animasyon hiç animasyon olmamasıdır! Mobil UX için, animasyonların bitmesini beklemek yerine kullanıcının içeriği hızla tüketmesine izin vermeye öncelik verin. Mobil animasyonlar içeriği, gezinmeyi ve etkileşimleri geciktirmek yerine geliştirmelidir. Eric van Holtz

Bunu yapmak için, tıpkı CSS ile stil oluştururken yaptığımız gibi belirli görüntü alanı boyutlarını hedeflemek için medya sorgularını kullanabiliriz! İşte medya sorguları kullanılarak işlenen bir CSS animasyonunu ve işlenen bir GSAP animasyonunu gösteren basit bir demo gsap.matchMedia():

Bu demonun basitliği bir sürü sihir saklıyor! JavaScript animasyonları, yalnızca belirli bir ekran boyutunda doğru şekilde çalışması için biraz daha fazla kurulum ve temizleme gerektirir. Geçmişte, insanların animasyonu CSS'de görünümden gizlediği korkular gördüm. opacity: 0, ancak animasyon hala kaynakları kullanarak arka planda ilerliyor. 😱

Ekran boyutu artık eşleşmiyorsa, diğer stiller ile çakışmaları önlemek için animasyonun öldürülmesi ve çöp toplama için serbest bırakılması ve animasyondan etkilenen öğelerin, hareketin neden olduğu satır içi stillerden temizlenmesi gerekir. Kadar kadar gsap.matchMedia(), bu zahmetli bir süreçti. Her animasyonu takip etmek ve tüm bunları manuel olarak yönetmek zorundaydık.

gsap.matchMedia() bunun yerine, animasyon kodunuzu yalnızca belirli bir medya sorgusu maçlar. Ardından, artık eşleşmediğinde, tüm GSAP animasyonları ve Kaydırma Tetikleyicileri bu işlevde otomatik olarak geri alınır. Animasyonların içine yerleştirildiği medya sorgusu sizin için tüm zor işi yapıyor. GSAP 3.11.0'dadır ve oyunun kurallarını değiştirir!

Biz de sadece ekran boyutlarıyla sınırlı değiliz. bir tonlarca medya özelliği var takılmak için!

(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 */

Aşağıdaki demoda bir çek ekledik prefers-reduced-motion böylece animasyonu kafa karıştırıcı bulan herhangi bir kullanıcı etrafta vızıldayan şeylerden rahatsız olmaz.

Ve Tom Miller'ın animasyonu ayarlamak için cihazın en boy oranını kullandığı diğer eğlenceli demosuna göz atın:

Kutunun dışında, ekran boyutlarının ötesinde düşünmek

Duyarlı animasyon hakkında düşünmek için ekran boyutlarından daha fazlası var. Farklı cihazlar farklı etkileşimlere izin verir ve bunu düşünmediğinizde biraz karışıklığa girmek kolaydır. CSS'de fareyle üzerine gelme durumları oluşturuyorsanız, hover kullanıcı olup olmadığını test etmek için medya özelliği birincil giriş mekanizması öğelerin üzerinde gezinebilir.

@media (hover: hover) {
 /* CSS hover state here */
}

dan bazı tavsiyeler Jake Whiteley:

Çoğu zaman, animasyonlarımızı tarayıcı genişliğine dayandırırız ve masaüstü kullanıcılarının fareyle üzerine gelme durumları istediği gibi saf bir varsayımda bulunuruz. Kişisel olarak geçmişte, >1024 piksel masaüstü düzenine geçeceğim, ancak JS'de dokunma algılama yapabileceğim pek çok sorun yaşadım - bu, düzenin masaüstleri için olduğu, ancak JS'nin cep telefonları için olduğu yerde bir uyumsuzluğa yol açıyor. Bu günlerde, pariteyi sağlamak ve ipad Artıları veya Windows yüzeylerini işlemek için fareyle üzerine gelme ve işaretçiye yaslanıyorum (kapağın kapalı olup olmamasına bağlı olarak işaretçi türünü değiştirebilir)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Daha sonra CSS düzen sorgularımı ve JavaScript sorgularımı birleştireceğim, böylece giriş cihazını birincil faktör olarak görüyorum destekli genişliğe göre, tam tersi.

ScrollTrigger ipuçları

GSAP kullanıyorsanız ScrollTrigger eklentisi, cihazın dokunma özelliklerini kolayca ayırt etmek için bağlayabileceğiniz kullanışlı küçük bir yardımcı program var: ScrollTrigger.isTouch.

• 0 - dokunmak yok (yalnızca işaretçi/fare)
• 1 - sadece dokunmatik cihaz (telefon gibi)
• 2 - cihaz kabul edebilir dokunma giriş ve fare imleci (Windows tabletler gibi)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

Duyarlı kaydırma ile tetiklenen animasyon için başka bir ipucu…

Aşağıdaki demo, bir resim galerisini yatay olarak hareket ettiriyor, ancak genişlik ekran boyutuna bağlı olarak değişiyor. Temizlenmiş bir animasyonun yarısındayken ekranı yeniden boyutlandırırsanız, bozuk animasyonlar ve eski değerlerle karşılaşabilirsiniz. Bu yaygın bir hız artışıdır, ancak kolayca çözülebilir! Ekran boyutuna bağlı hesaplamayı işlevsel bir değere getirin ve ayarlayın invalidateOnRefresh:true. Bu şekilde, tarayıcı yeniden boyutlandırıldığında ScrollTrigger bu değeri sizin için yeniden hesaplayacaktır.

Bonus GSAP inek ipucu!

Mobil cihazlarda, tarayıcı adres çubuğu genellikle siz kaydırdıkça görünür ve gizlenir. Bu, yeniden boyutlandırma olayı olarak sayılır ve ScrollTrigger.refresh(). Bu, animasyonunuzda atlamalara neden olabileceğinden ideal olmayabilir. GSAP 3.10 eklendi ignoreMobileResize. Tarayıcı çubuğunun nasıl davrandığını etkilemez, ancak ScrollTrigger.refresh() için ateş etmekten Yalnızca dokunmatik cihazlarda küçük dikey yeniden boyutlandırma.

ScrollTrigger.config({
  ignoreMobileResize: true
});

Hareket ilkeleri

Web'de hareketle çalışırken göz önünde bulundurmanız gereken bazı en iyi uygulamalarla sizi baş başa bırakayım dedim.

Mesafe ve gevşeme

Duyarlı animasyonla unutulması kolay küçük ama önemli bir şey hız, momentum ve mesafe arasındaki ilişkidir! İyi animasyon gerçek dünyayı taklit etmeli inanılır hissetmek ve gerçek dünyada daha büyük bir mesafeyi kat etmek daha uzun sürer. Animasyonunuzun kat ettiği mesafeye dikkat edin ve kullanılan sürenin ve hareket hızının diğer animasyonlar bağlamında anlamlı olduğundan emin olun.

Ayrıca, artan momentumu göstermek için daha fazla seyahat içeren öğelere genellikle daha dramatik bir yumuşatma uygulayabilirsiniz:

Belirli kullanım durumları için süreyi ekran genişliğine göre daha dinamik olarak ayarlamak yardımcı olabilir. Bu sonraki demoda gsap.utils akımdan geri aldığımız değeri sıkıştırmak için window.innerWidth makul bir aralıkta, sonra bu sayıyı bir süreye eşliyoruz.

Aralık ve miktar

Akılda tutulması gereken bir diğer şey, farklı ekran boyutlarındaki öğelerin boşlukları ve miktarıdır. Alıntı yapmak Steven Shaw:

Pencerenin etrafına yerleştirilmiş bir tür çevresel animasyonunuz (paralaks, bulutlar, ağaçlar, konfeti, süslemeler, vb.) varsa, bunların ekran boyutuna bağlı olarak ölçeklendiğinden ve/veya miktarı ayarladıklarından emin olun. Büyük ekranlar muhtemelen daha fazla öğeye ihtiyaç duyarken, küçük ekranlar aynı etki için yalnızca birkaç öğeye ihtiyaç duyar.

Nasıl olduğunu seviyorum Opher Vişnia animasyonu bir sahne olarak düşünür. Öğeleri eklemek ve çıkarmak sadece bir formalite olmak zorunda değildir, genel koreografinin bir parçası olabilir.

Duyarlı animasyonlar tasarlarken, zorluk, aynı içeriğin "uyması" için görüntü alanına nasıl tıkılacağı değil, aynı amacı iletmesi için mevcut içerik kümesinin nasıl seçileceğidir. Bu, hangi parçaların içeriğin ekleneceği ve hangilerinin kaldırılacağı konusunda bilinçli bir seçim yapmak anlamına gelir. Genellikle animasyon dünyasında her şey çerçeveye öylece girip çıkmaz. Öğeleri “sahneye” giren veya çıkan, bu geçişi görsel ve tematik anlamlı bir şekilde canlandıran olarak düşünmek mantıklıdır.

Ve bu kadar. Daha duyarlı animasyon ipuçlarınız varsa, bunları yorum bölümünde belirtin. Süper yararlı bir şey varsa, onları bu bilgi özetine ekleyeceğim!

ek

dan bir not daha Tom Miller bu makaleyi hazırlarken:

Duyarlı animasyonlar makaleniz için muhtemelen bu ipucu ile çok geç kaldım, ancak “inşa etmeden önce tüm animasyonları sonlandırın” şiddetle tavsiye ediyorum. Şu anda bazı site animasyonlarını "mobil sürümler" ile güçlendiriyorum. çok şükür gsap.matchMedia… ama keşke baştan ayrı mobil düzenler/animasyonlar olacağını bilseydik.

Sanırım hepimiz bu "önceden plan yapma" ipucunun kesinlikle son dakikada geldiğini takdir ediyoruz. Teşekkürler Tom ve bu güçlendirmelerde iyi şanslar.