• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

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

小程序

2017-12-19 12:00

知晓程序注:

在小程序中使用 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 框架支持 rectcirclepolygonellipseline 等图形,如果想要自己创建自定义图形,还可以使用 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)

绘制动画

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

事件处理

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

  • tap
  • touchStart
  • touchEnd
  • touchMove
  • longPress
  • drag(自定义的事件)

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

是不是特别简单、特别方便呢?来,老铁们,star 走一波!

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

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

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

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

小程序商店 minapp.com,一扫即用的小程序大全。微信公众号「知晓程序」,做中国最好的小程序报道。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容