Raphael JS image animation performance.
- by michael
Hi, I'm trying to create an image animation using Raphael JS.
I want the effect of a bee moving randomly across the page, I've got a working example but it's a bit "jittery", and I'm getting this warning in the console:
"Resource interpreted as image but transferred with MIME type text/html"
I'm not sure if the warning is causing the "jittery" movement or its just the way I approached it using maths.
If anyone has a better way to create the effect, or improvements please let me know.
I have a demo online here
and heres my javascript code:
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);
}
