Kodla animasyon nasıl oluşturulur?

Bir nesnenin sağa kaymasını sağlamak için kod, resim her çizildiğinde yatay konumunu küçük bir miktar artırır. Örneğin, 0 konumundan başla ve her karede 5 ekle. Nesne ekranda pürüzsüzce hareket ediyormuş gibi görünür. Yatay konuma genellikle x koordinatı denir. Bu basit toplama, kayma hareketini yaratır. 4

Bir nesnenin boyutunu adım adım değiştirmek onu büyütür veya küçültür. Örneğin, her karede genişliğini ve yüksekliğini 2 piksel artır. Rengini kademeli olarak değiştirmek, örneğin her seferinde biraz kırmızı eklemek, tonunu kaydırır. Bu özellik değişiklikleri, ekranda herhangi bir hareket olmasa bile animasyon olarak algılanır. Bunlar, hareketin tek animasyon türü olmadığını gösterir. 5

Animasyon, birbiri ardına gösterilen bir dizi hareketsiz resimdir. Her hareketsiz resme kare denir. Kareler hızlı gösterildiğinde, gözün bunları sürekli hareket olarak algılar. Bir flipbook düşün: her sayfa bir karedir ve hızlı çevirmek hareket yaratır. Kod, resmi güncellenmiş özelliklerle çizerek kareler oluşturur. 6

Bir karakterin hareket ediyormuş gibi görünmesini sağlamak için kod, o karakterin farklı çizimlerini sırayla gösterir. Örneğin, bir bacağı kalkmış, sonra düz, sonra tekrar kalkmış göster. Her çizim bir karedir. Sırayla hızlı gösterildiğinde, karakter yürüyormuş gibi görünür. Kod, her karede hangi resmin gösterileceğini basitçe değiştirir. 7

Kareler arasındaki süre çok önemlidir. Kareler çok yavaş gelirse, hareket bir slayt gösterisi gibi sıçramalı görünür. Yeterince hızlı, genellikle saniyede birçok kare gelirse, hareket pürüzsüz görünür. Kod, bir sonraki karenin ne zaman çizileceğini kontrol etmek için bir zamanlayıcı veya döngü kullanır. Tutarlı zamanlama, pürüzsüz animasyonun anahtarıdır. 8

Kare başına daha büyük bir değişiklik daha hızlı hareket, daha küçük bir değişiklik daha yavaş hareket yaratır. Örneğin, her karede konuma 10 eklemek, 5 eklemekten iki kat daha hızlı hareket ettirir. Hız, her seferinde ne kadar değiştirdiğinle belirlenir. Hızı etkilemek için kareler arasındaki süreyi de değiştirebilirsin. Hem adım büyüklüğü hem de zamanlama, animasyonun ne kadar hızlı görüneceğini kontrol eder. 9

Kod, bir sonraki kareye karar vermek için basit hesaplamalar kullanır. Örneğin, yeni konumu elde etmek için mevcut konuma bir sayı ekler. Bu hesaplamalar hareketin nasıl görüneceğini kontrol eder. Eğriler veya ivme yaratmak için çarpma veya başka matematik kullanabilirsin. Hesaplamalar, animasyonu ileriye doğru sürükleyen kurallardır. 10

Değerlerin zaman içinde değişme biçimi geçiş stilini verir. Her karede aynı miktarı eklemek gibi sabit bir değişiklik eşit ve doğrusal görünür. Küçük değişikliklerle başlayıp bunları artırmak gibi diğer desenler, hareketin yavaş başlayıp hızlanmasını sağlar. Kod, bu stilleri yaratmak için farklı formüller kullanabilir. Geçiş stili, animasyonun hissini etkiler. 11

Kod aynı adımları tekrar tekrar yineler: bir özelliği değiştir, resmi çiz, kısa bir süre bekle ve tekrarla. Animasyonu devam ettiren şey bu tekrarlanan döngüdür. Döngü olmadan animasyon tek bir değişiklikten sonra durur. Döngü sürekli çalışır, resmi saniyede birçok kez günceller ve yeniden çizer. 12

Tam bir örneği takip et: bir nesneyi 0 konumunda başlat. Her karede konumuna 5 ekle, saniyenin 1/60'ı kadar bekle ve yeniden çiz. Nesne sağa doğru pürüzsüzce kayar. Tüm parçaları bir arada görmek—başlangıç değeri, kare başına değişiklik, bekleme ve yeniden çizme—hareketin nasıl ortaya çıktığını gösterir. Kod animasyonunun özü budur. 13

Yeni başlayanların sık yaptığı bir hata, bir değeri değiştirip resmi bir daha hiç çizmemektir. Örneğin, konum değişkenini güncellersin ama çizim fonksiyonunu çağırmayı unutursun. Yeniden çizim olmadan ekranda hiçbir şey değişmez. Özellikleri değiştirdikten sonra her zaman yeniden çizmeyi unutma. Ekran yalnızca en son çizdiğini gösterir. 14

Bir başka hata da yanlış zamanlamadır: kareler çok hızlı, çok yavaş veya düzensiz zamanlarda gösterilir. Kareler çok hızlıysa, hareket görülemeyecek kadar hızlı olabilir; çok yavaşsa, sarsıntılı görünür. Düzensiz zamanlama animasyonun bozuk görünmesine yol açar. Kare zamanlamasını kontrol etmek için tutarlı bir zamanlayıcı veya döngü kullan. Pürüzsüz sonuçlar için zamanlamayı test et ve ayarla. 15

Özetle animasyon, özellikleri zaman içinde değişen ve bir döngü içinde kare kare gösterilen bir resimdir. Zamanlama ve hesaplamalar hareketin hızını ve stilini kontrol eder. Farklı efektler yaratmak için konumu, boyutu, rengi veya gösterilen resmi değiştir. Yeniden çizmeyi ve zamanlamayı tutarlı tutmayı unutma. Bu temellerle kendi kod animasyonlarını oluşturmaya başlayabilirsin. 16