Hareket hızı işlevleri nelerdir?

Oyun geliştirme için bu harika web sitesini buldum ve kolaylaştırıcı işlevlerin bir listesi var:

Site ne için bir açıklama içeriyor olsa da, kafamın üzerinden geçiyor. Hareket hızı işlevleri nelerdir ve ne için kullanılırlar?

Güncelleme

Phaser.io'nun kaynak kodundan işlevlerin kendilerine daha iyi bir örnek buldum . Bu işlevler, buradaki yanıtların önerebileceğinden çok daha basittir. Sadece bir parametre alırlar k. Cevabın bir parçası olarak, bunların nasıl kullanılacağını bilmek istiyorum.

Hareket hızı işlevleri enterpolasyon için, genellikle (zorunlu olarak değil) animasyon / kinematik hareketlerde kullanılır. Doğrusal enterpolasyon (lerp) duymuş olabileceğiniz bir şeydir. Diyelim ki gülen bir yüzü ekranın bir köşesinden diğerine geçiriyorsunuz (resminize göre). Bu, gülen yüzün A noktasından B noktasına sabit bir hızda hareket edeceği anlamına gelir. Bunu bir uzuv hareketine uygulayacak olsaydınız, çok robotik ve doğal görünmeyecekti - robotların kullandığı aktüatörler / servolar, bu şekilde. Açıkçası, insan uzuvları çok farklı bir şekilde hareket eder. Doğada göreceğiniz çoğu hareket, doğrusal enterpolasyonda görülen sabit, değişmeyen hızdan ziyade ilginç hareket eğrilerine sahip olacaktır.

Hareket hızı girin. Hareketi kolaylaştırmak, hızın sabit olmadığı anlamına gelir . Bunun başardığı şey daha gerçekçi görünmek. İnsanları izleyin, farklı hayvanları izleyin, rüzgarda bükülen bitkileri ve hatta yağmurlu bir günde nasıl yağmur yağarının yön değiştirdiğini izleyin. Havaya fırlatırken ve tekrar aşağı inerken topun hızını izleyin. Bir gitar teli koparırken hareketini izleyin. Bu hareket türlerinin her birinin hızı tanımlayan farklı bir eğrisi vardır.

Farklı hareket hızı eğrilerinin hareket açısından ne ürettiklerini anlamak için GreenSock'un GSAP ile çevrimiçi oynamanızı öneririm . Belirli bir adlandırılmış eğriyi istediğiniz hayal ettiğiniz hareketle eşlemek zaman ve pratik gerektiren şeylerden biridir. Ama temelleri kavradığınızda, çok eğleneceksiniz.

PS Dediğim gibi, hareket hızı sadece animasyon için kullanılmaz. Ses kaydırma, mantıksal / model düzeyinde iskelet hareketini etkilemek için veya zaman içinde belirli yumuşak bir değişime ihtiyaç duyabileceğini düşündüğünüz herhangi bir şey için kullanılabilir.

Bir hareket hızı işlevi, belirli bir aralıkta değerleri "hareket hızı işlevi" adı verilen bir değer kullanarak enterpolasyona almanızı sağlar. Bunlar, bir değer almak ve aralıktaki herhangi bir noktada, değeri belirli bir zamanda çıkarmak için tasarlanmış işlevlerdir.

Bu en iyi bir kod pasajına bakılarak açıklanabilir:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t ara doldurmanın geçerli saati (veya konumu). Bu, saniye veya kare, adım, saniye, ms, ne olursa olsun - birim toplam süre için kullanılanla aynı olduğu sürece

@b, özelliğin başlangıç ​​değeridir.

@c, özelliğin başlangıç ​​ve hedef değeri arasındaki değişikliktir.

@ d ara doldurmanın toplam süresidir.

Teşekkürler, http://upshots.org/actionscript/jsas-anlayış- kiralama

Bu doğrusal bir hareket hızı işlevinin tanımıdır. Bunu zaman içinde 't' olarak grafiklendirerek sadece doğrusal bir grafik elde ederiz.

Peki tamam. Onları ne için kullanabiliriz?

Bir başlangıç ​​ve bitişiniz olduğunda ve bunları canlandırmak istediğinizde, bir "ara" veya "hareket hızı işlevi" kullanabilirsiniz.

Örneğin, burada Angry Birds'den aldığım bir GIF:

Ekrandaki noktaya kadar kayan menüye dikkat edin, ancak yavaşça duruyor mu? Bunun nedeni, yerine oturan bir hareket hızı işlevidir. Bunları web'in her yerinde görebilirsiniz. Bu doğrusal bir kolaylık olsaydı, her şey aynı olurdu.

Müzik?

Elbette! Mevcut film müziği değerinin değerini alır ve toplam 1 saniyenin üzerinde o ve 0 arasında enterpolasyon yaparsak, sesimiz bir saniyelik bir süre içinde yavaşça kaybolur.

Sınırlayıcı Nesneler

Ayrıca herhangi bir fizik sistemi olmadan bir hareketli grafik üzerinde bu gibi efektler üretebilen sıçramaya izin veren işlevler de vardır (bkz: http://easings.net/#easeOutBounce ):

Ara doldurmayı arayarak web üzerinde daha fazla bilgi bulabilirsiniz.

Hareket hızı işlevleri bir zaman aralığında bir değeri başlangıç ​​numarasından bitiş numarasına değiştirmeye yarar.

Bu değeri, oyununuzdaki bir nesnenin konum, döndürme, ölçek, renk değiştirme ve değer kullanan diğer özellikleri gibi bir animasyonuna animasyon uygulamak için kullanırsınız.

Farklı hareket hızı işlevleri animasyonun "hissini" veya değerin zaman içinde nasıl değiştiğini belirler.

Yayınladığınız web sitesinde, grafik başlangıçtan bitişe kadar değişen değeri gösterir, bu nedenle canlandırdığınız nesnenin grafikteki topun yolunu izleyeceği anlamına gelmez.