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