--- title: "Easing nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/easing language: tr --- # Easing nedir? Easing, bir animasyonun zaman boyunca ilerleme hızının nasıl değişeceğini belirleyen eğridir. Diğer adlar: Hız eğrisi. ## Nerede işine yarar? Başlangıçta hızlanma veya sonda yavaşlama, hareketin okunmasını ve hissini değiştirir. Eğri, mesafe ve süre birlikte değerlendirilir. Aynı eğri her etkileşimde aynı sonucu üretmez; kullanıcının kontrol ettiği bir hareket ile otomatik geçişin ihtiyacı farklı olabilir. ## Bir cümlede uygulaması Bir panel kapanırken kısa bir hızlanma, açılırken hedefe yaklaşan bir yavaşlama kullanmak. ## Neyle karıştırılmamalı? Easing animasyonun toplam süresi değildir; o süre içindeki ilerleme davranışıdır. ## Aynı mesafe, aynı süre; bambaşka bir his Bir yan panelin ekranın sağından açıldığını düşün. Başlangıç ve bitiş konumu belli, süre de aynı. İlk sürüm bütün yolu eşit hızla geçiyor; ikinci sürüm hızlı başlıyor ve yerine yaklaşırken yavaşlıyor. İki panelin son karesi aynı olsa da hisleri farklıdır. Easing, animasyonun toplam süresi içinde değişimin nasıl dağıldığını tanımlar. Bu kavramı anlamak için önce ‘nereye gidiyor?’ sorusunu ‘hangi hızla ilerliyor?’ sorusundan ayırmak gerekir. Buradaki panel yalnız anlatım örneğidir; herhangi bir tarayıcı için performans sonucu iddia etmez. Bir arayüz kontrolünde ilk tepkinin görünmesi önemlidir. Hareketin başlangıcına uzun bir yavaşlanma yerleştirildiğinde düğmeye basıldıktan sonra hiçbir şey olmuyormuş gibi hissedilebilir. Bunun çözümü her animasyonu çok kısaltmak değildir. Bazen aynı toplam süre içinde başlangıcı belirginleştirmek, bekleme algısını değiştirir. Yine de easing tek başına geciken ağ yanıtını veya yoğun hesaplamayı çözmez. Animasyon eğrisini değiştirmekle uygulamanın gerçekten daha erken yanıt vermesi farklı konulardır. Tasarım kararı bu teknik ayrımı gizlememelidir. Panel açılırken içindeki başlık ve düğmelerin ayrı zamanlamalarla hareket etmesi mümkündür. Fakat her öğeye başka bir eğri vermek kısa sürede dağınık bir görünüm üretir. Önce ana nesnenin davranışı seçilir; bağlı öğeler bu hareketin parçası olarak değerlendirilir. Kapatma ise açılmanın mekanik olarak ters çevrilmiş kopyası olmak zorunda değildir. Kullanıcı kapatmayı seçtiğinde yeni içeriğe geçmek istiyor olabilir; gereksiz bekleme yaratmayan bir çıkış tercih edilebilir. Ortak karakter korunurken göreve göre farklı hız dağılımları kullanılabilir. Fizik hissi veren yaylı bir hareket, ürünün kişiliğine katkı sağlayabilir. Ancak fazla sıçrama bir fiyatın, adresin veya form alanının okunmasını zorlaştırabilir. Hedefi aşan ve geri dönen nesnede metin de birlikte hareket ediyorsa kullanıcı sabitlenmesini bekler. Özellikle sık kullanılan arayüzlerde bu maliyet görünür olur. Bir hareket kütüphanesi oluştururken yalnız eğrinin adına değil, uygulanacağı mesafeye, özelliğe ve tekrar sıklığına bakılır. Aynı eğri küçük bir ikon değişiminde sakin, büyük bir panelde agresif hissedebilir. Tasarım sisteminde eğrinin teknik değerinin yanında davranış örneği bulundurmak seçimleri kolaylaştırır. Bir tasarımcı ‘giriş’ adını gördüğünde hangi nesnenin nasıl belirdiğini anlayabilmelidir. Geliştirici de aynı eğrinin kapanışta neden farklı süreyle kullanıldığını okuyabilmelidir. Bu küçük açıklama, her yeni bileşende eğri tahmini yapmayı azaltır. Yine de sistem katı bir yasak listesine dönüşmez; farklı görev ortaya çıktığında yeni hareket mevcut örneklerle birlikte değerlendirilir ve gerekçesi görünür şekilde kaydedilir. ### İlk karşılık Eylemden hemen sonra görünen değişimi kontrol et. Kullanıcının sistemin çalıştığını anlaması için önce küçük bir renk veya durum yanıtı gerekebilir. Sonraki mekânsal hareket daha uzun olsa bile ilk geri bildirim gereksiz bir gecikmenin arkasında kalmamalıdır. ### Varış davranışı Nesne hedefe yaklaşırken okumayı veya seçimi kolaylaştıracak biçimde sakinleşiyor mu? Hedefi aşan hareket gerçek bir işlev taşıyor mu? Son kareye çok geç yerleşmek, kısa toplam süreye rağmen kontrolün kararsız hissedilmesine yol açabilir. ### Mesafe ve bağlam Bir kartın birkaç piksel değişimiyle tam ekran geçişini aynı değerlerle değerlendirme. Ekran genişlediğinde hareket mesafesi artabilir. Eğrinin ismini korumak yerine aynı karakterin farklı boyutlarda kullanıcıya nasıl hissettirdiğini incele. ## Süre başka, hız dağılımı başka ### Yalnız süreyi değiştirmek Animasyonu beğenmeyince toplam süre kısaltılır. Fakat başlangıçta hâlâ ağır hissedebilir veya bitişte ani durabilir. Sorun değişimin nerede yoğunlaştığıysa süreyi azaltmak aynı davranışı daha kısa zamanda tekrarlar. Bu yöntem bazen işe yarasa da hareketin karakteriyle ilgili kararı açıklamaz; farklı bileşenlerde tutarsız sonuçlar doğurabilir. ### Eğriyi görevle seçmek Önce ilk tepki ve son yerleşme beklentisi belirlenir. Sonra sürenin hangi bölümünde daha fazla değişim olacağı seçilir. Hızlı başlangıç, yumuşak varış veya düzenli ilerleme; nesnenin görevine göre değerlendirilir. Süre ve eğri birlikte ayarlanır. Sonuç, yalnız sayısal olarak kısa değil, etkileşimin nedenine uygun bir hareket olur. ## Hız değişimini davranışa bağlamak Aynı süreye sahip iki hareket, hızları farklı dağıldığında farklı hissedilir. Bir panelin yumuşak durması ile sabit hızda ilerleyen bir gösterge aynı eğriyi gerektirmez. Eğri seçilirken başlangıçtaki tepki ve sondaki yerleşme birlikte incelenir. - Hareketin mesafesi ve süresini birlikte değerlendir. - Sürekli döngülerde birleşme noktasındaki hızı kontrol et. - Geri dönüşte önceki hareketin kuyruğunun takılmadığını dene. ## Her animasyonda ease-in-out kullanılabilir mi? Teknik olarak kullanılabilir; fakat davranışa her zaman uymaz. Kullanıcı bir kontrolü tetiklediğinde yavaş başlangıç gecikme hissi yaratabilir. Sabit dönmesi gereken bir halka ise her turda hızlanıp yavaşlayınca kesintili görünebilir. ## Bu karar, işinin neresinde? Easing kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Video & motion](https://androverse.com.tr/hizmetler/video-motion) ## Karar masası ### Linear easing her zaman mekanik ve kötü müdür? Hayır. Düzenli ilerleme gereken bir göstergede veya sabit hızın anlam taşıdığı görselleştirmede uygun olabilir. Sorun, aynı davranışı bütün arayüz geçişlerine düşünmeden uygulamaktır. Bir menünün açılmasıyla zamanın akışını temsil eden gösterge aynı beklentiyi taşımaz. Eğrinin iyi veya kötü oluşu tek başına adına değil, temsil ettiği değişime bağlıdır. ### Bir projede kaç easing kullanmalıyız? Evrensel bir sayı yoktur. Çok sayıda birbirine yakın eğri ekiplerin seçim yapmasını zorlaştırabilir. Başlangıç için birkaç davranış ailesi tanımlamak yararlıdır: giriş, çıkış ve küçük durum değişimi gibi. Her ailede kullanım amacı belirtilir. Yeni bir eğri ancak mevcut davranışın çözemediği somut bir ihtiyaç ortaya çıktığında sisteme eklenir. ### Easing eğrisini değiştirmek performansı düzeltir mi? Tek başına değil. Eğri hareketin zaman içindeki ilerleyişini belirler; tarayıcının yaptığı işin maliyeti ayrı bir konudur. Ağır görseller, pahalı hesaplamalar veya çok sayıda eşzamanlı güncelleme takılmaya neden olabilir. Önce gerçek darboğaz bulunur. Tasarım tarafında daha az öğeyi hareket ettirmek ve gereksiz tekrarları kaldırmak da değerlendirilir; eğri bunların yerine geçmez. ## Bir paneli üç farklı karakterde aç Aynı paneli, aynı başlangıç ve bitiş konumlarıyla üç sürümde düşün. Amacın en gösterişli seçeneği bulmak değil; değişimin hız dağılımını fark etmek olsun. Toplam süreyi ilk karşılaştırmada sabit tut. - [ ] İlk sürümde düzenli ilerleme, ikincide hızlı başlangıç ve yavaş varış, üçüncüde yavaş başlangıç ve hızlı bitiş kullan. Her birinin ilk anını ve son anını ayrıca izle. Kontrolün ne zaman kullanılabilir hissettirdiğini kısa bir cümleyle kaydet. - [ ] Panelin içine gerçek uzunlukta bir başlık ve iki işlem koy. Hareket sırasında metnin okunurluğunu ve son konumun kestirilebilirliğini düşün. Boş kutuyla iyi görünen hareket, içerik eklendiğinde aynı sonucu vermeyebilir; kararı dolu yüzey üzerinde ver. - [ ] Seçtiğin hareketi daha küçük bir ekrana ve azaltılmış hareket sürümüne taşı. Mesafeyi ve hareket miktarını gerektiğinde azalt; işlemin tamamlandığını gösteren durumu koru. Son kararı yalnız eğri koduyla değil, nerede ve neden kullanılacağını anlatan kısa bir notla sakla. Easing animasyonun ne kadar sürdüğüyle değil, süreyi nasıl kullandığıyla ilgilidir. Bu ayrımı koruduğunda ‘biraz yumuşat’ gibi belirsiz geri bildirimleri başlangıç, varış ve hız dağılımı üzerine konuşulabilir kararlara çevirebilirsin. ## Bağlantılı kavramlar - [Motion design](https://androverse.com.tr/sozluk/motion-design) — Motion design, grafik öğelerin zaman, hareket ve ritim üzerinden anlam taşımasını tasarlamaktır. - [Mikro etkileşim](https://androverse.com.tr/sozluk/mikro-etkilesim) — Mikro etkileşim, belirli bir küçük eyleme veya durum değişimine verilen odaklı arayüz davranışıdır. - [Keyframe](https://androverse.com.tr/sozluk/keyframe) — Keyframe, bir animasyonda belirli bir andaki özellik değerlerini tanımlayan anahtar karedir. ## Konuyu uygulamaya taşı - [Video & motion](https://androverse.com.tr/hizmetler/video-motion) — Easing kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Her şey hareketli. Peki göz nereye?](https://androverse.com.tr/blog/her-sey-hareketli-peki-goz-nereye) — Easing ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [MDN — Easing fonksiyonları](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)