问题描述
我正在尝试使用 Raphael 中的集合完成一些动画，但即使不透明动画有效，我也无法成功地在画布周围移动集合(甚至是圆圈).
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.
我在网上发现移动一个集合应该通过设置平移来完成，而不是 x、y 位置(因为它们可能对于集合中的每个元素都不同，并且仅 x 和 y 可能不足以移动某些元素)，但它对我不起作用.没有任何动作，即使动画回调按预期及时执行.
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>
推荐答案
要在 Raphael 中移动一个集合，请使用:
To move a set in Raphael, use:
// move to (100,100) over 1 second
theSetNameGoesHere.animate({transform: "t100,100"}, 1000);
这篇关于Raphael 中的动画是如何完成的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)