Question

好的，所以我有一组四个元素按我想要的方式旋转90度，围绕四个元素中间的原点。

我想在旋转之前和之后缩放左上方的块，从原点开始向外扩展，但是我很难这样做。

到目前为止，这是我的样本（阅读：过度简化）进展的小提琴：

小提琴的javascript：

/* create an svg drawing */
var draw = SVG('drawing')

/* draw rectangle */
var dial = draw.circle(60)
                .move(125,125)
                .fill('#0099ff')

var rect_yellow = draw.rect(50,50)
                .move(100,100)
                .fill('gold')
var rect_blue = draw.rect(50,50)
                .move(160,100)
                .fill('navy')
var rect_black = draw.rect(50,50)
                .move(160,160)
                .fill('black')
var rect_green = draw.rect(50,50)
                .move(100,160)
                .fill('green')

var blades = draw.group()
    .add(rect_yellow)
    .add(rect_blue)
    .add(rect_black)
    .add(rect_green)
    .back()

var angle = 0
var rotation = 90
var spin = document.getElementById('spin')
var spun = 0

/* make rectangle jump and change color on mouse over */
spin.addEventListener('click', function() {
    /* calculate new ending orientation for blades */
    angle += rotation
    var new_rotate = angle

    /* rotate the blade group */
    blades.animate(1000, '>')
        .rotate(new_rotate, 155, 155)

    ++spun
})

这是一个稍微更具魅力的例子，说明我要做的事情：缩放：

enter image description here

第一个问题是能够确定在给定旋转后哪个刀片位于左上角位置。第二个问题是扩大规模;我已经让刀片可以扩展，但随后它变得疯狂并同时离开屏幕。我不确定如何从指定的原点（中心圆的中间）正确缩放。

Answer 1

您可以使用.after()功能链接动画。

我不确定我是否正确使用svg.js，但这就是我所做的：

var rects = [rect_yellow, rect_green, rect_black, rect_blue];

// define the animations
var enlarge_blade = function() {
  rects[spun % 4].animate(250, '<')
                 .scale(1.25, 1.25)
                 .translate(-38,-38);
};

function spin_anim() {
  rects[spun % 4].animate(250, '>')
                 .scale(1, 1)
                 .translate(0,0)
                 .after(rotate_blades);
};

var rotate_blades = function() {
    blades.animate(1000, '>')
          .rotate(angle, 155, 155)
        .after(function() {
            ++spun;
            enlarge_blade();
            title.text('spun ' + spun + ' times');
        });
};

// Pre-enlarge the first (yellow) rect
enlarge_blade();

/* make rectangle jump and change color on mouse over */
spin.addEventListener('click', function() {
    angle += rotation
    spin_anim();
})

Demo here

Answer 2

我看到你正在使用svg.js。我不知道它如何在内部对待变换。但无论如何。要缩放元素，通常使用其中心点作为参考。因此，您应该找到每个矩形的中心点并使用该点进行缩放。（我假设svg.js在内部执行所需的翻译。）

SVG：从指定的锚点缩放组的一个元素

2 个答案: