Ürün Hareketli Grafikleri İçin Easing Nasıl Seçilir?

İki panel aynı mesafeyi aynı sürede gidip tamamen farklı hissettirebilir. Biri sanki biri onu özenle yerine koymuş gibi gelir. Diğeri görünmez bir duvara çarpıyor gibidir. Üçüncüsü hedefini geçip geri döner ve sıradan bir arayüz değişikliğini küçük bir gösteriye dönüştürür.

Fark çoğu zaman animasyon easing’idir: geçen zamanı başlangıç ve bitiş durumları arasındaki ilerlemeye eşleyen fonksiyon. Ancak ürün hareketini popüler hazır ayarlar listesinden easing seçerek yönetmek güvenilir değildir. Dekoratif bir kartta harika görünen eğri, fiyatı okumayı zorlaştırabilir veya imleç eylemini sonucundan kopuk gösterebilir.

Daha iyi başlangıç noktası, hareketin görevidir. Bilgiyi görünür alana mı getiriyoruz, bir şeyi kaldırıyor muyuz, iki durumu mu bağlıyoruz, gerçek bir değeri mi izliyoruz, yoksa arka planda sürekli hareket mi sağlıyoruz? Bu netleştiğinde eğri, bir üslup etiketi yerine pratik bir araca dönüşür.

Arayüz geçişinin ayrıca kesintilere yanıt verebilmesi gerekir; render edilmiş video ise sabit bir zaman çizelgesini izler. Etkileşimli örneğin görsel muhakemesinden yararlanın, ardından onu sahnenizdeki bir sonraki eyleme göre değerlendirin.

Easing fonksiyonlarının neyi kontrol ettiğini anlayın

Basit bir hareket için sıfırdan başlayıp birde biten bir ilerleme değeri düşünün. Nesne sol kenardan ortaya gelebilir, küçük karttan büyük panele dönüşebilir veya saydamlıktan opaklığa geçebilir. Easing, bu ilerlemenin farklı anlarda ne kadar hızlı gerçekleştiğini belirler.

Doğrusal ilerleme, eşit zaman dilimlerinde değişimin eşit miktarlarını tamamlar. Ease-out başta hızlı ilerler ve hedefe yakın yavaşlar. Ease-in bunun tersini yapar. Ease-in-out iki uçta yavaş, ortada daha hızlıdır. Bu açıklamalar belirli bir mesafe veya görsel efektle değil, ilerlemeyle ilgilidir.

Bu son nokta önemlidir. Eğrinin sabit bir algılanan hızı yoktur. Aynı eğri kullanılsa bile paneli yarım saniyede altı yüz piksel hareket ettirmekle altmış piksel hareket ettirmek farklı izlenimler üretir. Benzer şekilde aynı eğriyi opaklıkta kullanmak, büyük bir konum değişiminde kullanmakla algısal olarak eşdeğer değildir.

MDN’in easing referansı, kübik Bézier ve basamak fonksiyonları dahil, zaman ilerlemesiyle animasyon değerleri arasındaki ilişkiyi açıklar. Örnekleri, hazır ayarın adına güvenmek yerine mekanizmayı incelemek için yararlıdır. MDN’in easing-function referansı teknik tanımları verir.

Gösterişli ayrıntıdan önce varışı seçin

Ürün videosundaki bir öğe genellikle izleyicinin onu incelemesi gerektiği için içeri girer. Bu nedenle varışının niteliği, yolculuğunun gösterişinden daha önemlidir.

Yeni bir rapor içeren panel düşünün. Ease-out girişi, paneli hızla görünür alana getirip kontrollü bir yerleşme evresi sağlayabilir. İzleyici içeriğin konumunu erken bulmaya başlar, ardından sabit bir sonuç elde eder. Ease-in girişi, paneli daha uzun süre başlangıç noktasına yakın tutabilir ve en hızlı hareketi okuma konumuna ulaştığı ana yakın gerçekleştirebilir. Sonraki yönerge hemen başlıyorsa bu sert hissedilebilir.

İki eğriden hiçbiri doğası gereği doğru değildir. Soru, hareketin sonraki algısal görevi destekleyip desteklemediğidir. Tamamlanan eylemden sonra küçük bir gösterge ayrılıyorsa hızlanarak uzaklaşması uygun olabilir. Başlık kesin okunmak üzere geliyorsa aniden durmasını gerekçelendirmek daha zordur.

Durum değişikliğini açık kılan en basit varışla başlayın. Sonra yerleşmiş kareyi inceleyin. Anlatım metne dayanmadan önce metin tamamen okunabilir oluyor mu? Panel, kaynak kontrolle ilişkisini koruyacak bir yerde mi duruyor? Konum yerleştikten sonra gölge veya bulanıklık değişmeye devam ediyor mu? Bu ikincil özellikler, gerçek okuma anını geciktirebilir.

Animasyon özenli hissettirebilir ama dikkati içeriğe devretmekte başarısız olabilir. Amaç, varış anını yalnızca akıcı değil, yararlı kılmaktır.

Mesafeyi, süreyi ve eğriyi birlikte değerlendirin

Giriş fazla sert hissettirdiğinde ilk içgüdü çoğu zaman onu uzatmaktır. Bu yardımcı olabilir; ancak bütün sahneyi ağırlaştırabilir. En az üç kontrolünüz vardır: öğenin ne kadar yol aldığı, bunun ne kadar sürdüğü ve ilerlemenin nasıl dağıldığı.

Bir etiketin karenin çok dışından kayarak yerine geldiğini varsayın. Uzun yol, etiketin gerektirdiğinden fazla görsel hareket yaratabilir. Hareket mesafesini azaltmak, sahneyi hızlı tutarken hareketi sakinleştirebilir. Daha ölçülü bir eğri de uzun bekleme eklemeden işi tamamlayabilir.

Büyük bir arayüz yakınlaştırmasında ters sorun ortaya çıkabilir. Kısa süreyle büyük ölçek değişiminin birleşmesi, izleyiciyi içeriğin yerini aniden yeniden bulmaya zorlar. Küçük bir easing ayarı yeterli olmayabilir. Daha az yakınlaştırma, araya giren bir bağlam karesi veya ardından gerçek sabit bekleme gelen daha uzun bir geçiş gerekebilir.

Karşılaştırma yaparken iki değişkeni sabit tutun. Önce aynı mesafe ve sürede eğrileri karşılaştırın. Sonra seçilen eğriyi koruyup süreyi değiştirin. Son olarak yolun kendisinin fazla olup olmadığını sorun. Üçünü birden değiştirmek daha güzel sonuç üretebilir, ama sorunu neyin çözdüğünü öğretmez.

Kusursuz sürelerden oluşan evrensel bir tabloya ihtiyacınız yoktur. Önünüzdeki hareketi anlamak için kontrollü bir yönteme ihtiyacınız vardır. Yararlı bir hareket brifi, yolculuğun hissi kadar hedefi ve istenen okuma anını da tanımlar.

Hedefi aşmayı yalnızca anlam buna uygunsa kullanın

Hedefi aşıp geri dönme, yani overshoot, hareketi esnek, eğlenceli veya enerjik hissettirebilir. Aynı zamanda ek bir olay oluşturur: nesne hedefin ötesine gider ve geri döner. Bu olay dikkat tüketir ve ima edilen davranışı değiştirebilir.

Dekoratif bir rozet çoğu zaman sıçramayı kaldırabilir. Grafik değeri, imleç konumu, ilerleme çubuğu veya fiyat ise kaldıramayabilir. Bir çubuk geçici olarak son değerini aşarsa izleyici geçici durumu veri sanabilir. İmleç küçük bir kontrolü aşarsa kaydedilen eylem özensiz görünebilir. Sayı yerleşmeden önce belirgin biçimde büyürse birimi veya koşulu görsel olarak kopabilir.

Hedefi aşmanın nesneye ait olup olmadığını, yoksa zaman çizelgesi sade geldiği için mi eklendiğini sorun. Fiziksel metaforlar ilişkiyi açıkladıklarında yararlıdır. Her öğe amacı ne olursa olsun aynı yay gibi davrandığında dikkat dağıtırlar.

Ayrıca yay simülasyonuyla çıktısı hedefi aşan sabit easing eğrisini ayırın. İkisi de esnek görünebilir, ama aynı mekanizma değildir. Yay; sertlik ve sönümleme gibi özelliklerle tanımlanabilir ve davranışı uygulamaya bağlıdır. Kübik Bézier eğrisi sabit bir ilerleme aralığını eşler. Parametre adlarının araçlar arasında aynı anlamla taşındığını varsaymayın.

Material’ın daha yeni hareket kılavuzu, M3 Expressive için fizik tabanlı bir sistem içerir. Kullanılabilirliği ve uygulanışı, kullanılan uygulamaya bağlıdır. Bu, “Material easing”in neden değişmez tek bir eğri olmadığını gösteren yararlı bir örnektir. Referansın hangi kuşağa ve uygulamaya ait olduğunu kontrol edin. Material’ın harekete genel bakışı, mevcut sistemin kapsamını açıklar.

Sürekli hareketin anlamını koruyun

Doğrusal hareket çoğu zaman mekanik görünür; ancak bazen tam da mekanik olması gerekir. Sabit hızlı dönme, bant gibi akan desen veya zaman çizelgesi göstergesi düzenli ilerleme gerektirebilir. Her tekrara ease-in-out eklemek, döngü birleşiminde görünür bir duraksama yaratabilir.

Aynı sorun bir değeri canlandırırken de ortaya çıkar. Sayı geçen zamanı temsil ediyorsa dekoratif easing, zamanın hızlanıp yavaşlıyormuş gibi görünmesine neden olabilir. Video canlı süreyi ölçmek yerine sayımı örneklendiriyorsa bu kabul edilebilir; ancak ayrım bilinçli yapılmalıdır.

Veri geçişlerinde ara durumların ne anlama geldiğine karar verin. İki değer arasında enterpolasyon, izleyicinin değişimi takip etmesine yardımcı olabilir; ancak aradaki değerler veri kümesindeki gözlemler olmayabilir. Akıcı hareket, alttaki sürecin o noktalarda sürekli ölçüldüğünü ima etmemelidir.

İmleci izleyen kamera hareketinde kameranın eğrisi, imlecin eğrisiyle de etkileşir. İkisine bağımsız easing uygulanırsa imleç kare içinde sürüklenebilir ve hedef kaçıyormuş gibi görünebilir. Bazen daha iyi çözüm, eylem olurken kamerayı sabit tutmak, sonra sonuç durumuna geçmektir.

Easing’i gerçekten istediğiniz görsel olayı tanımlamak için kullanın. Sabit hareket, bilgilendirici geçiş ve dekoratif vurgu farklı işlerdir. Tek bir marka ayarı tutarlılık sağlayabilir; ancak hareketin anlamına göre yine de istisnalar gerekir.

İlişkili öğeleri tek bir olay olarak koordine edin

Panel, başlığı ve gölgesi ayrı ayrı çekici eğriler kullanıp birlikte kopuk hissettirebilir. Başlık onu taşıyan yüzeyden önce gelebilir veya gölge, panelin derinliği beklenmedik biçimde değişiyormuş gibi görünecek kadar geriden kalabilir.

İlişkili özellikleri tek bir algısal olay olarak ele alın. İzleyicinin önce neyi anlaması gerektiğine ve hangi öğelerin bir bütün halinde hareket edeceğine karar verin. Cümle taşıyan bir panel, hareket sırasında iç ilişkilerinin sabit kalmasından çoğu zaman yarar görür. Ana yüzey yerleştikten sonra bilinçli bir kademelendirme ikincil içeriği açığa çıkarabilir.

Hata, yalnızca araç bunu kolaylaştırıyor diye her alt öğeye kendi girişini vermektir. İzleyici böylece tek bir hedef yerine birkaç yörüngeyi izlemek zorunda kalır. Daha fazla animasyon mutlaka daha güçlü hiyerarşi üretmez.

Ürün demosunda imleç eylemiyle arayüz sonucunu dikkatle koordine edin. Bir düğmeye basıldıktan sonra ilgisiz, esnek bir giriş gelmesi sahneyi yapay hissettirebilir. Nedensel bağı koruyun: eylem, yanıt, yerleşmiş sonuç. Kaynak kayıt zaten arayüzün kendi geçişini içeriyorsa büyük bir efekt daha eklemek onu tekrarlayabilir veya onunla çelişebilir.

Olayın tamamını normal hızda inceleyin. Zaman çizelgesinde yavaş ilerlemek örtüşmeleri bulmak için yararlıdır; ancak her bileşeni inceleme süreniz olduğundan aşırı kademelendirmeyi zarif gösterebilir. Gerçek izleyici akışı, anlatım ve diğer bilgiler dikkat için rekabet ederken bir kez görür.

Yapay zekâ ajanına uygulayabileceği yönlendirme verin

“Animasyonu daha akıcı yap” birçok değişkeni açık bırakır. Ajan sahneyi uzatabilir, sıçrama ekleyebilir, mesafeyi azaltabilir, bütün eğrileri değiştirebilir veya hareketli içeriği bulanıklaştırabilir. Bu değişikliklerin bazıları özgün amacı zayıflatabilir.

Daha yararlı bir yönerge, olayı ve istenen sonucu adlandırır: “Rapor panelini okuma konumuna hızlı getir, durmadan önce yavaşlat ve metni panele göre sabit tut. Mevcut son konumu ve iki saniyelik sabit beklemeyi koru.” Bu, ajana revize edeceği somut hareketi ve koruması gereken sınırı verir.

Karşılaştırma isterken aynı süre ve yolu kullanan alternatifler isteyin. Böylece easing kararı diğer değişkenlerden ayrılır. Akışın geri kalanını değiştirmeden bunları inceleyin. Bir davranış seçtiğinizde onu yalnızca eğri adıyla değil, hizmet ettiği olay üzerinden kaydedin.

Proje kaynak kodda tanımlanan animasyon kullanıyorsa eğriyi zamanlama kontrollerinin yakınında adlandırılmış bir değer olarak tutun. Bu, sonraki değişikliklerin izini sürmeyi kolaylaştırır. Kod yapısı yaratıcı sonucun kendisi değildir; ancak küçük bir easing revizyonunun ilgisiz sahnelere öngörülemez biçimde yayılmasını önleyebilir.

Sayısal karşılaştırmayı dikkatle okuyun

Saniyenin onda altısında dört yüz piksel ilerleyen temsili bir hareket düşünün. Easing eğrisi ne olursa olsun ortalama hızı saniyede yaklaşık altı yüz altmış yedi pikseldir. Eğri bu hızın nasıl dağıldığını değiştirir.

Normalize edilmiş zamanı birden çıkarıp sonucun küpünü alarak ve bu küpü birden çıkararak tanımlanan basit kübik ease-out için başlangıç hızı ortalamanın üç katıdır ve hedefte sıfıra iner. Doğrusal hareket ise baştan sona ortalama hızda kalır.

Bu karşılaştırma, ease-out’un neden hem hızlı hem kontrollü hissettirebildiğini açıklar: yer değiştirmenin daha büyük bölümünü erkenden tamamlar ve hedefe daha yumuşak yaklaşır. Aynı eğrinin uzun bir yolda neden aşırı kaçabileceğini de açıklar. Süre sabit kalırken mesafe arttığında başlangıçtaki hız büyür.

Dört yüz piksellik hareketin süresinin yarısındaki kareye bakın. Saniyenin onda üçü geçtikten sonra doğrusal ilerleme iki yüz piksel yol almıştır. Kübik ease-out ise üç yüz elli piksel gitmiş, aralığın ikinci yarısına yalnızca elli piksel bırakmıştır. Süre aynıdır, ancak panel hedefine çoktan daha yakındır.

Hedefin hızla tanınması gerektiğinde bu fark yararlıdır. İzleyici kesin bir yolu takip etmeli veya hareket sırasında bilgiyi incelemeliyse daha az yararlı olabilir. Hangi anın sabitlik gerektirdiğine karar verin, sonra o ana gerçek bir sabit bekleme verin. Ease-out eğrisine geçmek tek başına bekleme yaratmaz; hedefe yaklaşımı değiştirir.

Sayıları evrensel hız hedefi seçmek için değil, hareketi teşhis etmek için kullanın. Panel başlangıçta çok sert hissettiriyorsa yolu kısaltmak, son yavaşlamayı daha da uzatmaktan daha etkili olabilir. Kısa süreye rağmen ağır hissediyorsa aralığın ne kadarında neredeyse hiç hareket etmediğini inceleyin. Eğri, yol ve hedef tek bir olay olarak değerlendirilmelidir.

Son hareketi gerçek boyutunda değerlendirin

Büyük önizleme hem aşırı yolu hem küçük son metni gizleyebilir. Dışa aktarılan sahneyi hedef oynatıcının boyutunda izleyin. Yalnızca animasyonun bittiği ana değil, nereye bakacağınızı anladığınız ana dikkat edin.

Sonra efektin daha sade bir sürümünü deneyin. Hedefi aşmayı kaldırın, yolu kısaltın veya vurgu değişirken yüzeyi sabit tutun. Ürünü anlamak kolaylaşıyorsa daha basit sürüm yerini hak etmiştir. Daha zengin hareket önemli bir ilişkiyi açıklıyorsa koruyun ve izleyiciye sonucu kullanması için yeterli süre verin.

Hareketli grafikler için en iyi easing, olayı tutarlı hissettiren ve önemli bilgiyi incelenmeye hazır bırakan easing’dir. Eğri, izleyici onu düşünmek zorunda kalmadan eylemi takip ettiğinde başarılıdır.