一个简单的撒花效果,利用canvas绘制的,效果图如下:

canvas撒花瓣效果 gif canvas撒花瓣效果

思路分析

这里只使用了一张花瓣素材,如下:

第一步我们需要制作出不同大小,不同透明度的花瓣,这个简单,关键代码如下:

第二步我们需要将花瓣从侧面喷射出来,这里我们要稍微了解一下速度,阻力和加速度的概念:

background Layer 1 速度V 水平速度V(x) 垂直速度V(y) 水平方向: 阻力,速度衰减:v2=v1*k(k<1) 垂直方向: 阻力,速度衰减:v2=v1*k(k<1) 重力,匀加速:v2=v1+g(单位时间,速度每次增大g)

我们将任意角度的速度进行分解,可以分解成水平速度和垂直速度,然后在水平方向上会遇到阻力,阻力会让速度进行衰减;在垂直方向上除了阻力外,还有重力,因为重力是匀加速,就是每次速度增加的大小都是一样的,都是g,因此v2=v1+g。对应的关键代码如下所示:

这里的衰减值(阻力)和重力值(g)可以自己根据实际情况微调,比如你想让花瓣落下的更快,可以将重力值调大:

了解了核心的速度变化之后,那么了解喷射就比较简单了,我们只要初始化一个喷射速度,然后控制喷射角度(左边喷射的区间在0度到90度之间,右边的在90度到180度之间),然后让花瓣按照我们的速度变化公式自己变化就好了。

background Layer 1

完成上面两步基本上差不多了,不过花瓣在空中肯定是会旋转的,不可能硬邦邦的掉落下来,因此我们现在要让花瓣在空中旋转。

我们首先要找到花瓣的旋转中心点,然后确定花瓣左右旋转的最大角度:

background Layer 1 旋转中心点

这个左右摆动和正余弦函数比较类似,我们可以每次加上一个角度,然后计算它的正弦,得到的就是一个摆动的角度:

当然除了上面的旋转摇摆之外,还会转圈,转圈就比较简单了,大概就是每次生成一个角度,然后累加旋转即可。最后为了让屏幕的花瓣运动看起来更加匀称,增加了左边花瓣慢慢右边移动,右边花瓣慢慢左边移动的效果。关键代码如下:

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字