Nasıl kullanılır: Raphael .animateWith()

Question

Hızlı animasyonları senkronize halde tutmak için Raphael'de .animateWith() kullanılmış mı? Bu zayıf bir şekilde belgelenmiştir. Kütüphanenin yaratıcısı video demonstration içeriyor ancak bulabileceğim bir kod yok.

Tempoyu belirtmek için en sonunda aşağı yukarı hareket edecek bir çizgiden (metronomun kolu) ve yamuk şekilli "ağırlıktan" oluşan bir Javascript metronomum var. Ben çalışan keman here sahip ve söz konusu hatlar şunlardır: Eğer keman kontrol etmek ve bunu bir yüksek tempo ve yaklaşık 20 kene verirsem, kol arkasında ağırlık lag görmelisiniz

 var ticktock = Raphael.animation({ 
      "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}, 
      "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }} 
     }, interval).repeat(repeats/2); 
     arm.animate(ticktock); 
     weight.animateWith(arm, ticktock, ticktock);  

. (Lütfen birkaç kez deneyin - Değilse Murphy Kanunu vb) Ben tam olarak animateWith() engellediğini düşündüm. Belki yanlış kullanıyorum.

.animateWith() işlevi için Raphael source'a bakarsanız, her animasyonun FWIW .start parametresini eşzamanlıyor. Raphael documentation kaynaktan

Answer 1

:

Parametreler:

elemanı - [nesne] eleman

hayvanlardaki ile senkronize etmek için - [nesne] animasyon

ile senkronize etmek için

animasyon kısmı: - animasyon [nesne] animasyon nesne, Raphael.animation bkz

yüzden senin kod sadece .animateWith() için ikinci parametre içine animasyonu ayırmak ve geçmesi gerektiğini düşünüyorum sadece edilir:

{ 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
} 

Yani bunu yapabilirsiniz:

var animationDone = function() { 
    tick(this, repeats, done); 
}; 

var ticktockAnimationParam = { 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
}; 
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats/2); 
arm.animate(ticktock); 
weight.animateWith(arm, ticktockAnimationParam, ticktock);  

bakınız keman: http://jsfiddle.net/wDwsW/7/

Bilginize, ben yerine anonim fonksiyonları kullanmak yerine, dışarıdaki geri çağırma işlevi taşındı.