计算机喜欢干净简洁。不管是报表,统计,或者函数曲线,他们总是使用简洁明了的线条;而现实是,所有物理世界的物体是混沌的。树叶离开枝丫,水珠四溅 ,花朵迎风摇曳 - 所有这些物理世界的互动感觉简单,因为我们已经习惯这些。但是实际上哪怕是那一霎那的风,都是混沌的,她的算法非常复杂。这篇文章里面,我们要制作蒲公英种子微风舞动的动画。
(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性,实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js
使用 canvas 标签 制作简单图形. 创建你的canvas:(宽:300,高:300)
1
2
<canvas id="canvas" width="300" height="300"></canvas>
//加入JavaScript:
1
2
//定义二维动画
var canvas = $('#canvas')[0].getContext("2d")
1
2
3
4
5
6
7
8
9
// 05-06:圆心x=100,圆心y=100, 半径=15,初始角度=0,结束=360。,反时针。
canvas.beginPath()
canvas.arc(100, 100, 15, 0, Math.PI*2, true)
// 结束
canvas.closePath()
// 填色
canvas.fill()
掌握canvas的基本就很容易做这些,但是如果你要制作更加复杂的东西,你需要高级编译语言像Paper.js
Paper.js 是一个 JavaScript库用来制作绘图和动画, 一种Adobe Illustrator使用的基于Scriptographer的脚本语言 . 它自称是“矢量图脚本语言中的瑞士军刀”( “The Swiss Army Knife of Vector Graphics Scripting,” ),其中重点突出矢量。
图形制作中有两种:矢量图和栅格图。栅格图就像你照相机拍出来的图片,如果你放大看,就是颜色填充的方格。矢量图是有点连线组成的。他们是不同的线条租和形状组,根据不同的指令绘图。如果用矢量图,如图,这个Z放大后还是线条光滑,色泽饱满。相比较,左边的栅格图就很模糊了。
动画是由多幅连续的图片组成,按顺序切换不同的图片给人一种动画的感觉,切换的速度越快动画的感觉越真实,当速度达到1秒24幅图片的时候,人的肉眼就无法分辨了,这就是所说的24帧。canvas中的动画其实就是循环执行擦除和绘制的操作,并且一般会在操作之前保存环境,操作之后恢复环境。使用canvas制作动画由两个关键点:循环执行,绘制每次显示的图片。循环执行主要有两种方式,一种是使用前面所学过的setInterval或者setTimeout方法;另一种是调用新增加的专门用于动画的requestAnimationFrame方法,这个方法不需要设置间隔时间,直接将处理逻辑写入参数的回调函数中就可以了。但是requeseAnimationFram自身需要被放到回调函数中,另外,它的启动操作可以用cancelAnimationFrame方法来取消。
示例: