学习canvas,javascript的小伙伴,能够随着俺那篇文章的思路一齐做三个小成效出来,代码都齐备了。

创建高大上的Canvas粒子动画

2016/08/22 · HTML5 · 5
评论 ·
Canvas

原来的书文出处:
腾讯ISUX   

第3来看下大家希图要做的粒子动画效果是何等的~

是这样:

金沙注册送58 1

可能是这么:

金沙注册送58 2

以致是如此:

金沙注册送58 3

很酷炫!

这什么去达成类似上边的粒子动画乃至依照自个儿的喜好去做更多别的轨迹的卡通片呢~请看上面详细的讲课。

先是看一下源图和调换到粒子效果的自己检查自纠图:

金沙注册送58 4

才具采纳

因为粒子数量众多,而且波及到图像像素管理,所以那边运用Canvas是不2挑选。

 

在意,以下演示的代码只是关键代码,珍视在于减轻思路。

金沙注册送58 5

1、绘制粒子轮廓图

首先要在canvas画布上制图叁个由粒子构成的轮廓图,记录下每二个粒子的坐标,那样才具有继续的动画。

左手图片为源图,右边图片为粒子效果图。该成效是在Canvas画布上创建的。将图纸制作成粒子效果相对来说是比较轻松的。重点通晓四个知识点就能够

一. 开立3个<canvas>成分,并获取Canvas画布渲染上下文

金沙注册送58 6

<
canvas>是三个双标签成分,通过width和height的值来设置画布的高低。至于ctx(画布渲染上下文),能够知晓为画布上的画笔,大家得以经过画笔在画布上Infiniti制的绘图图案。假诺浏览器不协助canvas会一向体现<canvas>标签中间本人设定的文字。当然<canvas>标签中间也能够是一张当不援救canvas时要求替换显示的图片。

 

二. 用到canvas的图像操作API绘制图像

绘图图像的机要API及参数表明:

金沙注册送58 7

引用MDN上的一张图会比较清楚的看出每个参数的职能:

金沙注册送58 8

drawImage便是把三个image对象可能canvas上(以致是video对象上的的每一帧)钦命地方和尺寸的图像绘制到当下的画布上。而在我们的必要中,是要把整个图像绘制到画布中。

金沙注册送58 9

对应浏览器看到的创立图纸粒子效果,塑造高大上的Canvas粒子动画。效果:

金沙注册送58 10

 

1:图片是透过image对象方式绘制在画布上的,然后选取Canvas的getImageData接口,获取图像的像素音信。

三. 拿走图像的像素音信,并依据像素音讯重新绘制出粒子效果概略图

canvas有多个叫getImageData的接口,通过该接口能够赢得到画布上点名地点的上上下下像素的多少:

金沙注册送58 11

把得到的imageData输出到调控台能够观望,imageData包涵七个属性:

金沙注册送58 12

个中,width、height是读取图像像素新闻完全区域的急剧和冲天,data是二个Uint八ClampedArray类型的壹维数组,包罗了整整图片区域里每种像素点的QX56GBA的整型数据。这里不可不要了然那几个数组所保存像素信息的排序规则,请看下图描述的data数组:

金沙注册送58 13

每一个色值占有data数组索引的一个地方,一个像素有个5个值(奇骏、G、B、A)攻克数组的五个目录地方。依照数列规则能够知晓,要拿走第n个职位(n从一开始)的ENCORE、G、B像素消息正是:福睿斯n
= (n-壹)*4 ,Gn = (n-1)*4+1 ,Bn = (n-1)*4+2  ,so easy~
 当然,实际上海教室像是一个席卷image.height行,image.width列像素的矩形而不是独自的一条龙到甘休的,这些n值在矩形中要总结下:

金沙注册送58 14

由于1个像素是蕴涵六个索引值(rgba)的,所以得到图像中第i行第j列的宝马X5、G、B、A像素新闻正是Rij = [(j-1)*imageData.width + (i-1)]*4 ,Gij =
[(j-1)*imageData.width + (i-1)]*4 + 1,Bij =
[(j-1)*imageData.width + (i-1)]*4 + 2,Aij =
[(j-1)*imageData.width + (i-1)]*4 + 三 。每种像素值都足以获得了!

接下去将在把图像的粒子化概况图画出来了。那么,怎么办这些轮廓图吗,大家先读取种种像素的新闻(用到上面的总计公式),假如那么些像素的色值符合供给,就保存起来,用于绘制在画布上。此外,既然是做成粒子的机能,大家只必要把像素粒子保存一部分,体今后画布上。

具体做法是,设定每1行和每一列要来得的粒子数,分别是cols和rows,贰个粒子代表1个单元格,那么每一个单元格的的宽高正是imageWidth/cols和imageHeight/rows,然后循环的判别每种单元格的率先个像素是不是满意像素值的标准化,借使满意了,就把那几个单元格的坐标保存到数组里,用作后续绘制图案用。

关键参考代码:

金沙注册送58 15

用全部代码做出的demo及效果:

金沙注册送58 16

迄今停止,粒子轮廓图现已创建完毕。

 

var imageData=ctx.getImageData(x, y, width, height);

2、制作粒子动画

制作粒子动画分二种:

一种是粒子漂浮类,那种相比较轻松,只供给自由的改观各种粒子的岗位值,然后径直推行setInterval或许requestAnimationFrame重摄影布就能够,具体的效率因人喜好而去设定,就不现实讲明了,做了个轻易的粒子漂浮的例子。

另一种是粒子的轨迹动画,那么些相对复杂一些。这里要介绍的是每一种粒子根据钦命的轨迹在钦赐的时辰内做位移,最后汇集成钦赐图案的卡通片效果(也便是文章壹初阶的动作效果),要做成那类动画效果需求缓慢解决三个难点:1个是卡通轨迹,别的二个是种种粒子施行动画的机会。

参数表达:x,y为画布上的x和y坐标

粒子动画轨迹

动画片位移的轨迹,最广大的正是单位时间内部管理体改变一定的位移值,从而落成动画效果。但要做到酷炫的效应信赖那种干燥固定的移动分明是卓殊的。所以位移能够依赖缓动函数去做到单位时间内部管理体改动不平等的位移值,从而落成越发的机能。

width,height为获得钦赐区域图像的消息

创制缓动作效果果有两种办法:

一种是友善设定好调节点,然后通过贝塞尔曲线公式来计量各个单位时间的坐标值。

引用了wikipedia里面包车型地铁图:

金沙注册送58 17金沙注册送58 18

地方八个图都以在绘制一条特定曲线,能够看出1回曲线供给四个特定调控点P壹,二回曲线需求多少个特定调节点P一和P2来规定一条曲线,高阶曲线乃至要求愈多的调控点来明确曲线轨迹。

求曲线的公式是基于德卡斯特里奥算法计量得来的,直接上公式。

1次曲线对应的公式:

金沙注册送58 19

三遍曲线对应的公式:

金沙注册送58 20

从公式能够看看,只要鲜明调整点坐标、开始坐标和终点坐标后,就足以鲜明了一条曲线,然后就足以依据曲线公式求出每种时刻t对应的职位值B(t)。

当然使用那种格局供给协调去制定调控点坐标,计算也相比复杂,达成起来很麻烦。没事,大家还有别的格局明显曲线。

 

除此以外一种艺术正是运用已部分缓动函数,无需和睦制订调节点,这里推荐著名的Tween算法的缓动函数,用在那之中二个缓动函数来介绍下参数值,别的缓动函数所传的参数值是如出一辙的:

金沙注册送58 21

是否认为很明白?对科学,jquery用的卡通增添插件easing.js正是Tween算法的缓动函数。有了那现有的缓动函数,就能够制定粒子的开首点、终点(终点便是丹青本人的坐标地点)以及动画试行持续时间来做大家要的功效。

注重参考代码:

金沙注册送58 22

依据参考代码做出三个效果:

金沙注册送58 23

啊,动画效果是有了,但总感到不太对劲儿。。。唔,仔细旁观一下,是美术动画实施太过完全了,未有强烈的微粒动画效果,那就引出粒子动画的另二个关键点,粒子施行动画的机会。

 

再次来到值表达:imageData为再次来到值,它是一个目的,包涵多个属性

粒子推行动画的机遇

要让粒子效果比较显著,那就无法让动画片效果实施太过完全了,供给让图案上各样粒子有不一样的日子距离运维,依照早晚的法则交错的奉行动画。这里的粒子运转间隔有三种,壹种是每一行粒子实行时间间隔,要让每1行的粒子运转时间有规律错开;其它壹种是每一行粒子之间运维时间私自的错开,那样进行的粒子动画才会有一种档案的次序感和每一个粒子有独立动画的颗粒感。看下加了粒子运行时间距离之后的效果对比:

金沙注册送58 24

比上面不加粒子运转时间间隔的效果大多了。

 

嗯,介绍大概正是那般了,假设地点介绍的方法如故解决不了难题的话,还有办法。。。小编把粒子动画效果和Tween的缓动函数一同装进了弹指间。直接配置一下就能够用了。
用法正是创制一个涵盖id的canvas,设定好宽度和中度,引进particle.min.js,然后配置一下参数就能够, demo:

金沙注册送58 25

唯有canvasId、imgUrl、cols、rows是必填的,其余参数都是依赖须求自身选填。  (
͡° ͜ʖ ͡°)✧

 

金沙注册送58 26

本文部分图片引用来自

  • https://zh.wikipedia.org

    3 赞 12 收藏 5
    评论

金沙注册送58 27

二:理解像素区域数据的排布表达,以上获得的图形数据像素消息(imageData对象中的data属性)为卡宴GBA整型的壹维数组数据。贰个像素是有5个值(Lacrosse,G,B,A)组成的。也正是说,数组消息每七个为1个像素点。由此,有以下规则,

先是个像素新闻为:兰德奔驰M级GBA(data[0],data[1],data[2],data[3])

首个像素音信为:RGBA(data[4],data[5],data[6],data[7])

…..

第N个像素音信为:
KugaGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

…..

除此以外,像素区域既然是三个区域,它是有宽和高的。上边的推算公式适合单独1行选用固定八个像素点。所以测算像素点时要思量到在全路图像区域内固定:

如上海体育场所为例。图像的宽和高都为200,假诺依照每多个像素为1行1列时。则该图像共有200行,200列。所以要收获
i 行第 j 列的像素伊始地方消息为:

var pos =[( i-1 )*200]+( j-1 )]*4;

其间,公式中的 i 表示行数,j 表示列数。200为图像的增进率。

demo代码:
金沙注册送58 28
金沙注册送58 29

上边假如不明了, 对照代码运营一下蓄势待发驾驭呢:

金沙注册送58 ,这一次没能为粒子加上炫丽的动态效果~~下次补上,找一些算法就足以粒子动起来的,风乐趣能够做做看~

以上正是本文的全体内容,希望本文的剧情对大家的读书也许干活能带动一定的佑助

方方面面职能的功效都成功了

万一大家想学习canvas,JavaScript,可以加群:
640633433群里面有天天都会上传摄像供大家学习,招待学习沟通的同伙过来一同念书调换!

 

写在最后:

不少人都知情小编是学全栈的,都天真的认为本人有任何的前端、网页制作等视频学习材质。作者想说你们是对的,小编实在有前端的全部摄像资料。
万一想看到愈来愈系统的篇章和上学方法经验能够关切自个儿的微信公众号:‘web前端EDU’关切后回复能够提取一套完整的就学摄像!

相关文章

网站地图xml地图