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

作者:bobiscool

知晓程序注:

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

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

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

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

它是什么?

Canvas(画板)是 HTML 5 的一个重要元素,它能够高效的绘制图形。

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

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

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

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

特性

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

绘制图形

目前,wxDraw 框架支持 rectcirclepolygonellipseline 等图形,如果想要自己创建自定义图形,还可以使用 cshape 图形,或是使用 text 做出文字形状的图形。

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

绘制动画

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

事件处理

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

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

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

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

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

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-12-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

2354
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

29612
来自专栏张善友的专栏

HTML5 canvas图形库RGraph

在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使...

2618
来自专栏拂晓风起

【H5动画】谈谈canvas动画的闪烁问题

3953
来自专栏葡萄城控件技术团队

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一...

2996
来自专栏互联网杂技

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成...

35210
来自专栏林德熙的博客

win10 uwp BadgeLogo 颜色

本文讲的是在上传应用商店出现BadgeLogo颜色问题,和如何解决,因为我是渣渣,本文可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果...

811
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

8382
来自专栏Golang语言社区

【Go 语言社区】算法课程 第一季 第5节 回文检查

回文概念:大致就是把这个数倒过来念数字还是和原来的一样. 运行结果: 代码: package main import ( "fmt" ) //...

3314
来自专栏较真的前端

HTML 5.2 新特性

1725

扫码关注云+社区

领取腾讯云代金券