Raphael 中的设定动画是如何完成的？
我试图在 Raphael 中使用集合完成一些动画，但即使不透明动画有效，我也无法成功在画布上移动集合（甚至是圆圈）。
我在网上发现移动集合应该通过设置平移来完成，而不是设置 x, y 位置（因为集合中的每个元素可能不同，并且仅 x 和 y 可能不足以移动某些元素），但是它对我不起作用。尽管动画回调按预期及时执行，但没有任何东西在移动。
到目前为止，我可以使用以下代码的最佳方法是查看时间如何流逝（在控制台中）...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Set, circle animation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
<script type="text/javascript">
$(document).ready (function()
{
var canvas = Raphael ('canvas', 400, 300);
window.tset = canvas.set()
.push(
window.tap = canvas.circle (100, 100, 40)
.attr ({stroke: 'blue', fill: 'red'})
);
setTimeout (function()
{
console.log ('Starting tset animation #1.');
window.tset.animate ({translation: '15,25'}, 1000, function()
{
console.log ('Starting tap animation #1.');
window.tap.animate ({translation: '15,25'}, 1000, function()
{
console.log ('Starting tset animation #2.');
window.tset.animate ({translate: '15,25'}, 1000, function()
{
console.log ('Starting tap animation #2.');
window.tap.animate ({translate: '15,25'}, 1000, function()
{
console.log ('Starting tset animation #3.');
window.tset.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
{
console.log ('Starting tap animation #3.');
window.tap.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25'}, 1000, function()
{
console.log ('Starting tset animation #4.');
window.tset.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
{
console.log ('Starting tap animation #4.');
window.tap.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000);
});
});
});
});
});
});
});
}, 1000)
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
I'm trying to accomplish some animation with sets in Raphael, but even though an opacity animation worked, I cannot succeed in moving a set (or even a circle) around the canvas.
I found on the Web that moving a set should be done with setting translation, not x, y positions (as they may be different for each element in the set, and just x and y may not be enough for moving some elements), but it doesn't work for me. Nothing is moving, even though the animation callbacks are executed in time, as expected.
Up to this point, the best way I can use the following code is to see how the time is ticking (in the console)...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Set, circle animation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
<script type="text/javascript">
$(document).ready (function()
{
var canvas = Raphael ('canvas', 400, 300);
window.tset = canvas.set()
.push(
window.tap = canvas.circle (100, 100, 40)
.attr ({stroke: 'blue', fill: 'red'})
);
setTimeout (function()
{
console.log ('Starting tset animation #1.');
window.tset.animate ({translation: '15,25'}, 1000, function()
{
console.log ('Starting tap animation #1.');
window.tap.animate ({translation: '15,25'}, 1000, function()
{
console.log ('Starting tset animation #2.');
window.tset.animate ({translate: '15,25'}, 1000, function()
{
console.log ('Starting tap animation #2.');
window.tap.animate ({translate: '15,25'}, 1000, function()
{
console.log ('Starting tset animation #3.');
window.tset.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
{
console.log ('Starting tap animation #3.');
window.tap.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25'}, 1000, function()
{
console.log ('Starting tset animation #4.');
window.tset.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
{
console.log ('Starting tap animation #4.');
window.tap.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000);
});
});
});
});
});
});
});
}, 1000)
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
要在 Raphael 中移动集合，请使用：
To move a set in Raphael, use:
我对此进行了一些研究（并扫描了源代码），看起来您需要以
{transform:'M 1 .5 .5 1 15 25'}之类的形式指定转换。看一下这个 fiddle 来看看一些转换。顺便说一句，转换并没有完全按照我的预期进行，我不能假装我理解为什么......我对 Raphael 和 SVG 还很陌生。无论如何，我希望这可以帮助您朝着正确的方向前进。
I played with this a bit (and scanned through the source) and it looks like you need to specify the transformation in a form like
{transform:'M 1 .5 .5 1 15 25'}. Take a look at this fiddle to see some transformations.BTW, the transformations aren't working exactly as i would have expected, and I can't pretend I understand why... I am pretty new to Raphael and SVG. Anyway, I hope this helps move you in the right direction.