Question

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

我无法理解文档和当前使用的示例 element.animate。

我看到有一些特定的事情可以做（转换，旋转）..但是如果我想在一个简单的2D轴上移动东西呢？

以下是我目前的代码段：

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

有人可以告诉我如何修改变换中的属性以向左移动 - ＆gt;正确或向上 - ＆gt;下？

如果有更多信息对我有帮助，请告诉我。谢谢。

Answer 1

控制翻译：{{1}}缩放：transform: 't300,300'轮播：transform: 's2'
您可以将所有内容设为单transform: 'r45'

您可以按transform: 's2r45,300,300'选择任何元素。

有用的参考资料：

感谢Ian：How do I understand Transform properties in snap.svg?

http://svg.dabbles.info/

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

＆＃13;

Snap("#elevBox");

＆＃13;

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();

＆＃13;

在2d轴上的Snap.svg动画位置

1 个答案: