简单的拉斐尔.js动画，使用"animation.repeat"消耗100%的cpu

Simple raphael.js animation which uses "animation.repeat" eats 100% cpu

本文关键字：quot animation 消耗 cpu 100% repeat 使用 js 动画 简单      更新时间：2023-09-26

检查此代码

window.onload = function(){
var paper = Raphael(0,0,1000,1000);
var path1 = "M67,100 C67,180 200,180 200,100 C190,095 177,095 167,100 C157,105 143,105 133,100 C123,095 110,095 100,100 C90,105 77,105 67,100z";    
var path2 = "M67,100 C67,180 200,180 200,100 C190,105 177,105 167,100 C157,095 143,095 133,100 C123,105 110,105 100,100 C90,095 77,095 67,100z";  
var bowl = paper.path(path1).attr({"fill":"black"});
var anim = Raphael.animation({
"50%" : {path:path2},
"100%" : {path:path1}
},1000);
bowl.animate(anim.repeat(Infinity));  
};

让它运行一段时间后，CPU使用率上升到100%。有人能解释一下原因吗?我怎样才能避免这种情况呢?

我通过创建两个函数并使用回调函数相互调用来解决这个问题，从而创建了一个无限循环。

我猜想anim.repeat(Infinity)正在创建许多动画副本，从而减慢了CPU。

相关文章：