Javascript Raphael JS图像动画性能

我正在尝试使用Raphael JS创建图像动画

我想要蜜蜂在页面上随机移动的效果，我有一个工作示例，但它有点“神经过敏”，我在控制台中得到以下警告：

“资源被解释为图像，但使用MIME类型text/html传输”

我不确定这个警告是不是引起了“神经过敏”的运动，或者只是我用数学来处理它的方式

如果有人有更好的方法来创造效果，或改进，请让我知道

我有一个在线演示

下面是我的javascript代码：

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

function BEE(x, y, scale) {
    this.x = x;
    this.y = y;
    this.s = scale;
    this.paper = Raphael("head", 915, 250);

    this.draw = function() {
        this.paper.clear();
        this.paper.image("bee.png", this.x, this.y, 159*this.s, 217*this.s);
    }

    this.update = function() {
        var deg = random(-25, 25);

        var newX = Math.cos(Raphael.rad(deg)) * 2;
        var newY = Math.sin(Raphael.rad(deg)) * 2;

        this.x += newX;
        this.y += newY;

        if( this.x > 915) {
            this.x = 0;
        }
        if( this.y > 250 || this.y < 0 ) {
            this.y = 125;
        }
    }
}

$(document).ready(function() {

    var bee = new BEE(100, 150, 0.4);
    var timer = setInterval(function(){
        bee.draw();
        bee.update();
    }, 15);
}

随机函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
} 
功能蜂（x、y、刻度）{
这个.x=x；
这个。y=y；
这个。s=刻度；
这张纸=拉斐尔（“头”，915250）；
this.draw=函数（）{
这个.paper.clear（）；
this.paper.image（“bee.png”，this.x，this.y，159*this.s，217*this.s）；
}
this.update=函数（）{
var deg=随机（-25,25）；
var newX=数学cos（拉斐尔弧度）*2；
var newY=数学sin（拉斐尔弧度）*2；
这个.x+=newX；
this.y+=newY；
如果（此.x>915）{
这个.x=0；
}
如果（this.y>250 | | this.y<0）{
这个y=125；
}
}
}
$（文档）.ready（函数（）{
var bee=新蜜蜂（100,150,0.4）；
var timer=setInterval（函数（）{
bee.draw（）；
bee.update（）；
}, 15);
}

您没有使用Raphael的最佳功能，即仅在您创建的对象上设置属性的功能，就像DOM一样。您正在重新实例化蜜蜂，并在每一步清除纸张。这就是使用canvas标记的方式，而且非常繁琐，容易出错，让浏览器担心重新绘制什么

做你正在做的事情的一个更好的方法是

/**
 * I don't like closure object orientation, but if you're
 * going to use it, use it all the way
 * (instead of using this.x and this.y for private variables)
 */
function Bee(paper, x, y, scale) 
{

    // The Raphael img object for the bee)
    var img = paper.image("bee.png", x, y, 159 * scale, 217 * scale);

    var timerId = null;

    // Allows access to 'this' within closures
    var me = this;

    this.draw = function() {
      img.attr({x: x, y: y});
    }

    this.update = function() {
        var deg = random(-25, 25);

        var newX = Math.cos(Raphael.rad(deg)) * 2;
        var newY = Math.sin(Raphael.rad(deg)) * 2;

        x += newX;
        y += newY;

        if( x > 915) {
            x = 0;
        }
        if( y > 250 || y < 0 ) {
            y = 125;
        }
    }

    this.fly = function() {
        timerId = setInterval({
            me.update();
            me.draw();
        }, 15);
    }

    this.stop = function() {
      clearInterval(timerId);
      timerId = null;
    } 

    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;  
    } 
}

$(document).ready(function() {
    var paper = Raphael("head", 915, 250);
    var bees = [ new Bee(paper, 100, 150, 0.4), new Bee(paper, 50, 10, 0.2) ];
    bees[0].fly();
    bees[1].fly();
    $(document).click(
        bees[0].stop();
        bees[1].stop();
    );

}

/**
*我不喜欢闭包对象定向，但如果你
*要使用它，一路使用它
*（而不是使用this.x和this.y作为私有变量）
*/
功能蜂（纸、x、y、刻度）
{
//拉斐尔（蜜蜂的img对象）
var img=纸张图像（“bee.png”，x，y，159*比例，217*比例）；
var-timerId=null；
//允许访问闭包中的“this”
var me=这个；
this.draw=函数（）{
img.attr（{x:x，y:y}）；
}
this.update=函数（）{
var deg=随机（-25,25）；
var newX=数学cos（拉斐尔弧度）*2；
var newY=数学sin（拉斐尔弧度）*2；
x+=newX；
y+=newY；
如果（x>915）{
x=0；
}
如果（y>250 | | y<0）{
y=125；
}
}
this.fly=函数（）{
timerId=setInterval({
me.update（）；
我画（）；
}, 15);
}
this.stop=函数（）{
清除间隔（timerId）；
timerId=null；
} 
随机函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
} 
}
$（文档）.ready（函数（）{
var paper=Raphael（“头”，915250）；
var-bees=[新蜜蜂（纸，100,150,0.4），新蜜蜂（纸，50,10,0.2）]；
蜜蜂[0]。苍蝇（）；
蜜蜂[1]。苍蝇（）；
$（文档）。单击(
蜜蜂[0]。停止（）；
蜜蜂[1]。停止（）；
);
}

谢谢，我采纳了你的建议。我创建了蜜蜂对象，以便在需要时也可以添加更多。使用这种新方法，当我创建另一只蜜蜂时，它会创建一个全新的Raphael.paper对象。我尝试设置全局var paper=Raphael（…）这不管用，任何提示。对不起，我昨天才找到拉斐尔。谢谢阿加尼，我实际上从来没有写过一行拉斐尔代码，但我一直在看它，觉得它非常棒。让我调整一下示例，让你可以在一张画布上有多个蜜蜂，这意味着将纸张传递到蜜蜂对象中，然后你可以标记它的答案。通过way、 这不是创建新论文的新方法，您的代码以前就是这样做的。