Question

每次用户点击画布时，我都会尝试运行一个简单的动画。我确定我做错了，因为动画有时甚至没有发射。我之前从未使用过画布动画，并且难以理解如何在for循环中构造它。

fgCanvas.on('mousedown', function(e) {
  var cX = Math.round((e.offsetX - m) / gS),
      cY = Math.round((e.offsetY - m) / gS);

  clickDot({x:cX,y:cY});
});

function clickDot(data) {

  for (var i = 1; i < 100; i++) {
    fctx.clearRect(0, 0, pW, pH);
    fctx.beginPath();
    fctx.arc(data.x * gS + m, data.y * gS + m, i/10, 0, Math.PI * 2);
    fctx.strokeStyle = 'rgba(255,255,255,' + i/10 + ')';
    fctx.stroke();
  }
  requestAnimationFrame(clickDot);
}

完整代码在此处：http://jsfiddle.net/3Nk4A/

另一个问题是如何减慢动画速度或添加一些缓动，这样当它们消失时，环会被拉得更慢？

Answer 1

您可以使用requestAnimationFrame加easing functions来创建所需的效果：

演示：http://jsfiddle.net/m1erickson/cevGf/

requestAnimationFrame自己创建一个动画循环 - 所以不需要在requestAnimationFrame的动画循环中使用for循环。

最简单的形式是，requestAnimationFrame循环将为您的圈子设置动画：

var counter=1;

animate();

function animate(){

    // stop the animation after it has run 100 times
    if(counter>100){return;}

    // there's more animating to do, so request another loop
    requestAnimationFrame(animate);

    // calc the circle radius
    var radius=counter/10;

    // draw your circle

}

要使动画加速或减速，您可以使用easings。随着时间的推移，容易会改变一个值（比如你的半径），但它们会不均衡地改变这个值。容易在动画持续时间内加速和减速。

罗伯特·彭纳（Robert Penner）制作了一套很好的缓动算法。 Dan Rogers用javascript编写了这些代码：

https://github.com/danro/jquery-easing/blob/master/jquery.easing.js

你可以在这里看到他的缓和功能的工作示例：

http://easings.net/

以下是使用requestAnimationFrame加easings为您的圈子制作动画的带注释的代码。

<!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>
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // set the context styles
    ctx.lineWidth=1;
    ctx.strokeStyle="gold";
    ctx.fillStyle="#888";

    // variables used to draw & animate the ring
    var PI2=Math.PI*2;
    var ringX,ringY,ringRadius,ingCounter,ringCounterVelocity;

    // fill the canvas with a background color
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // tell handleMouseDown to handle all mousedown events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});

    // set the ring variables and start the animation
    function ring(x,y){
        ringX=x;
        ringY=y;
        ringRadius=0;
        ringCounter=0;
        ringCounterVelocity=4;

        requestAnimationFrame(animate);
    }

    // the animation loop
    function animate(){

        // return if the animation is complete
        if(ringCounter>200){return;}

        // otherwise request another animation loop
        requestAnimationFrame(animate);

        // ringCounter<100 means the ring is expanding
        // ringCounter>=100 means the ring is shrinking
        if(ringCounter<100){ 
            // expand the ring using easeInCubic easing
            ringRadius=easeInCubic(ringCounter,0,15,100); 
        }else{ 
            // shrink the ring using easeOutCubic easing
            ringRadius=easeOutCubic(ringCounter-100,15,-15,100);
        }

        // draw the ring at the radius set using the easing functions
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(ringX,ringY,ringRadius,0,PI2);
        ctx.closePath();
        ctx.stroke();

        // increment the ringCounter for the next loop
        ringCounter+=ringCounterVelocity;
    }


    //  Robert Penner's easing functions coded by Dan Rogers
    //
    //  https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
    //
    //  now=elapsed time,
    //  startValue=value at start of easing,
    //  deltaValue=amount the value will change during the easing,
    //  duration=total time for easing

    function easeInCubic(now, startValue, deltaValue, duration) {
      return deltaValue*(now/=duration)*now*now + startValue;
    }
    function easeOutCubic(now, startValue, deltaValue, duration) {
      return deltaValue*((now=now/duration-1)*now*now + 1) + startValue;
    }


    // handle mousedown events
    function handleMouseDown(e){

      // tell the browser we'll handle this event
      e.preventDefault();
      e.stopPropagation();

      // calc the mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // animate a ring at the mouse position
      ring(mouseX,mouseY);

    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Click in the canvas to draw animated circle with easings.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

用JavaScript点击Buggy帆布动画

1 个答案: