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属性。您只能为应用于该特定元素的属性设置动画（其中一个属于一个组）。

例如，如果您想为多个圈子制作动画，则需要使用＆＃39;设置＆＃39;并将动画应用于该集合（或使用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只为组中的某些属性设置动画？

1 个答案: