Question

我无法理解，如何操作Snap中的元素，所以现在我要用组进行操作。现在我的两个SVG文件加载到不同的SVG，然后按组动画。如何将它们全部加载到一个组并使用不同的动画为每个组添加动画效果？

var roulette = Snap("#roulette");
var ball = Snap("#ball");
var rouletteg = roulette.group();
var ballg = ball.group();

var rouletteload = Snap.load("svg/roulette.svg", function ( loadedFragment ) {
    rouletteg.append( loadedFragment );

    var bbox = rouletteg.getBBox(); //bounding box, get coords and centre
    var scale = 2.85;
    wheelAnimation(bbox.cx, bbox.cy, 3000, scale);
});

var ballload = Snap.load("svg/white.svg", function ( loadedFragment ) {
    ballg.append( loadedFragment );
    var bbox = ballg.getBBox(); //bounding box, get coords and centre
    var scale = 2.85;
    var off = 30;
    ballAnimation(300, bbox.cy + off, 3000, scale);
});

var i = 0;

function wheelAnimation(cx, cy, speed, scale){
    i++;
    rouletteg.attr({ transform: 'r0 ' + cx + ' ' + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
    rouletteg.stop(true).animate(
        { transform: "r360," + cx + ',' + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
        speed, // Nice slow turning rays
        function(){
            wheelAnimation(cx,cy, speed, scale); // Repeat this animation so it appears infinite.
        }
    );
}
function ballAnimation(cx, cy, speed, scale){
cx = 500;
    ballg.attr({ transform: 'r0 ' + cx + ' ' + cy + " s" + scale + "," + scale + "," + cx + "," + cy }); //Reset + Scale setup
    ballg.stop(true).animate(
        { transform: "r360," + cx + ',' + cy + " s" + scale + "," + scale + "," + cx + "," + cy }, // Basic rotation around a point. No frills.
        speed, // Nice slow turning rays
        function(){
            ballAnimation(cx,cy, speed, scale); // Repeat this animation so it appears infinite.
        }
    );
}

Plunker example

Snap SVG使用组中的元素，而不是组

0 个答案: