Warum Snap.svg nur einige Attribute in der Gruppe animiert?

Question

Warum animiert Snap.svg nur einige Attribute gruppierter Elemente? In diesem Jsfiddle wenn Elemente gruppiert sind, animieren sie die Opazität und transformieren aber nicht den Radius. Wenn Animation auf ein einzelnes Element angewendet wird, sind alle Attribute animiert. Ich verstehe es nicht.

(function(){ 
var s = Snap("#svg"); 
var c1 = s.circle(10, 10, 10); 
var c2 = s.circle(50, 20, 10); 
var c3 = s.circle(50, 100, 10); 
var points = s.group(c1,c2); 
var states = 
[ 
    {  
      transform: 'r90,25,25', 
     r: 10, 
     opacity: 0.3 

    }, 
    {  
      transform: 'r90,200,200', 
     r: 5, 
     opacity: 1 
    }, 
]; 
function animateGroup(el, i) { 
    points.animate(states[i], 1000, function() { 
    animateGroup(el, ++i in states ? i : 0); 
    }) 
} 
function animateOne(el, i) { 
    c3.animate(states[i], 1000, function() { 
    animateOne(el, ++i in states ? i : 0); 
    }) 
} 
animateGroup(points, 0); 
animateOne(c3,0); 

})(); 

Answer 1

Dies liegt daran, dass eine Gruppe kein Radiusattribut besitzt. Sie können nur Attribute animieren, die für dieses spezifische Element gelten (von denen eines eine Gruppe ist).

Wenn Sie mehrere Kreise zum Beispiel animieren möchten, würden Sie brauchen, ist ein ‚Set‘ und wenden Sie die Animation zu diesem Satz zu verwenden (oder einen Satz mit einem selectAll oder etwas und Schleife über sie mit einem .forEach greifen() Methode).

Sie etwas versuchen könnten, wie ...

points.selectAll('circle').animate({ r: '20' }, 2000); 

dies kann aber nicht ganz die Arbeit mit einem separaten Objekt, die unterschiedlichen Radius benötigt, so dass Sie nur eine typische Schleife sonst verwenden müssen möglicherweise.

points.selectAll('circle').forEach(function(el, index) { 
    //use the index to access from the object, eg states[ index ] maybe ?? 
    el.animate(states[ index ], 2000) // untested 
});