使用 Snap.svg 的基本旋转答案

【问题标题】：Basic rotation using Snap.svg使用 Snap.svg 的基本旋转
【发布时间】：2017-01-12 07:05:00
【问题描述】：

我试图在 svg 平移时旋转它，但我不能让它绕其轴旋转。有没有办法让它在自己的轴上旋转？

js 代码

var paper = Snap('#svg');
matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});
start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce);

【问题讨论】：

“绕自己的轴旋转”是什么意思？齿轮正在在自己的轴上旋转。
你的意思是像jsfiddle.net/tuqbf9ub/82 吗？正如 Paul 提到的，它在自己的轴上，但会有所不同，不确定这是否是您不想要的。
@Ian 是的，我什至不希望发生变化
你是说小提琴是你想要的吗？如果是这样，我可以将其设置为答案。不过，还不清楚您是否还想要其他东西。
@Ian 是的，就像我一直在调整值以减少变化一样，但我希望有一种方法可以通过对每个基于旋转的动画使用一些通用程序来实现零变化。但我想要同样的小提琴与 snap.svg 零变化

标签： javascript css svg snap.svg

【解决方案1】：

如果您不包括自己的旋转中心，Snap 将使用其计算出的边界框中心进行旋转。所以它就像删除它一样简单。

start_gear.animate({ transform: 't630, 240 r540' }, 3000, mina.bounce);

jsfiddle

如果您只想旋转，并且元素已经应用了变换，则需要包含之前的变换，这样它就不会被覆盖。要获得之前的转换，只需 element.transform()。所以完整的命令是......

start_gear.animate({ transform: start_gear.transform() + 'r540' }, 3000, mina.bounce);

jsfiddle

【讨论】：

但是是否可以只旋转而不必平移齿轮
非常感谢，我有一些关于基于 snap 的动画的小问题。如果我想在齿轮掉下来之后链接这些动画怎么办，我还需要它无限旋转。但是如果我链接它，该功能会使齿轮回到起点并以不同的方式制作动画
你需要考虑你有什么组合。将旋转和平移相结合，有时会有点混乱。为了解决这个问题，您可以将元素放在一个组中。平移组和旋转元素，并使用回调循环函数调用。示例jsfiddle.net/tuqbf9ub/91 也可以看看svg.dabbles.info/snaptut-animateframe中的nextFrame func

【解决方案2】：

看到这个demo，我使用了 TimelineMax.js 库。它在动画中超级简单和有用！

HTML 代码：

<svg id="svg" width="80vw" height="60vh" viewBox="0 0 1300 250">
<path class="myPath" d="M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z"></path>

JS代码：

/*
var paper = Snap('#svg');

matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});

start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce); */



var tl = new TimelineMax();

// Settings ...

tl.set(".myPath", {
    x: 630,
    y: -95,
    fill: "#e8434d",
    transformOrigin: "center"
})

// Animatiion ...

tl.to(".myPath", 3 , { 
    //x : "+= 500",
    y: "+= 400",
    rotation: "630",
    ease: Bounce.easeOut
});

【讨论】：