qq上当有消息来的时候会在列表右边出现一个消息圆点,这个圆点可以拖拽,当拖拽到一定的时候,这个消息就爆炸了,这个效果看起来比较炫酷,今天我们就利用canvas做一个类似的效果,先看看最终效果:

canvas仿qq消息圆点拖拽效果 gif canvas仿qq消息圆点拖拽效果

主要思路

其实要实现这个效果,主要有三个比较重要的步骤,第一个就是实现拖拽的时候那种沾粘的效果,第二个就是放手后的弹动效果,第三个就是实现爆炸效果。

沾粘效果实现的时候其实是包括三个图形,就是两头的圆和中间连接的曲线,其中我们正在拖拽的圆大小是不变的,另一头的圆是会根据拖拽的距离变化的。这里我们需要规定出一个拖拽距离的大小和另一头圆大小的一个数学公式出来:

上面是demo中采用的关系,就是当拖拽的越远的时候,圆变小的更慢,这个关系不是固定的,你也可以根据你希望的变化速率去写这个关系。

沾粘效果的原理其实就是将大小圆连接起来的一个梯形,现在我们需要做的是计算出这个梯形的四个点坐标 :

background Layer 1 dy=y2-y1 (x2,y2) (x1,y1) dx=x2-x1 a d A1 B1 A2 B2 sin(a)=dy/d cos(a)=dx/d a A1坐标(x1+r1*sin(a),y1-r1*cos(a)) r1 B1坐标(x1-r1*sin(a),y1+r1*cos(a)) a A2坐标(x2+r2*sin(a),y2-r2*cos(a)) r2 a a B2坐标(x2-r2*sin(a),y2+r2*cos(a))

大小圆中间为梯形连接是最简单的情况,这里我们将对梯形瘦身,就是在中线附近的位置找到一个合适的点,到时候利用二次贝塞尔曲线去描绘即可。

background Layer 1 dy=y2-y1 (x2,y2) (x1,y1) dx=x2-x1 a d A1 B1 A2 B2 a r1 a r2 a a dy=y2-y1 (x2,y2) (x1,y1) dx=x2-x1 a d A1 B1 A2 B2 a r1 a r2 a a 连接大小圆的为梯形 连接大小圆的为弧形 K1 K2

我们只要求出上图中的k1和k2就可以利用quadraticCurveTo去绘制曲线了。当然,上图中的k1,k2是梯形中线的四等分点,实际操作中,你可以根据自己的需求看定在哪里合理,比如你可以让k1,k2为6等分点或者8等分点,但是这样的话,弧线看起来就没有那么弯曲了,或者你把k1,k2同时作为2等分点,那么弧线就很弯曲了。

上面已经将如何绘制沾粘图形的原理讲了,现在看看如何在松手的时候制作弹性收回。

background Layer 1 s1 s2 s3 s4 s5 s6

上图描绘了在松手后,大圆的运动轨迹,它将沿着S1->S2->S3->S4->S5...运动,也就是每次跑到小圆的另一侧,但是距离只有之前的一半,当最后距离非常接近了,就停止运动。

爆炸效果呢最好是利用多张图片合成或者gif实现,因为那样可以更逼真的还原的爆炸效果,但是这里,我自己做了一个简单的爆炸效果。

当然,这个效果不是很逼真,但是缩小后也还勉勉强强可以用,这里就简单介绍一下这个爆炸效果咋做的。

background Layer 1

这里的爆炸效果其实主要是五个图形拼凑起来的,中间的近似圆形和四周近似椭圆。

background Layer 1 将圆划分成n分,计算好单位角度a 根据单位角度a去绘制n个点,但是每个点绘制的半径是浮动的,不固定 a a 将最后绘制的点连接起来 a 利用quadraticCurveTo将点连接起来,这样就没有那么生硬

上图描述了进行圆形的绘制方法,主要是根据圆形划分成n分,然后得到每个角度,重现绘制个n个点,绘制的时候半径浮动,最后利用quadraticCurveTo优化连接,看起来更圆润。

比较麻烦的是绘制进椭圆,需要一些公式的计算才可以得到一个旋转的椭圆。

background Layer 1 椭圆方程式:(x/a)^2+(x/b)^2=1 设:x=a*sin(k),y=b*cos(k) A(x,y) A(x,y) A1(x1,y1) a A(x,y) A1(x1,y1) a 将椭圆转动a角度后,A1坐标为多少? 椭圆上任何一个固定点的转动,都和在圆上是一样的 因此我们在圆上分析A1坐标 在圆上,由三角公式可以得到x1=x*cos(a)+y*sin(a),y1=y*cos(a)-x*sin(a)

DEMO下载

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

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字