如何使用 Snap.svg 为轮子设置动画?
how to animate the wheel with Snap.svg?
当我尝试为轮子制作动画时,我遇到了问题。
您可以在 example.
中看到这一点
我阅读了 article 并尝试编写代码,但也许我遗漏了什么。
function moveWheels() {
wheel_right_needles.animate({ transform: 'r0 ' +
getCenterPoint(wheel_right_needles) });
setTimeout(function() {
wheel_right_needles.animate({ transform: 'r90 ' +
getCenterPoint(wheel_right) }, 1000, function() {
moveWheels();
});
}, 300);
}
moveWheels();
我做错了什么?
我修好了。这是一个 fiddle (click here) 你可以检查
我把函数改成如下:
function moveWheels() {
var c=getCenterPoint(wheel_right_needles);
wheel_right_needles.transform("r0," + c);
wheel_right_needles.animate({ transform: 'r360 ' + c }, 1000, function() {
moveWheels();
});
}
此外,我注意到滚轮动画适用于以前版本的 snapsvg
https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js
当我尝试为轮子制作动画时,我遇到了问题。 您可以在 example.
中看到这一点我阅读了 article 并尝试编写代码,但也许我遗漏了什么。
function moveWheels() {
wheel_right_needles.animate({ transform: 'r0 ' +
getCenterPoint(wheel_right_needles) });
setTimeout(function() {
wheel_right_needles.animate({ transform: 'r90 ' +
getCenterPoint(wheel_right) }, 1000, function() {
moveWheels();
});
}, 300);
}
moveWheels();
我做错了什么?
我修好了。这是一个 fiddle (click here) 你可以检查
我把函数改成如下:
function moveWheels() {
var c=getCenterPoint(wheel_right_needles);
wheel_right_needles.transform("r0," + c);
wheel_right_needles.animate({ transform: 'r360 ' + c }, 1000, function() {
moveWheels();
});
}
此外,我注意到滚轮动画适用于以前版本的 snapsvg https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js