0

我只是在寻找一种在画布中创建关键帧动画的方法来说 Go left pause go down。而已。我的整本书和互联网都有各种简洁的流畅动画和交互性课程，css3 有关键帧，但除了插件或框架之外，我找不到任何用于画布 javascript 的东西，我将在未来使用这些插件或框架，但我现在想要一个简单的方法.

  (function drawFrame () {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    ball.x += vx;
    ball.pause(2)// 2 seconds;
    ball.y += vx+1;
    ball.draw(context);
  }());

添加了我能弄清楚的唯一答案，嵌套 if 条件，呸。我不想尝试在此设置的基础上制作任何 4 个以上的关键帧

// Check to see if it reached target
       if (Math.abs(dx) < 1) {
          ball.x = targetX;
          //window.cancelRequestAnimationFrame(animRequest);
          log.value = "Animation done!";

// if it did, now fire off the second keyframe and check if it reached new target
          if(Math.abs(dy) < 1){
            ball.y = targetY;
          } else{
            var vy = dy * easing;
            ball.y += vy;
          }

        } 

// Otherwise continue first keyframe move.
        else {
          var vx = dx * easing;
          ball.x += vx;
        }
        ball.draw(context);
      }
4

1 回答 1

2

[编辑以提供动画框架]

这是我创建的用于制作关键帧动画的入门框架

我保持简单，但你当然可以在这个框架上构建。

您可以定义 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);

然后添加您希望对象执行的操作（以及这些操作完成的持续时间）。您可以根据需要以任意组合添加任意数量的操作。现在，我只编写了两个动作：“移动”和“暂停”。您当然可以向框架添加更多操作。

如果需要，即使当前关键帧正在播放，您也可以添加动作。当前操作完成后，任何添加的操作都会排队等待执行。

下面的代码将导致对象：

  1. 向左移动超过 20 帧，
  2. 暂停 30 帧，
  3. 向下移动超过 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>
于 2013-04-12T18:00:46.767 回答