I have added the capability to draw arbitraty canvas graphics in ianime.js. Instead of giving the reference to the image object to be animated (via "element" property), the caller needs to provide a callback function "drawImage". Here is a sample code.
function click1(obj)
{
var param = { sx:obj.offsetLeft, sy:obj.offsetTop,
x:(500-obj.offsetLeft), y:obj.offsetTop, msec:3000 }
param.drawImage = function(ctx,element,r,x,y) {
ctx.save();
ctx.translate(x,y);
ctx.fillStyle='#dd3300';
ctx.beginPath();
var tail = Math.sin(r*26)*5;
ctx.moveTo(-60,tail);
ctx.bezierCurveTo(-35,-2,0,-10,0,0);
ctx.bezierCurveTo(0,10,-35,2,-60,tail);
ctx.closePath();
ctx.fill();
ctx.restore();
};
anime.add(param);
}
Notice that the caller also needs to specify the starting point with "sx" and "sy" property when it eliminated the "element" property.
Here is the actual example (runs on Safari and Firefox, and probably Opera, but not IE).
If you want to try this on your iPhone or iPod touch, try this URL.
http://satoshi.blogs.com/ianime/test23.html
As I have indicated earlier, while iPhone's Javascript is quite slow, the graphics APIs are very fast. iPhone has no problem letting a dozen of fish swim.
Comments