qq消息小圆点拖拽动画
2016-06-30 本文已影响608人
雷晏
前言
为什么要做个动画？ 通常来说，一个app的消息小标识，只是给用户知道你有多少条未读信息，是没有用户交互的，用户必须要去查看全部未读信息后才会消失，这只是针对于一种用户，如果对于另一种用户（不想点击未读消息，小标识又要给我消失）那就不好使了，这就大大影响了用户体验了。
明白了为什么要做这个交互，那么我们可以在此基础上在思考，如何去优化这种交互，毫无疑问，第一反应就是动画。没错，动画是交互中最能提高用户体验的方式。
效果图：
这个动画的核心部分就是圆拖拽过程离开始点的轨迹要如何去计算,接下来我会放一张图分析是如何计算这段轨迹，如图。
小圆到大圆的轨迹就是BPCDOA这个填充不规则图形
AD和BC这两段是一个抛物线贝塞尔曲线，为此我们要计算出曲率O,P的位置。
通过勾股定义，以及相似三角形角度的知识，可以得出以上角度都是相同的a。之后算出各点的位置，并用贝塞尔曲线每个点相连接。
注意：
初始化属性要写在layoutSubViews里，在这个方法里才能得到真正的frame
手势滑动，随着曲线不断改变，超过最大范围曲线消失，当手势消失，按钮没有超过最大范围就利用弹性动画来复原位置，反之消除。
最后，按钮消失的爆炸动画是利用gif来实现的
总结：动画之美靠我们程序猿去发掘，用心学动画，发散自己的想象空间，只要你敢想，才能有更炫酷的动画特效。。。
源码下载链接github
