jQuery animasyonu geriye ve ileri kaydırma

Question

Bir antrenörün oyuncuları ekrana ekleyebilmesini, hareket yönünü ayarlamasını (HTML5 kanvasını kullanarak okları çizerek) ve sonra 'play' (oynat) tuşuna basarak futsal (kapalı futbol) antrenörlük uygulaması yapıyorum. 'tüm oyuncuları ekranda hareket ettirmek. Bir oyuncu, bir oyuncunun arka plan görüntüsü olan bir divdan oluşur.

Animasyon jquery .animate() işlevi kullanılarak gerçekleştiriliyor. Tek yapmam gereken oyuncuyu div'sleft ve top css position niteliklerini değiştirmektir.

Bunu nasıl yapılabileceği üzerinde iki şey ve emin yapmak istiyorum: Bir jQuery kaydırıcı oluşturmak ve animasyon gerçekleşir olarak incremently taşımak isteyen

1. . Tahmin etmeden önce bir animasyonun toplam uzunluğunu hesaplayarak bunu yapar mıyım?

2. jQuery kaydırıcısını ileri ve geri hareket ettirmek istiyorum - animataionu tersine çevirmek ve gerektiğinde duraklatmak için. Animasyon için divleri hareket ettirdiğimiz ve çerçeve-kare sıralı bir animasyon yapmadığımız sürece bu mümkün.

Answer 1

üzerinde çalışıyoruz gibi geliyor?

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which 
$(playerdiv).data("startTop",startposition.top); 
$(playerdiv).data("startLeft",startposition.left); 

Daha sonra vb

left = $(playerdiv).data("startTop") 

kullanarak geri alabilirsiniz

Adım seçeneklerinden yararlanarak animasyonlar için bir geri arama sağlayabilirsiniz, böylece kaydırıcınızı buna göre güncelleyebilirsiniz.

$(playerdiv).animate({ 
    top : targetTop, 
    left : targetLeft, 
    step, function(){ magic happens here 
}) 

Answer 2

ben bu şekilde yapardı:

1. kullanıcı, "Play" varacakları yere mevcut konumdan div'leri animasyon başlamak tıklarsa

   . Kolayca Kaydırıcının konumuna bağlı olarak zaman ve birer bölümdür pozisyon kalan hesaplayabilir:
   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
   • başlangıçDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
   • startingTime = totalDuration * sliderPosition;

   (veya sliderPosition 0 ve 1 arasında bir şey olduğunu, böyle bir şey) kullanıcı tüm bölümlerde; .stop() yöntemini çağırın kaydırıcı tekrar tıklarsa

2. : yapacaklar bu şekilde animasyonu durdurun ve bunları statik olarak ayarlayabileceksiniz: div'ların olması gereken pozisyonu hesaplayın ve bu noktaya statik olarak taşıyın. Kullanıcı "kaydırır" ve "Oynat" hala etkinleştirilmişse, animasyon kaydırıcının düştüğü noktadan ileriye doğru devam etmelidir.

Güzel bir proje nasıl başlangıç ​​konumunu kaydetme hakkında, animasyon başlamadan önce :)