为什么 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

这是因为群组没有半径属性。您只能为适用于该特定元素（其中一个是一组）的属性设置动画。

例如，如果你想为多个圆圈制作动画，你需要使用 'set' 并将动画应用到那个集合（或者用 selectAll 或其他东西抓取一个集合并用 . 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
} );

为什么 Snap.svg 仅对组中的某些属性进行动画处理？

Why Snap.svg animates only some attributes in group?

javascript

svg

snap.svg