Snap.svg 二维轴上的动画位置

Question

查看有关 Snap.svg 的其他帖子，我没有看到太多关于简单使用 animate 函数的解释。

我不太理解文档和当前使用示例 element.animate。

我看到可以做一些特定的事情（变换、旋转）..但是如果我只想在一个简单的二维轴上移动一些东西怎么办？

这是我当前的代码片段：

var s = Snap("#elevBox");
var elev1 = s.select("#elev1");
if(toggleColor == 0){
    elev1.animate({
        //transform: 'translate(-30,100)',
        transform: "r5,200,200",
        fill: "lightgreen"
    }, 1000);
    toggleColor = 1;
}else {
    elev1.animate({
        //transform: 'translate(0,0)',
        transform: "r5,100,100",
        fill: "red"
    }, 1000);
    toggleColor = 0;
}

我有 toggleColor 链接到单击按钮，所以我在 if-else 语句中的两个条件之间切换。

有人可以告诉我如何修改变换中的属性以向左移动 -> 向右移动或向上移动 -> 向下移动吗？

如果有更多信息可以帮助我提供，请告诉我。谢谢。

Answer 1

控制平移：transform: 't300,300'比例：transform: 's2'旋转：transform: 'r45'
您可以在一条语句中完成所有操作：transform: 's2r45,300,300'

您可以 select 任何元素 Snap("#elevBox");

有用的参考资料：

Thanks Ian: How do I understand Transform properties in snap.svg?

http://svg.dabbles.info/

http://codepen.io/collection/xnrJc/

var s = Snap("#elevBox");
var toggleColor = 0;


function start() {
 s.animate({
        transform: 't100,100',
        fill: "lightgreen"
    }, 1000, end);
}

function end() {
  s.animate({
        transform: 't300,300',
        fill: "red"
 }, 1000, start);
 } 


 start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<svg viewBox="0 0 1000 1000">
 <rect id="elevBox" x="100" y="100" width="100" height="100"/>
</svg>

Snap.svg 二维轴上的动画位置

Snap.svg animating position on 2d axis

javascript

svg

snap.svg