为什么我的拉斐尔JS动画循环?

您好我做了使用拉斐尔框架这部动画。 我想明星(logoStar)旋转无限期,但它只能运行一次。 任何人都可以帮忙吗? 谢谢

window.onload = function () { buildLogo(); } var buildLogo = function () { var logo = Raphael("title",800,236); var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"}); var starSpin = function () { logoStar.animate({rotation: "360"}, 5000, starSpin); } starSpin(); }

--------------解决方案-------------

var starSpin = function () {
logoStar.attr({rotation: 0}).animate({rotation: 360}, 5000, starSpin);
}

从360°至360°动画看起来像有没有动画,所以你需要重置旋转前为零。

由于第2版出来了,真正的出路有一个无限循环动画是这样的:

var spin = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);
myElement.animate(spin);

Infinity是在Javascript的属性,所以不要输入一个字符串。

这里有一个工作小提琴。

只是快速的观察:

貌似“轮换”是不是Atrr的一部分了,因为第二版,所以你不能在“动画”使用它,但你可以替换成“改造:”R“+(一定程度上)”..

例如:

element.animate( {transform: "r" + (-90)}, 2000, 'bounce');

我同意迈克尔毛,你应该把

logoStar.animate({rotation: "360"}, 5000, starSpin);

在一个循环。

但环这样的,而(真)并不总是一个好主意。 这将需要太多的CPU和一些浏览器可能会警告一个脚本导致页面运行缓慢的用户。 也许最好是重新执行动画前添加一个暂停。 刚刚尝试,看看效果最好;)

我不能完全肯定, 我认为starSpin尚未确定,当您尝试使用它的匿名函数。

尝试改变:

var starSpin = function () {
logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

function starSpin() {
logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

编辑
事实证明,这不是它在所有-我不知道什么问题(希望谁的人有更多的接触到拉斐尔库可以帮助在那里),但kludgey,但是,工程解决方案,以清除有问题的元素调用整个构造函数在回调之前,(我提醒你这是kludgey)。

请参考:http://jsfiddle.net/rbf5x/1/

我不是很肯定,但如果你这样做:

while(true){starSpin();}

这听起来像该方法只执行一次,所以“旋转”一次...

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.369 (s). 10 q(s)