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

Question

查看有关 Snap.svg 的其他帖子，我没有看到太多关于简单使用 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' Scale:transform: 's2' Rotation:transform: 'r45'< br/>您可以在单个语句中完成所有操作:transform: 's2r45,300,300'

您可以通过 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>