小游戏动画效果

HTML Canvas 中有三个函数可以用来实现动画效果: setTimeout() 、setInterval() 和 requestAnimationFrame()

相关内容，你可以访问我们的 Canvas 基本动画和 Canvas requestAnimationFrame()

微信小游戏动画 API

微信小游戏也对这些 API 提供了支持

setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()

而且，微信小游戏还提供了 wx.setPreferredFramesPerSecond() 方法修改执行 requestAnimationFrame() 回调函数的频率，以降低性能消耗

范例

下面我们就来演示如何使用 requestAnimationFrame() 实现一个 60fps 的小球移动动画

var c  = wx.createCanvas();
var ctx = c.getContext('2d');

// 小球
var ball = {
  x: 10,
  y: 10,
  vx: -50/60,
  vy: -50/30,
  direction:1,
  radius: 10,
  color: 'black',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function animate_it (){

    ctx.save();
    ctx.clearRect(0,0,c.width,c.height);
    ctx.fillStyle = "#fff";
    ctx.fillRect(0,0,c.width,c.height);

    ctx.fillStyle = "orange"
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.font = "32px Arial" // 字体大小 44 像素
    ctx.fillText("www.twle.cn", c.width / 2, (c.height - 20));
    ctx.strokeStyle = "#000";
    ctx.strokeText("简单教程，简单编程", c.width / 2, (c.height - 75))

    ctx.restore();

    ball.draw();

    ball.x += ball.vx;
    ball.y += ball.vy;


    if (ball.x <= 0 ){
        ball.x = 0;
        ball.vx = - ball.vx;
    }

    if ( ball.y <= 0 ) {
        ball.y = 0;
        ball.vy =  - ball.vy;
    }

    if ( ball.x > c.width  ){
        ball.x = c.width;
        ball.vx = -ball.vx;
    }

    if ( ball.y > c.height ){
        ball.y = c.height;
        ball.vy = - ball.vy;
    }

    requestAnimationFrame(animate_it);
}

requestAnimationFrame(animate_it);

在微信中运行效果如下

微信小游戏动画 API

范例

微信小游戏 基础教程

微信小游戏基础教程