[编辑以提供动画框架]
这是我创建的用于制作关键帧动画的入门框架
我保持简单，但您当然可以在此框架上构建。
您可以定义 1 个或多个画布对象以在关键帧中使用，如下所示：
// define a drawing function that will draw your object on the canvas
var drawFn1=function(context,x,y){
var radius=30;
context.strokeStyle="blue";
context.lineWidth=5;
context.fillStyle="green";
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.stroke();
context.fill();
}
// create a new displayobject
var displayObject1=new DisplayObject(200,100,drawFn1);
然后将 1 个或多个显示对象添加到对象数组中。您可以单独设置所有这些对象的关键帧——所有对象都可以有单独的动画。
// create an array of DisplayObjects
var displayObjects=[];
// push our displayObject1 into displayObjects
displayObjects.push(displayObject1);
然后添加您希望对象执行的操作（以及这些操作完成的持续时间）。您可以根据需要以任意组合添加任意数量的操作。现在，我只编写了两个动作：“移动”和“暂停”。您当然可以向框架添加更多操作。
如果需要，即使当前关键帧正在播放，您也可以添加动作。当前操作完成后，任何添加的操作都会排队等待执行。
下面的代码将导致对象：
- 向左移动超过 20 帧，
- 暂停 30 帧，
- 向下移动超过 20 帧。
请注意，可以使用链接添加操作。
// add actions for the displayobject
displayObject1.moveBy(-75,0,20).pause(30).moveBy(0,75,20);
这是代码和小提琴：http://jsfiddle.net/m1erickson/RjR9C/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// defines an action to accomplish
function Action(type,msDuration){
var type=type;
var duration=msDuration;
var incrementalX;
var incrementalY;
}
function DisplayObject(X,Y,Drawfunction){
this.drawFunction=Drawfunction;
this.x=X;
this.y=Y;
this.actionStack=[];
this.currentAction=null;
this.IsActive=false;
}
DisplayObject.prototype.pause=function(duration){
var action=new Action();
action.type="pause";
action.duration=duration;
this.actionStack.push(action)
this.IsActive=true;
return(this);
}
DisplayObject.prototype.test=function(){
alert("test");
}
DisplayObject.prototype.moveBy=function(offsetX,offsetY,duration){
var action=new Action();
action.type="moveBy";
action.duration=duration;
action.incrementalX=offsetX/duration;
action.incrementalY=offsetY/duration;
this.actionStack.push(action)
this.IsActive=true;
return(this);
}
DisplayObject.prototype.tick=function(context){
// If we have nothing to do...outta here!
if(!this.IsActive){return;};
//
if(!this.currentAction){
this.currentAction=this.actionStack.shift();
}
// animate the current frame
this.doNextFrame(context);
// decrement the tick countdown on our current action
this.currentAction.duration--;
// if this action is done then load the next action
if(this.currentAction.duration<=0){
if(this.actionStack.length>0){
this.currentAction=this.actionStack.shift();
}else{
this.currentAction=null;
this.IsActive=false;
}
}
}
DisplayObject.prototype.doNextFrame=function(context){
// update based on currentAction
switch(this.currentAction.type){
case "pause":
break;
case "moveBy":
this.x+=this.currentAction.incrementalX;
this.y+=this.currentAction.incrementalY;
break;
default:
break;
}
// draw ourself
this.drawFunction(context,this.x,this.y);
}
// Here’s how you make use of this AnimationFrame framework
var drawFn1=function(context,x,y){
var radius=30;
context.strokeStyle="blue";
context.lineWidth=5;
context.fillStyle="green";
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.stroke();
context.fill();
}
// create a new displayobject
var displayObject1=new DisplayObject(200,100,drawFn1);
// add actions for the displayobject
displayObject1.moveBy(-75,0,20).pause(30).moveBy(0,75,20);
// create an array of DisplayObjects
var displayObjects=[];
// push our displayObject1 into displayObjects
displayObjects.push(displayObject1);
function runOneFrame(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<displayObjects.length;i++){
displayObjects[i].tick(ctx);
}
}
var fps = 20;
function Ticker() {
setTimeout(function() {
requestAnimationFrame(Ticker);
runOneFrame();
}, 1000/fps);
}
$("#go").click(function () { Ticker(); $("#go").hide(); });
}); // end $(function(){});
</script>
</head>
<body>
<button id="go">Begin animation frames</button><br/>
<p>The display will go left, pause and go down.</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>