模仿QQ消息气泡动画

上周开始学习贝塞尔曲线,其动机是因为买了Kitten-Yang的那本《A Guide To iOS Animation 2nd Edition》,于是也对动画和贝塞尔曲线产生了兴趣。在生活当中很多时候,我们都能见到贝塞尔曲线这个词,因为他从一开始在汽车车体工艺设计逐渐的发扬,最终又在计算机图形学领域占有重要的地位。关于贝塞尔曲线的发展和简单的原理,可以看《贝塞尔曲线扫盲》这篇文章来科普一下。

而在iOS开发中,由于在iOS 7.0之后扁平化UI设计中,由于省去了传统的iOS金属纹理、礼盒皮式的设计。这样,开发者就更加需要学习动画和绘矢量图的能力。下面我把这个动画的代码按照思路分析一下:

1.分析UI层次

在做一个动画样式之前,我们应该把作品的UI结构计划好。在这个动画中,我们需要准备两个圆形的Dot,因为在一个Dot在拖动离开原来位置的时候,为了模拟现实场景,原处应该也会保留一点印记。

在拖动过程中,我们在两个Dot的中间部分进行贝塞尔曲线的绘图,从而模拟“藕断丝连”的效果。

v2

2.完成headDot的Pan手势(跟随)

接下来,我们考虑用户操作的角度。用户会拖动外层的headDot,这时候headDot的位置随着手指的拖动会跟随行动。而内层的trailDot会保持位置不变。我们对于headDot,增加一个UIPanGestureRecognizer类型手势,即可达到效果。这里我们给出初始化即添加手势代码:

3.完成贝塞尔曲线闭合图形的绘制

那么说了半天贝塞尔曲线,这里终于用到了。在headDot随着我们手势拖动的同时,我们需要在两个圆中间绘制一个曲边矩形。如下图的蓝边内区域所示。在连接两个圆的圆心组成连心线RR',过两个圆心分别做垂线,得到ABDC。连接ADBC,取中点OP,我们将其作为两条贝塞尔曲线的Control Point,对ADBC进行绘制曲线,得到效果。v3

这里我们给出贝塞尔曲线闭合图形的绘制代码,其中公式全部由上图得来:

4.处理逻辑以及细节效果

最后我们要注意以下的细节优化:

  • 在headDot与trailDot的距离越来远时,我们的trailDot应该按照常理变小。这里我们的做法是,引入一个maxDistance常量(用c来描述),这个值是拖动产生“藕断丝连”贝塞尔效果的最大值。trailDot变小的规则是,当圆心距越大,缩放倍数将会越来越小,但是整体的变化趋势是始终缩小的。用递推式来描述如下(k代表Dot的一个衡量外接正方形的量化长度):
  • 当圆心距超过maxDistance的时候,这时候我们启动broke动画,来摧毁贝塞尔图形。其动画为弹簧效果。
  • 当手势释放外圆的时候,我们需要将headDot回弹至原位置,其动画为弹簧效果。

之后就是我们上述注意细节的代码,已经考虑逻辑之后的Pan手势代码:

这样,我们大体上就完成了这个效果的编写。通过这个例子,对于贝塞尔曲线的熟练程度有了更加深入的掌握。另外在QQ消息气泡释放的最后,还有一连串的爆炸的动画。我感觉所使用的效果就是多个图片连续显示,实现的帧动画的效果。如果你在阅读的时候,了解这个动画,希望及时与笔者进行沟通。

在文章的最后,会放出这个例子的github源码,有需要学习的读者可以自行下载学习。当然,如果在学习之余,感觉收获很大,那就star✨一下咯~笔者还会继续更新这个动画效果,希望最终能达到QQ气泡的完全效果。


github: DGSlimeView

QQ中未读气泡拖拽消失的实现分析【Kitten-Yang】


1 6 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部