0

キャンバスでキーフレームアニメーションを作成して、左に移動して一時停止して下に移動する方法を探しているだけです。それでおしまい。私の本全体とインターネットには、あらゆる種類のきちんとした流動的なアニメーションとインタラクティブなレッスンがあり、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);
  }());

私が理解できる唯一の答えを追加しました。条件付きの場合はネストされています。このセットアップに基づいて 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);

次に、オブジェクトに実行させたいアクション (およびそれらのアクションが完了するまでの期間) を追加します。必要な数のアクションを任意の組み合わせで追加できます。現在、「移動」と「一時停止」の 2 つのアクションのみをコーディングしています。フレームワークにさらにアクションを追加することもできます。

必要に応じて、現在のキーフレームの再生中でもアクションを追加できます。追加されたアクションは、現在のアクションが完了した後に実行するためにキューに入れられます。

以下のコードにより、オブジェクトは次のようになります。

  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 に答える