微信小程序 动画-微信小程序css3的动画

在往期的《HelloWorld》公开课中，李艺老师带我们从0到1搭建了一个完整的微信小游戏项目，在那节课中我们学会了小游戏的整体项目结构，亲自创建了游戏画布，并现场调试了代码。

但是小游戏涉及的知识非常多，一节课根本讲不完。这不，在5月29日的公开课，李艺老师为我们带来了微信小游戏开发的下半部分内容，如果你想了解微信小游戏API的特点、小游戏底层运行机制是什么样子的，那这节课你比不可错过。

绘制网格图像

先来回忆一下上节课学的内容，还记得怎么创建游戏画布么？

// 创建画布
 let canvas = wx.createCanvas( console.log(canvas.width,  canvas .height
// 绘制距形
 let context = canvas.getContext("2d") context.fillstyle ="green"
 context.fillRect(50，50，100，100)
// 清空
 context.clearRect(0,0,canvas.width,canvas.height)
12345678复制代码类型：[javascript]

接下来我们实现绘制网格图像，根据微信自带的API功能，只需创建image就可以绘制了，这里有一点需要注意的，本例中我们用的是网络图片，所以要加上onload的回调，也就是说当图片加载完成后，再调用。具体代码如下所示。

// 绘制网络图像
let image = wx.createImage()
 image.src = "https://cdn.jsdelivr.net/gh/rixingyike/images/2021/20210528125650image-20210528125649169.png"
image.src = "./images/bg.jpg"
image.onload = ()=>{
  context.drawImage(image, 0, 0)
}
// context.drawImage(image, 0, 0)12345678复制代码类型：[javascript]

动画实现原理

在上节课李艺老师说过，动画的实现原理是将画布清楚并重新绘制，下面我们看如何通过代码佬实现。

// 实现动画
let bgStartY = 0
function drawBackgound(){
  context.clearRect(0,0,canvas.width,canvas.height)
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  bgStartY += 3
  context.drawImage(image, 0, bgStartY)
  requestAnimationFrame(drawBackgound)
}
// drawBackgound()1234567891011复制代码类型：[javascript]

实现拖拽交互

let imagePosX = 0, imagePoxY = 0
let offsetX = 0, offsetY = 0
wx.onTouchStart((e) => {
  let touch = e.touches[0]
  offsetX = touch.clientX - imagePosX
  offsetY = touch.clientY - imagePoxY
})
wx.onTouchMove((e) => {
  let touch = e.touches[0]
  context.clearRect(0,0,canvas.width,canvas.height)
  
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  imagePosX = touch.clientX - offsetX
  imagePoxY = touch.clientY - offsetY
  context.drawImage(image, imagePosX, imagePoxY)
})1234567891011121314151617181920复制代码类型：[javascript]

小游戏底层运行机制

首先我们要明白一个事情，微信小游戏只是微信小程序的一种特殊表现形式微信小程序 动画，只要明白了小程序的底层机制，也就明白了小游戏的原理。

从下图所示，整个架构分为UI层和Logic层，UI层执行DOM操作和交互事件响应,里面是WAWebview代码和编译后内容，Logic层运行在独立的JS引擎，逻辑层包括WAService.js代码和业务，两层之间通过WeixinJSBridge之间进行交互。

讲师介绍

李艺，腾讯云最具价值专家（TVP），《小程序从0到1：微信全栈工程师一本通》作者，拥有近20年互联网软件研发经验，曾是北京协同创新研究院人工智能项目负责人，Adobe中国15位社区管理员之一，目前是日行一课联合创始人兼CTO。

《Hello,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课，集结业内名师大咖，聚焦热门技术和实战解决方案，以专业知识分享交流为桥梁，链接正在创造世界的一群科技主力们微信小程序 动画，向初心致敬，为技术发烧。无论你是初入职场的应届生，还是准备升职加薪的职场精英，相信这里都有你需要的养料。