如何设置动画拉斐尔做了什么？ [英] How is set animation done in Raphael?
问题描述
我试图完成一些动画与套拉斐尔，但即使不透明度动画工作，我不能在画布周围移动的一组（甚至一个圆圈）取得成功。
我在Web上发现移动的一组应用设定翻译，不的x，y位置（如它们可以是用于在该组的每个元素不同，只是x和y可以不为移动一些元素是足够进行），但它不为我工作。没有移动时，即使动画回调时间执行，如预期
到现在为止，最好的办法，我可以使用下面的code是看时间是如何流逝（控制台）...
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtmlXML：LANG =ENLANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;设置，圆动画＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://raphaeljs.com/raphael.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）
{
VAR帆布=拉斐尔（'画布'，400，300）;
window.tset = canvas.set（）
。推（
window.tap = canvas.circle（100，100，40）
.attr（{行程：'蓝'，填补：'红色'}）
）; 的setTimeout（函数（）
{
的console.log（'开始TSET动画＃1。'）;
window.tset.animate（{译：'15，25'}，1000，（）的函数
{
的console.log（'起始抽头动画＃1。'）;
window.tap.animate（{译：'15，25'}，1000，（）的函数
{
的console.log（'开始TSET动画＃2'）;
window.tset.animate（{翻译：'15，25'}，1000，（）的函数
{
的console.log（'起始抽头动画＃2'）;
window.tap.animate（{翻译：'15，25'}，1000，（）的函数
{
的console.log（'开始TSET动画＃3'）;
window.tset.animate（{翻译：'矩阵（1，0，0，1，15，25）'}，1000，（）的函数
{
的console.log（'起始抽头动画＃3'）;
window.tap.animate（{翻译：'矩阵（1，0，0，1，15，25'}，1000，（）的函数
{
的console.log（'开始TSET动画＃4。'）;
window.tset.animate（{变换：'矩阵（1，0，0，1，15，25）'}，1000，（）的函数
{
的console.log（'起始抽头动画＃4。'）;
window.tap.animate（{变换：'矩阵（1，0，0，1，15，25）'}，1000）;
}）;
}）;
}）;
}）;
}）;
}）;
}）;
}，1000）
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =画布＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
要在拉斐尔移动一组，使用：
//移动到（100,100）1秒以上theSetNameGoesHere.animate（{变换：t100,100}，1000）;
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>
To move a set in Raphael, use:
// move to (100,100) over 1 second
theSetNameGoesHere.animate({transform: "t100,100"}, 1000);
这篇关于如何设置动画拉斐尔做了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
