H5W3
当前位置:H5W3 > JavaScript > 小程序 > 正文

【微信小游戏开发】小游戏动画效果

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);

在微信中运行效果如下

本文地址:H5W3 » 【微信小游戏开发】小游戏动画效果