canvas 动画循环

动画循环

动画的绘制就是一个重复的过程，其原理就是重复的绘制和清除，就如同下面这张图形

image.png

1、循环的方式

主要有三种：

setTimeout 定时器
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
requestAnimationFrame() 开始一个动画和 cancelAnimationFrame() 取消动画

2、直线运动

[图片上传中...(QQ20171228-194308-HD.gif-2daec8-1514461554620-0)]
[图片上传中...(QQ20171228-194308-HD.gif-9c4529-1514461563882-0)]

我们在进行绘图时需要给定图形的位置和宽高.在进行直线运动的时候，我们更改横向或纵向的位置即可

下面我们来写一个直线运动的动画，当方块触碰到边框时，运动方向改变，简称碰壁反弹

html

<canvas id="mycanvas" width="600" height="600"></canvas>

css

canvas{
    border:1px solid #000000;
}

js

var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        
        //绘制图形
        function draw(x){
            context.beginPath();
            context.fillStyle="red";
            context.fillRect(x,0,50,50);
        }
        var x=0;
        var speedx = 2;
        draw(x)
        function act(){
            //清除画布
            context.clearRect(0,0,canvas.width,canvas.height);
            //更新位置
            x +=speedx;
            // 重绘
            draw(x);
            //当x位置小于等于0或大于等于canvas画布的宽度减去方块的宽度
            if(x<=0 ||x>canvas.width-50){
                speedx *=-1;
            }
            window.requestAnimationFrame(act);
        }
        //执行动画
        act();

最后显示：

QQ20171228-194308-HD.gif

3、圆周运动

如果需要图形按圆周运动，需要通过三角函数计算图形的位置。

image.png

我们来模仿写一个球绕中心点的旋转，有三种方式

最后效果：

QQ20171228-200803-HD.gif

方式一

通过改变坐标系实现小球做圆周运动的效果,坐标系在上一次改变基础上变化

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.translate(250,250);
//移动坐标系
//重绘图形
function draw(){
    context.beginPath();
    context.fillStyle="red";
    context.arc(100,100,10,0,Math.PI*2);
    context.fill();     
}
var everyPercent = Math.PI/180;
function act(){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.rotate(everyPercent);
    draw();
    window.requestAnimationFrame(act);
}
act();

方式二

通过显示圆的不同小段边框显示圆周运动

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.translate(250,250);
function draw2(start,end){
    context.beginPath();
    context.lineCap="round";
    context.strokeStyle="red";
    context.lineWidth=20;
    context.arc(0,0,100,start,end);
    context.stroke();
}
var i=0;
function act2(){
    i+=3;
        context.clearRect(-250,-250,canvas.width,canvas.height);
    var start =(Math.PI/360)*i;
    var end = (Math.PI/360)*(i+1);
    draw2(start,end);
    window.requestAnimationFrame(act2);
}
act2();

方式三

通过三角函数改变球的x，y的值

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.translate(250,250);
function draw3(Percent,r){
    var x = 200*Math.cos(Percent);
    var y = 200*Math.sin(Percent);
    context.beginPath();
    context.fillStyle="red";
    context.arc(x,y,r,0,Math.PI*2);
    context.fill();
}
        
var Percent = Math.PI/90;
function act3(){
    Percent +=Math.PI/180;
    context.clearRect(-250,-250,canvas.width,canvas.height);
    draw3(Percent,10);
    window.requestAnimationFrame(act3);
}
act3()

4、背景滚动

有时候我们需要背景视图滚动的效果，例如微信的打飞机

我们绘制图片一定要预加载

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var Img = new Image();
Img.src = "sky.png";
Img.onload=function(){
    canvas.width = Img.width;
    canvas.height = Img.height;
    var x = 0;
    function act(){
      context.clearRect(0,0,canvas.width,canvas.height);
      context.drawImage(Img,x,0);
      context.drawImage(Img,canvas.width-1+x,0);
      x-=1;
      if(Math.abs(x)>canvas.width){
        x=0;
      }
    window.requestAnimationFrame(act);
  }
  act()
}