Kesintisiz bir hareket döngüsü nasıl yapılır?

İlk kareyle son kare aynı görünüyor. Döngü yine de sıçrıyor.

Kesintisiz bir döngü, yalnızca aynı görünen görüntüleri değil, hareket durumlarını birbirine bağlamalıdır: sonraki tur, öncekinin oluşturduğu konumu, yönü ve hızı devam ettirmelidir. İzleyici yönü, hızı, ivmeyi, ışığı, dokuyu ve sesi de algılar. Bir nesne aynı konuma farklı bir hızla dönebilir. Nesne sabit kalırken gölgesi başlangıç durumuna sıçrayabilir. Görüntü kusursuz olsa bile arka plan müziği birleşme noktasında çıtırtı çıkarabilir.

Döngüyü tasarlarken birleşme noktasını, devam eden bir sistemin herhangi bir anı olarak düşünmek yararlıdır. Nesne, bitişten hemen önce ne yapıyor olmalı ve başlangıçtan hemen sonra ne yapmayı sürdürmelidir? Bu durumlar doğal biçimde bağlanıyorsa birleşme yerini çözmek çok daha kolaylaşır.

Kaynak animasyonun, kodlanmış kare dizisinin ve son oynatıcının her birinde denetlenmesi gereken bir sınır vardır.

Nasıl bir döngüye ihtiyacınız olduğuna karar verin

Sürekli bir döngü, belirgin bir başlangıcı yokmuş gibi davranır. Dönen bir desen, yörüngede dolanan bir nesne veya akan bir doku, her seferinde yeni bir mesaj sunmadan süresiz tekrarlanabilir. Anlatısal bir döngü ise kısa bir diziden sonra açılış durumuna döner. Bir ürün tanıtımı bir özelliği gösterebilir, sonuç üzerinde durabilir, ardından bilinçli bir geçişle başlangıca dönebilir.

Bunlar farklı tasarım sorunlarıdır. Sürekli dönüş, açının tutarlı biçimde ilerlemesini gerektirir. Anlatısal döngüde inandırıcı bir dönüş yolu veya bilinçli bir duraklama gerekir. Hikâyenin başa dönüşünü çapraz geçişle gizlemeye çalışmak, alttaki süreksizliği çözmeden hayalet görüntü oluşturabilir.

Önce neyin tekrarlanacağını tanımlayın. Bütün sahne mi, arka plan deseni mi, imleçle yapılan bir gösterim mi, yoksa tek bir dekoratif nesne mi? Ön planda izleyicinin okuması gereken bir cümle varsa metin sabit kalırken arka planın döngüye girmesi daha iyi olabilir. Her giriş hareketini tekrarlamak, videonun sürekli kesintiye uğradığı hissini yaratabilir.

Döngünün sessiz otomatik oynatma, açık bir yeniden oynatma düğmesi veya sesli kesintisiz gösterim için mi hazırlandığına da karar verin. Yayınlandığı ortam açılışı, bitişi ve görünür bir duraklamanın ne kadar kabul edilebilir olduğunu etkiler. Küçük bir arka plan öğesi olarak zarif duran döngü, tam ekran tekrarlanan bir mesaj olarak yorucu olabilir.

Yalnızca konumu değil, hareket durumunu eşleştirin

Soldan sağa ilerleyip geri dönen bir nokta düşünün. Bitişte başlangıçtaki konumuna ulaşır. Sola doğru hareket ederek gelip hemen sağa doğru yeniden başlıyorsa yön aniden değişir. Görüntüler eşleşir, ancak harekette keskin bir tersine dönüş vardır.

Sürekli bir döngüde sınırdaki durum, konumdan fazlasını içerir. Yön ve hız, hedeflenen hareketin gerektirdiği biçimde bağlanmalıdır. Yörüngesinde akıcı biçimde dolanan nesne, yoluna devam etmelidir. Sarkaç gibi hareket eden bir nesne uç noktada yön değiştirebilir; fakat sınıra tam hızla çarpmak yerine yön değiştirmeden önce uygun biçimde yavaşlamalıdır.

Basit bir periyodik örnek, bir çevrim boyunca kosinüs fonksiyonuyla tanımlanan yatay harekettir. Tam bir periyottan sonra konum ve hız aynı duruma döner. Bu, matematiksel olarak temiz bir sınır sağlar. Oluşturulmuş sahnedeki her görsel özelliğin kendiliğinden aynı periyodu paylaştığı anlamına gelmez.

Noktanın ölçeği, opaklığı ve gölgesi de değişiyorsa bu özelliklerin çevrimleri uyumlu olmalıdır. Altı saniyelik konum döngüsü ile dört saniyelik renk döngüsü ancak daha uzun bir ortak periyottan sonra birlikte tekrar eder. Yalnızca altı saniyeyi dışa aktarmak, noktanın yolu kesintisiz olsa bile renkte bir sıfırlama yaratabilir.

Sahneyi, sınırda birbiriyle uyuşması gereken durumlar bütünü olarak ele alın. En dikkat çekici uyuşmazlık ana nesnede değil, ikincil bir katmanda olabilir.

Bu yazının hareket gösterimi farkı görünür kılar. Saniyede otuz kareyle hazırlanmış üç adet altı saniyelik çevrim içerir. İlk nokta, ani yön değişimleri olan doğrusal bir gidiş-dönüş yolu izler; ikincisi her uç noktada hızı sıfıra düşüren bir kosinüs yolu izler.

Hız grafiği, iki yolun tekrarda neden farklı hissettirdiğini gösterir. Her biri altı saniyede bin elli piksel ileri gidip geri döner. Doğrusal yolda hız saniyede üç yüz elli pikseldir ve yön aniden tersine döner. Konum eşleşmesine rağmen sınırda hız negatiften pozitife sıçrar.

Kosinüs yolu uç noktalarda sıfır hıza ulaşır, ardından sonraki geçiş için hızlanır. En yüksek hızı saniyede yaklaşık beş yüz elli pikseldir; dolayısıyla daha yumuşak yön değişimi, nesnenin bütün çevrim boyunca daha yavaş hareket ettiği anlamına gelmez. Hızın farklı dağıtıldığı anlamına gelir. Yenilediğiniz döngünün ortası birden gereğinden enerjik geliyorsa yumuşak birleşmeyi bozmak yerine kat edilen mesafeyi azaltın veya çevrimi uzatın.

Döngü animasyonunun kare sınırını ayarlayın

Oluşturulmuş bir video ayrı karelerden oluşur. Bu durum, matematiksel bitiş noktası ile gösterilen son kare arasında küçük ama önemli bir ayrım yaratır.

Döngünün altı saniye ve saniyede otuz kare olduğunu varsayın. Yüz seksen kare içerir. Kare indeksleri sıfırdan başlıyorsa gösterilen kareler sıfırdan yüz yetmiş dokuza kadar gider. Tekrarlanan dizideki sonraki kare yeniden sıfırıncı karedir.

Sabit hızlı bir dönüşte genellikle gösterilen son kareyle tekrarlanan ilk kare arasındaki açısal artışın, dizinin içindeki artışlarla eşleşmesini istersiniz. Hem sıfır derecelik kareyi hem de onun tam tur sonundaki kopyasını özellikle eklerseniz aynı görsel durum birleşme noktasında iki kez görünebilir. Bu da akıcı devamlılık yerine çok kısa bir duraksama yaratabilir.

Uygulamanın ayrıntısı, görüntüyü oluşturan sisteme ve zamanlama kurallarına bağlıdır. Önemli alışkanlık, eşleşen bitiş anahtar karelerinin doğru ritmi garanti ettiğini varsaymak yerine gerçekten gösterilen kare dizisini incelemektir.

Remotion’ın Loop bileşeni ve güncel zamanlama belgeleri, bir kare aralığını tekrarlamayı açıklar. Açıkça karelere dayanan bir modelin yararlı örnekleridir: tekrarlanan aralığı kaç karenin oluşturacağını siz seçersiniz. Bu mekanizma, verdiğiniz içeriği tekrarlar; içeriğin içindeki süreksizliği onarmaz. Remotion’ın Loop belgeleri bileşenin kapsamını açıklar.

Hareket sürekliyse periyodik bir sistem kullanın

Dönen bir nesnede seçilen süre boyunca tek bir tam çevrim tanımlayın ve açıyı o anki kareden türetin. Yörünge hareketinde yatay ve dikey koordinatları aynı fazdan türetin. Tekrarlanan bir desende dokunun uzamsal periyoduyla kat edilen mesafeyi uyumlu kılın.

Bu yaklaşım çoğu zaman son anahtar kareyi yeterince yakın görünene kadar elle ayarlamaktan daha güvenilirdir. Periyodik bir tanım, durumun neden tekrar etmesi gerektiğine dayanak sağlar. Böylece birleşme noktasını tahmin ederek düzeltmek yerine görüntü oluşturma ve oynatma sorunlarına odaklanabilirsiniz.

Ancak matematiksel periyodiklik, hoş bir hareketle aynı şey değildir. Kusursuz tekrarlanan bir nesne yine de fazla hızlı hareket edebilir, tuhaf duraklayabilir veya metinle dikkat yarışına girebilir. Çevrim süresini ve hareket genliğini animasyonun rolüne göre seçin. Dekoratif bir arka plan, ana ürün eylemi kadar dikkat istememelidir.

Sürekli tekrarlanan harekete yumuşak hızlanma ve yavaşlama uygularken dikkat edin. Başta ve sonda yavaşlayan bir dönüş, her turda hız kaybeder. Bu, bilinçli olarak durup yeniden hareket eden bir nesneye uygun olabilir. Sabit hızla dönmesi amaçlanan bir tekerlek için genellikle yanlıştır. Birleşme konum açısından doğru olsa da tekrarlanan duraksama belirgin kalır.

Kaynakta tanımlanan animasyonda periyodu adlandırılmış tek bir değerde tutun ve bağımlı zamanlamaları ondan türetin. Birbirinden bağımsız sabit süreleri değiştirirken tutarsızlık yaratmak kolaydır. En basit sağlam sistem, çoğunlukla ilişkili katmanların açıkça tanımlanmış ortak bir fazı veya bilinçli biçimde ilişkilendirilmiş periyotları paylaştığı sistemdir.

Anlatının başa dönüşünü hikâyeye dahil edin

Bir ürün eylemi her zaman doğal olarak periyodik değildir. Dosya dışa aktarılır, mesaj gönderilir veya rapor tamamlanır. Başlangıca dönmek için görüntüyü tersine oynatmak, hiç gerçekleşmemiş bir geri alma işlemi izlenimi verebilir.

Anlatısal döngüde başa dönüşü ürün davranışı gibi gizlemek yerine bir kurgu olayı haline getirin. Tamamlanmış rapor sabitlenebilir, sahne kısa süreliğine markalı genel görünüme dönebilir ve sonraki tur bu görünümden başlayabilir. Dönüş görünürdür ama tutarlıdır.

Başka bir seçenek, zaten başlangıca benzeyen bir durumda bitirmektir. Bir dizi sorudan sonuca ilerleyip aynı sorunun bir sonraki örneğini sunabilir. Bu, ürünün yaptığı işlemi geri çevirdiği izlenimini vermeden kavramsal bir döngü oluşturur.

Sırf başa dönüşü gizlemek için sonuç anlaşılmadan görüntüyü kesmeyin. Döngünün hâlâ bir şey anlatması gerekir. İzleyici sonucu sabit biçimde hiç göremiyorsa kesintisiz birleşme ikincil bir başarı olarak kalır.

Kısa bir tanıtım döngüsünde ölçülü bir duraklama yararlı olabilir. İzleyiciye okuma fırsatı verir ve yeniden başlangıcın bilinçli görünmesini sağlar. Amaç, bedeli ne olursa olsun algılanabilir her sınırı ortadan kaldırmak değildir. Amaç, istediğiniz deneyimi destekleyen bir sınır seçmektir.

Birleşme yerini açığa çıkarabilecek her katmanı inceleyin

Ana nesne doğru döngüye girerken arka plan girmeyebilir. Gürültü, parçacıklar, gradyanlar, gölgeler, yansımalar ve kamera hareketinin her biri başa dönüşü açığa çıkarabilir.

Rastlantısallık sık karşılaşılan bir nedendir. Sahne her oluşturma veya oynatmada yeni rastgele konumlar üretiyorsa başlangıç ve bitiş tutarlı biçimde eşleşmeyebilir. Sabit bir rastgelelik tohumu sahneyi yeniden üretilebilir kılabilir; fakat tek başına rastgele süreci periyodik yapmaz. Durumun yine de geri dönmesi veya sıfırlamanın bilinçli biçimde gizlenmesi gerekir.

Parçacıklar sona yakın ortaya çıkıp başlangıçta kaybolabilir. Bir doku, tam bir karo genişliği kadar değil, ona çok yakın bir mesafe ilerleyebilir. Kamera başlangıç konumuna dönerken odak uzaklığı veya alan derinliği farklı olabilir. Nesne aynı konumda olsa bile belli belirsiz bir gölge aniden değişebilir.

Mümkünse birleşme noktasını ikincil katmanları ayırarak inceleyin. Sonra bütün kompozisyonu geri getirin. Ayırmak nedeni bulmaya yardım eder; tam sahne ise düzeltmenin görsel olarak tutarlı kalıp kalmadığını gösterir.

Döngü kayıtlı görüntü kullanıyorsa bazı malzemelerin görünmez bir tekrara uygun olmayabileceğini kabul edin. Birinin göz kırpması, düzensiz dalga veya değişen yansıma; başka bir kesit, bilinçli bir geçiş ya da döngüye alınan daha kısa bir bölüm gerektirebilir. Kesintisiz sonuç elde etmeye zorlamak, zarifçe tasarlanmış açık bir yeniden başlangıçtan daha görünür bozulmalar yaratabilir.

Sesi ayrı bir birleşme sorunu olarak ele alın

Ses, görüntünün sakladığı birleşme yerini açığa çıkarabilir. Dalga biçimindeki ani süreksizlik çıtırtı yaratabilir. Süren bir ses, birleşme noktasında tını değiştirebilir. Dalga biçimi geçişi akıcı olsa bile bir müzik cümlesi ritmik açıdan yanlış hissettiren bir noktada yeniden başlayabilir.

Hem sinyal sınırını hem de müzikal veya anlatısal sınırı denetleyin. Kısa bir çapraz geçiş çıtırtıyı azaltabilir; ancak kısa bir ses darbesini iki kez duyurabilir veya işitilir bir seviye düşüşü yaratabilir. Her döngüye aynı geçişi uygulamak yerine örtüşmeyi malzemeye göre seçin.

Sürekli bir ortam sesi için doku ve seviyenin uyumlu olduğu bir bölüm arayın. Müzikte cümle ve vuruş yapısını koruyun. Ürün sesinde, sesin her çevrimde bir kez duyulmasının uygun olup olmadığına veya tekrarının rahatsız edici hale gelip gelmediğine karar verin. Birkaç saniyede bir tekrarlanan başarı sesi, deneyimin baskın öğesine dönüşebilir.

Sessiz sürümü de izleyin. Döngünün anlamı birleşme noktasındaki bir sese bağlıysa otomatik oynatma ortamlarında çalışmayabilir. Temel durum değişiklikleri görünür kalmalıdır. Ses, yeni bir turun başladığını gösteren tek ipucu olmadan döngüyü pekiştirebilir.

Yalnızca ses düzenleyicisinin önizlemesini değil, son kodlanmış dosyayı inceleyin. Kodlama ve oynatıcı davranışı, zamanlama veya dolgu sürelerinde farklılık yaratabilir. Temiz kaynak dalga biçimi yararlı bir kanıttır; ancak izleyicinin duyduğu şey teslim edilen gerçek döngüdür.

Animasyonla birlikte oynatıcıyı da doğrulayın

Kusursuz periyodik bir kaynak bile oynatıcı dosyayı yeniden yüklüyorsa veya sınırı kötü yönetiyorsa duraklıyor gibi görünebilir. Tersine, oynatıcı arabelleğe alma veya gösterim davranışıyla kaynaktaki küçük bir süreksizliği gizleyebilir. Zaman çizelgesi önizlemesinden davranışını çıkarmak yerine gerçek hedef ortamda deneyin.

Birkaç tur oynatın. İlk geçişte yükleme, kod çözme veya posterin kaldırılması gibi sonraki turlarda yaşanmayan işlemler olabilir. Tekrarlanan sınırı normal hızda izleyin ve görüntüye bakmadan dinleyin. Dikkat aynı anda yalnızca bir kanala yöneldiğinde birleşme yerini fark etmek daha kolay olabilir.

Döngü CSS ile uygulanıyorsa yineleme sayısı ve yön, animasyonun nasıl tekrarlandığını belirler. Dönüşümlü yön, aynı yönde başlangıca dönmekten farklıdır. MDN bu özellikleri ve işleyişlerini belgeler; ancak seçilen davranışın yine de hedeflenen hareketle uyuşması gerekir. MDN’nin iteration-count başvurusu, bu uygulama denetimi için yararlı bir başlangıçtır.

Son teslim MP4 ise tam olarak dışa aktardığınız dosyanın amaçlanan oynatıcıda tekrarlandığını doğrulayın. Yerine bir tarayıcı animasyonu koyup videonun aynı davranacağını varsaymayın. Matematiksel zaman çizelgesi, görüntü oluşturma süreci, kodlanmış dosya ve oynatma ortamı birbiriyle ilişkili ama ayrı aşamalardır.

Altı saniyelik, saniyede otuz karelik dönüşte iki derecelik artış, sıfırıncı kareye sıfır derece ve yüz yetmiş dokuzuncu kareye üç yüz elli sekiz derece açı verir. Tekrarlanan sonraki kare sıfıra döner; böylece çember boyunca aynı iki derecelik ilerleme sürer. Ayrı bir üç yüz altmış derecelik kare eklemek, sıfır derece durumunu sınırda yinelemek olur. Bu sayısal örnek yalnızca sabit hızlı dönüşle ilgilidir; başka özellikler içeren bir sahnede onların da bağımsız denetlenmesi gerekir. Örnek, akıcılık izlenimine güvenmek yerine kare sayısı sorununu incelenebilir kılar.

Geri bildirimi birleşme noktasına yöneltin

“Döngüyü daha akıcı yapın” demek; gerçek uyuşmazlığı çözmeden daha yavaş animasyona, çapraz geçişe veya yeni bir hız eğrisine yol açabilir. Birleşme noktasının iki tarafında neyin değiştiğini anlatın.

Yararlı bir not şöyle olabilir: “Nesne doğru konuma dönüyor ama sola hareket ederek geliyor ve tam hızla sağa doğru yeniden başlıyor. Yolu ve süreyi koruyun; yön değişimini bilinçli hale getirin veya sınırdaki hızı eşleşen periyodik bir hareket kullanın.” Bir başkası şöyle diyebilir: “Görüntü temiz biçimde tekrarlanıyor, ancak ortam sesi birleşme noktasında çıtırdıyor. Ses sınırını ayrı inceleyin.”

Son denetimi ifade etmek kolay, gerçekleştirmek zordur: sonraki çevrim, öncekinin kurduğu deneyimi sürdürmelidir. Konumun, hareketin, ikincil katmanların, sesin ve oynatmanın hepsi uyuşmalıdır. Uyuştuklarında izleyici, dosyanın yeniden başladığı anı tekrar tekrar fark etmek yerine görüntüde veya mesajda kalabilir.