为什么Snap.svg只动画组中的一些属性？

Question

为什么Snap.svg仅对分组元素的某些属性进行动画处理？在这个Jsfiddle当元素被分组时，他们为不透明度和变形设置动画而不是半径。当将动画应用于单个元素时，所有属性都会生成动画。我不明白。

(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

这是因为一个组没有radius属性。您只能为适用于该特定元素（其中一个是组）的属性制作动画。例如，你需要使用'set'并将动画应用到该set（或者用setAll或something获取一个set并用.forEach（）方法遍历它）方法）。

你可以尝试像...

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

但这可能不太一个单独的对象，需要不同的半径，所以你可能只是需要用一个典型的循环，否则工作。

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 
});