(iOS)实现QQ未读消息数量弹性按钮动画

好久没有更新过博客了,最近公司比较忙,老项目需要换Swift重写,用了一周左右的时间学习了下Swift,目前正在改写旧项目,个人对Swift爱不释手,感觉取代OC就这一两年内的事,不过老的iOS开发者也不需要担心,会OC转Swift真的像切菜一样简单,只需要熟悉下语法就可以,函数和OC的基本差不多,基本看个4,5个小时就可以直接上手Swift开发项目,中间不熟悉的写法只需要百度下即可,相信朋友们都会喜欢上Swift的,唠叨的有点跑题了,废话不多说,直接上代码!

由于公司项目的需求,想要达到和手机QQ未读信息一样的动画效果,周末试着写了一下,效果基本实现了,不过还有些Bug正在修改中,代码用OC写的,如果需要Swift代码的朋友可以发个私信给我,等我完善玩Swift代码发给你,先发一下效果图给大家参考下

效果gif

 

效果gif

 

效果gif
  • 先说一下大体的思路吧,控件是继承Button写的,并且在button的下面添加一个小的圆,给button添加拖拽手势,根据俩个圆的中心点算出拉动的距离,拖动的距离越大小圆的半径越小(勾股定理)
  • 这个动画最大的难点在画俩个画出俩个圆之间的不规则的矩形,通过下面的这个公式可以计算出俩个圆的直径上的四个点和中间的2个点的贝塞尔控制点的point,参照下面图片

    根据俩个圆的中心点算出6个点的坐标
    • 传入俩个圆的中心点,计算出6个点的坐标,用UIBezierPath画出6个点,代码如下
  • 由于是在button内部实现的代码,所以不可以直接在drawRect中直接绘制,超出范围的会被裁剪掉,需要CAShapeLayer来绘制
  • 从写按钮的setHighlighted:方法,在里面实现长按button是大圆左右晃动的效果
  • 给按钮本身添加一个点击事件,TouchUpInside时候销毁所有的对象,播放消失动画
  • 设置大圆距离小圆最大的距离,根据手势的staus,在拖拽的函数里判断距离是否超过最大的距离,超过最大距离时候移除shapeLayer隐藏小圆
  • 还有一些细节在此就不一一列举了

我自己大体的思路就是如此

下面是OC的源码,希望小手能顺便点一下右上角的Star
如果朋友们有什么问题可以直接留言,我会看到回复
代码下载

1 2 收藏 评论

相关文章

可能感兴趣的话题



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