Question

所以当我开始时我有一个问题＆amp;调整我的应用程序窗口大小，我正在尝试将游戏块转换为新调整的缩放位置，然后重新启动它们的移动动画。

然而，即使我手动将它移动到新位置，Snap也会使该动作从先前位置变为动画。

这是一个显示问题的jsfiddle。如果您取消对bounce（）的调用并调整窗口大小，则该点会立即移动到新的大小/位置，但是当你重新放入动画时，显然没有使用这个新的变换数据来插入后续动画。

var snap;
var c;

$(document).ready(function() {
    snap = new Snap("#screen");
    c = snap.select("#char");
    // i've refactored to make the jsfiddle easier to follow, but the effect is only really noticable 
    // on startup now. you shouldn't see the red dot slide into place - it should just appear there and bounce.
    // the green dot isn't animated and appears in the right place instantly.  the red one is supposed to
    // only have the scale animated, not the move
    positionCharacter();

    // after simplifying the transform, you can't really tell whats going on with the resize now
    $( window ).resize(function() {
        // when you resize the window, the move should be done instantaneously, and the bounce animation
        // from changing the scale should restart at the new location.  you shouldn't see the move animated.
        positionCharacter();
    });
});

// move the character and restart it's bounce() animation in the new location
function positionCharacter()
{
    c.stop();
    c.transform(buildTransform(1.0));    // moving it before animation starts, so you should't see the move happen
    snap.select("#orig").transform(buildTransform(1.0));

    // if you comment out this bounce() you will see that it instantly moves to the correct location on
    // startup and resize before the bounce() starts
    bounce();
}

// animate the scale around a point to create a bounce effect
function bounce()
{
    c.animate({ transform: buildTransform(1.0) }, 250, mina.linear, function() { 
        c.animate({ transform: buildTransform(0.8) }, 250, mina.linear, function() {
            bounce();
        });
    });

}

function buildTransform(vertScale) {
    var t = new Snap.Matrix().translate(100, 100).scale(0.5, 0.5 * vertScale);
    return t;
}

Answer 1

经过一些挖掘，这似乎打破了Snaps等功能。要插入属性，它似乎将它们转换为字符串，在这种情况下，它提供了一个空的属性来插入（而不是现有的变换矩阵）。

我不确定我们通常是否想要实际制作矩阵动画，通常我们实际想要做的是为旋转，缩放等各个组件设置动画。

将这些转换为Snaps转换字符串表示法，Matrix.toTransformString（）解决了这个问题。然后Snap可以为各个组件设置动画。

因此，添加t = t.toTransformString（）是合理的解决方案。

Snap svg动画的问题不应该

1 个答案: