# 开发 \| 小程序做动画效果难？送你一个框架，10 分钟就能搞定

- 作者：知晓程序
- 发布时间：2017-12-19 12:00
- 原文：https://www.ifanr.com/minapp/955226

![](https://s3.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg)

**知晓程序注：**

在小程序中使用 canvas 绘制图案、动画的难度有目共睹。**除了本身写法繁琐，小程序的技术特性，也使得小程序无法使用普通 HTML 5 的 canvas 框架**，进行图案、动画绘制。

而今天，知晓程序就来为你推荐一款框架。这款框架专为小程序设计，**它可以让你在小程序里，更轻松地完成图案绘制，还能使用事件响应。**

想知道用它在小程序创建动画有多炫酷吗？往下看就知道了。

关注「知晓程序」公众号，在微信后台回复「开发」，让你的小程序性能再上一层楼。

---

文 \| bobiscool

### 它是什么？

Canvas（画板）是 HTML 5 的一个重要元素，它能够高效的绘制图形。

**但是它过于底层，且 API 粗糙，导致开发者很难使用它来做较为复杂的图形。**而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。

这样的问题出现在所有支持 canvas 的客户端上，微信小程序也不例外。

而且，由于小程序由 JS core 支持，并没有 `window` 对象，并且 canvas 的 API 与标准的 canvas 的 API 有所出入，**所以市面上绝大部分 canvas 库，都与小程序无缘。**

**而 wxDraw 也就应运而生，专门用于处理小程序上 canvas 图形创建、图形动画，以及相关交互问题。**

关注「知晓程序」微信公众号，回复「源码」，获取 wxDraw 框架项目源码地址。

### 特性

- 简单：不需要你会 canvas，会用 jQuery 就会使用 wxDraw。
- 灵活：所有图形、随时随地都可以进行属性修改、图形添加以及图形销毁。
- 事件支持：只要是合理的小程序事件，它都支持。  
    缓动动画支持 wxDraw 支持链式调用动画（就像 jQuery 的 animate 一样），并且支持几乎所有的缓动函数。

### 绘制图形

目前，**wxDraw 框架支持 `rect`、`circle`、`polygon`、`ellipse`、`line` 等图形**，如果想要自己创建自定义图形，还可以使用 `cshape` 图形，或是使用 `text` 做出文字形状的图形。

下面，以 `circle` 为例，展示 wxDraw 的代码编写过程。

```
let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, 
                       fillStyle: "#C0D860",
                       strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', 
                       gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 
                       'fill', true)
```

![](https://s3.ifanr.com/wp-content/uploads/2017/12/aaa-1.jpg)

### 绘制动画

利用 wxDraw，你可以轻松在小程序中，做出好看的动画。

![](https://s3.ifanr.com/wp-content/uploads/2017/12/2a274a09294c53715fbb55eea82f8932.gif)

### 事件处理

wxDraw 也支持处理事件。具体支持的事件如下：

- `tap`
- `touchStart`
- `touchEnd`
- `touchMove`
- `longPress`
- `drag`（自定义的事件）

具体运行效果如何呢？看看旁边 UI 小妹妹亲自示范就知道了。 😜

![](https://s3.ifanr.com/wp-content/uploads/2017/12/6e9c5d36bf9539222bae785ba353ffba-min.gif)

是不是特别简单、特别方便呢？来，老铁们，star 走一波！

原文地址：https://juejin.im/post/59f74c7ef265da432840253d

关注「知晓程序」微信公众号，回复「源码」，获取 wxDraw 框架项目源码地址。

**关注「知晓程序」公众号，在微信后台回复「开发」，让你的小程序性能再上一层楼。**

**![](https://s3.ifanr.com/wp-content/uploads/2017/11/20171101173458.jpg)**

![](https://s3.ifanr.com/wp-content/uploads/2017/09/bottomqrcode.gif)