《每周一点canvas动画》——差分函数的妙用

  • 时间:
  • 浏览:4
  • 来源:uu快3下载网站_uu快3开户二维码

1).准备工作

1.原理分析

或多或少的颜色改变等细小功能就不做不要 的介绍了,see you!!!

2.差分方程

好像上次更新还是十一前,这唰唰唰的就过去大三三四天了,现在更新我也没哪此不好意思的。这次亲戚朋友不涉及canvas 3D的内容,主要分享另一一一六个比较炫的动画效果,都需要否有上一篇文章《每周或多或少canvas动画》——3D点线与水波动画的加强版。动画效果来自codePen点击预览。在这篇文章中亲戚朋友就分析你或多或少效果是怎么才能 才能 实现的,机会你对源码比较懵逼,相信想看 解析就会恍然大悟。先上效果图:

回会,机会autoDiff的不断衰减,不同幅值波形的叠加形成波浪效果,最终衰减到0.液面也就趋于平静了。

代码4:在得到第一帧的差分值后就该调用每个点的更新函数了,回会传入计算好的差分值。形成的效果如下图所示

看一下updateY函数,亲戚朋友把目标位置targetY设置为差分值diffVal和基线baseY的和。回会,通过距离计算需要运动的传输速率vy,最后将传输速率作用于点的纵坐标。你或多或少段是全是与弹性动画缓动动画那一节很相似呢?

代码2:为起震位置的左边,主要关注diffPt[i]-=(diffPt[i] - diffPt[i+1])*(1-0.01*d);你或多或少行。i的起始位置为124,默认差分值为0。稍作简单推算,要我发现,经过更新后第124号点的差分值为99,同理第123号为97.02。以此类推,亲戚朋友就都需要得到第一帧的所不怎么才能 的差分值。右边同理。

现在亲戚朋友对顶端的主次做完正解释:

作者:我仍旧在这里

在上部亲戚朋友设置了却说我的点,哪此点的纵坐标全是一样的,却说我在水平方向相隔一定的间距。却说我在静止的情況下,亲戚朋友就都需要它看见与普通的矩形别无二致。而改变哪此点的位置时亲戚朋友就能同时改变矩形的形状,从而形成不同的效果。

结果是,每个顶点的y坐标全是(H/2)的深度图,水平坐标每隔一定的间隔取另一一一六个点。在这里是每隔4.六个像素取另一一一六个点,这与你canvas的深度图和点的数目有关。却说我亲戚朋友就把点创建完成了,来绘制一下看看效果。

记住或多或少,序列的每一项是定义为前一项的函数,亲戚朋友用的却说我你或多或少原理。他的图像机会用matalab来绘制却说我下面却说我:

点的更新亲戚朋友中放了update函数中。首先,亲戚朋友设置另一一一六个初始的震荡点,缓冲变量和初始差分值。

另外在判断鼠标否有点击在了液面上,亲戚朋友设定了另一一一六个比较宽的范围,上下共200px。却说我做的目的是让用户很容易就能触发你或多或少事件,而全是只在页面那唯一的另一一一六个值上并能触发。你或多或少做法相信要我是我做过,对于比较小的物体亲戚朋友会遮罩另一一一六个大或多或少的透明物体,回会在该物体上做事件的触发,便于用户操作。

回会,创建点并把它push进vertexes中,同时也创建相应数量的差分值,同样把它中放diffPt数组中,却说我每个点全是了对应的差分值。

现在,亲戚朋友把update()和draw()中放动画循环中你就会想看 水波起伏回会趋于平静的效果。

3.代码实现

首先,在静止情況下亲戚朋友都需要想看 整个液面就相当于是个矩形。而当亲戚朋友点击液面的位置时,你或多或少矩形就位于了相应的变化。但虽然并全是整个矩形都位于了变化,而却说我矩形的顶端位于了变化。那是怎么才能 才能 做到仅仅让矩形的顶端位于变化的呢?秘诀就在矩形的顶端并全是简单的从左边的点lineTo()到右边的点。却说我由却说我的点lineTo()组成。却说我讲机会不太好理解,看图说话:

就像你想看 的那样此时亲戚朋友的液面完正是静止的(机会没更新点嘛)。虽然要绘制另一一一六个矩形,你看看效果图就明白了,却说我为了更好看,你完也需要绘制第三层,第四层。下面亲戚朋友就来更新哪此点的坐标。

在获取鼠标位置这里应该注意或多或少,亲戚朋友没人 减去canvas的偏移量,这是机会在这里canvas做的是全屏设置。却说我,机会你的画布并全是全屏大小,建议你使用亲戚朋友的utils.js文件中的土法律方法captureMouse来获取鼠标的坐标。

3).鼠标交互

相比与上篇文章中简陋的水波动画的效果,本文的动画效果不仅并能和鼠标进行交互,回会波浪的形成更加自然,更加符合物理规律。整个动画的形成过程就如动图中所展示的那样,在液面的位置点击鼠标,此处的液面就会另一一一六个比较大的起伏,回会此处的震动会向两边传播,随着能量的衰减,顶端的震动幅度会没人 下,最都需要量衰减到零,页面趋于平静。听上去是全是很玄乎,感觉很高深!毛主席谁能告诉亲戚朋友千万虽然被物体的表皮层什么的问题所迷惑(谁知道是谁说的呢o(^▽^)o)。下面亲戚朋友就来一步一步的分析,这其中的原理。

顶端的代码机会实现了波浪动画的效果,回会震荡完成后就平静了,不让再位于震荡的效果。你或多或少步亲戚朋友就来实现点哪,哪震的效果。实现的思路很简单:水波虽然区域平静是机会起震位置的差分值不断衰减的结果,亲戚朋友只需要在点击鼠标的位置重设autoDiff就都需要了。此外,起震点的位置也要变成鼠标点击的位置。代码如下:

亲戚朋友要用你或多或少函数去创建那一堆点。回到亲戚朋友的主文件index.js中。亲戚朋友先初始化或多或少要用的东西:

2).核心代码

只关注原函数,红色的那条曲线就都需要了,是全是不怎么才能 像水波。亲戚朋友要做的却说我让那一堆点按照却说我的波形去排列。

代码如下:

下面就到了亲戚朋友最喜欢的代码时间。首先,亲戚朋友创建另一一一六个点类Vertexes, 它的作用却说我定义并更新那一堆点,代码在vertex.js中,如下:

这里的震荡点却说我亲戚朋友的起震位置,意思是vertexes中的第125号点现在之前 刚开始起震,它对应的差分值却说我autoDiff。它的改变会引起或多或少点的变化,从而达到更新或多或少差分值的效果。

代码1: 亲戚朋友设置了起震位置的差分偏移量为autoDiff=200,注意autoDiff -= autoDiff*0.9;, 也却说我说它的值每一帧回会变化。

在数学上,递推关系(recurrence relation),也却说我差分方程(difference equation),是并全是递推地定义另一一一六个序列的方程式:序列的每一项目是定义为前一项的函数。或多或少简单定义的递推关系式机会会表现出非常复杂的(混沌的)性质,亲戚朋友属于数学中的非线性分析领域。

说到差分方程也许却说我人会头疼,不过也没本法,疼就疼会吧!你或多或少知识点在高数里讲微分方程那一节,机会不明白,就算了吧!记住下面的用法却说我错,不过为了逼格亲戚朋友还是简单的介绍下。

在缓冲系数dd的作用下,两侧的波会在扩散的过程中没人 小,最后趋近于0.亲戚朋友也是通过你或多或少变量去控制固体的粘度系数,达到粘稠度高的物体扩散的越缓慢回会起伏比较低,粘稠度低的物体扩散没人快但起伏大的效果。

来源:51CTO