Snap.svg 缩放和动画 SVG

Question

我正在尝试使用 g.animate({ transform: "s2.5,2.5," + bbox.cx + "," + bbox.cy }, 0); 缩放我的 SVG，然后制作动画 wheelAnimation(bbox.cx, bbox.cy, 1500);

var i = 0;
function wheelAnimation(cx, cy, speed){
    i++;
    g.animate(
        { transform: "r360," + cx + ',' + cy}, // Basic rotation around a point. No frills.
        speed, // Nice slow turning rays
        function(){
            if(i == 5)
                speed = 5000;
            g.attr({ transform: 'rotate(0 ' + cx + ' ' + cy}); // Reset the position of the rays.
            wheelAnimation(cx,cy, speed); // Repeat this animation so it appears infinite.
        }
    );
}

但是我的 SVG 没有缩放。它只是旋转。如果我删除旋转 - SVG 缩放。如何组合它以立即缩放然后动画旋转？

Plunker example

Answer 1

我从未使用过 Snap.svg 但您可以试试这个：

var i = 0;

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

希望对你有帮助:)

See Plunkr

Snap.svg 缩放和动画 SVG

Snap.svg scale and animate SVG

javascript

css

animation

svg

snap.svg