动画与画布

前面我们已经接触过如何使用wxss给组件添加一定的动画效果,这一节我们会来介绍使用事件来触发css动画,以及调用小程序的动画Animation API给组件创建旋转、缩放、移动、倾斜的动画效果,调用画布Canvas API在小程序绘制图形、生成图片。使用这些API可以给我们带来丰富的视觉和交互体验。同时这些也是做小游戏的基础。

CSS动画与事件结合

一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;

一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。

近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,“动效设计”一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法。

GIF目前最常用于表情包、斗图之类的,在前端领域能够用CSS取代的图片和动画都应该优先使用CSS,在图像、动效方案上,程序员做了大量的努力,GIF、PNG、JPG、WebP、SVG等等这些格式..对不同图片类型有何种特点和限制也是前端开发工程师和UI/UX设计师所必须掌握的。

节点信息

节点信息:节点API技术文档

 

技术文档:Animation技术文档动画技术文档

通过 toggleDelay的布尔值为真动态添加动画类名,在生命周期函数 onReady中控制 toggleDelay的值从而控制整个动画过程 (原理与 Vue的动态类名相似)

Animation API动画

在前面我们已经掌握了通过CSS来制作一些动画效果,不过这样的动画相对来说比较简单,下面我们来了解如何使用API来创建动画,这样我们就可以通过点击、页面加载等方式来触发动画。

技术文档:Animation技术文档

使用开发者工具新建一个animation页面,然后再animation.wxml输入以下代码:

创建动画对象

在js输入以下代码:

创建一个动画实例 animation。调用实例的方法来描述动画。

创建动画实例技术文档:wx.createAnimation(Object object)

  • duration,动画持续时间
  • delay,动画延迟时间
  • timingFunction,动画的效果,这里用的是linear,动画从头到尾的速度是相同的,还有其他取值,大家可以之后自己尝试。

创建动画事件

在animation.wxml里添加button触发动画

在animation.js里加入动画处理事件

  • animation.rotate()的技术文档里我们可以了解到里面的值为原点顺时针旋转的角度值,角度的范围为[-180,180]
  • 在animation.step()的技术文档表示一组动画完成;

最后通过动画实例的 export 方法将动画数据并传递给animationData,最后渲染到组件的animation属性。export 方法每次调用后会清掉之前的动画操作。

缩放、旋转、移动的动画

在animaton.js里添加以下代码

动画的叠加

不同类型的动画是可以叠加的

还可以写成这种格式

IntersectionObserver

IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

Swiper动画

 

使用Canvas绘制图形

技术文档:Canvas技术文档Canvas技术文档

使用Canvas绘制矩阵

新建一个canvas页面,在canvas.wxml里输入以下代码:

在canvas.js里的onReady或onLoad函数里输入以下代码:

首先,我们需要创建一个 Canvas 绘图上下文 CanvasContext。CanvasContext 是小程序内建的一个对象,有一些绘图的方法:

  • setFillStyle:
  • fillRect(x, y, width, height):从左上角(2px, 28px)开始,画一个166 px * 52px 的矩形
  • draw():

使用canvas绘制渐变

渐变能用于填充一个矩形,圆,线,文字等。填充色可以不固定位固定的一种颜色。

我们提供了两种颜色渐变的方式:

  • createLinearGradient(x, y, x1, y1) 创建一个线性的渐变,一旦我们创建了一个渐变对象,我们必须添加两个颜色渐变点
  • addColorStop(position, color) 方法用于指定颜色渐变点的位置和颜色,位置必须位于0到1之间。
  • 可以用setFillStyle 和 setStrokeStyle 方法设置渐变,然后进行画图描述。

单位换算

canvas绘制使用的是px单位,但不同设备的px是需要换算的,所以在组件中统一使用rpx单位,这里就涉及到单位怎么换算问题。

绘制图形到画布:CanvasContext.drawImage

图片保存

SVG

SVG,可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,可被多种工具读取和修改,尺寸更小,可压缩性更强,矢量,纯粹的 XML,一张SVG图,其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。作为一种图片格式…

技术文档:SVG属性参考MDN SVG技术文档

svg由于体积小,矢量图,被广泛应用在诸多场景,关于svg,大家只需要对它的特性有所了解即可。在实际工作场景,通常会需要设计师使用Adobe公司的Adobe Illustrator(一款不亚于PhotoShop的强大的矢量绘图软件,也是专业设计师必会的工具)

使用代码编辑器比如visual studio code新建一个diamond.svg,然后粘贴以下代码:

svg既是代码也是图片

svg和canvas都是前端绘图技术,这两者之间..canvas适合图像密集型的动画

数据可视化

数据可视化是将错综复杂的数据以及潜藏在数据背后的数据现象,以更加清晰直观的图形化方式给展示出来,这也一直是数据分析非常重要的课题。Web前端数据可视化有非常多的开源项目,比如D3、echarts、AntV、Hightcharts等,而其中百度出品的echarts,国内使用比较多,且有适用于小程序的版本echarts-for-weixin。

echarts微信版:echarts-for-weixin(Github地址压缩包下载)

echarts的图表就是由svg和canvas渲染的,在微信小程序里搜索echarts图表示例,或者使用开发者工具导入下载解压后的项目,就能对echarts微信版有所了解。

引入echarts组件ec-canvas

解压之后,将ec-canvas文件夹复制粘贴到我们当前的小程序根目录下,然后使用开发者工具在pages下新建一个chart页面(也就是在app.json的pages配置项里添加”pages/chart/chart”,)。

在页面chart.json里usingComponents配置项里引入ec-canvas,

然后在chart.wxml里输入

由于

在chart.js里引入

再在page

在Page()函数的data里添加

再在Page()函数里面添加

制作其他图表类型

打开echarts官方案例,我们可以看到有很多种类的图表,我们只需要替换option的值就可以,比如折线图案例

而如何根据

更多配置详情可以参考:echarts官方技术文档,echarts图表类型太多,配置项与API也相当复杂,建议有兴趣的朋友之后再来研究。

由于echarts.js包含的图表类型比较多,有700+k之多,所以控制台会有报错提示(可以忽略),我们也可以根据自己的需求定制echarts(只选择自己要使用的图表类型),然后将定制下载的echarts.min.js的名称改为echarts替换掉组件里面的echarts.js即可,可以减轻一半的体积。