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

Question

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

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

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

这是我当前的代码 sn-p:

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 语句中的两个条件之间切换。

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

如果有任何对我有帮助的信息，请告诉我。谢谢。

Answer 1

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

您可以通过Snap("#elevBox"); 选择任何元素

有用的参考：

谢谢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>