未读消息橡皮动画
2015-09-02 10:54
162 查看
先说一下大体的思路吧,控件是继承Button写的,并且在button的下面添加一个小的圆,给button添加拖拽手势,根据俩个圆的中心点算出拉动的距离,拖动的距离越大小圆的半径越小(
这个动画最大的难点在画俩个画出俩个圆之间的不规则的矩形,通过下面的这个公式可以计算出俩个圆的直径上的四个点和中间的2个点的贝塞尔控制点的point,参照下面图片
![](http://ww3.sinaimg.cn/mw690/0068uRu1gw1etgs1ssj09j30yg0qmaed.jpg)
根据俩个圆的中心点算出6个点的坐标
传入俩个圆的中心点,计算出6个点的坐标,用UIBezierPath画出6个点,代码如下
由于是在button内部实现的代码,所以不可以直接在drawRect中直接绘制,超出范围的会被裁剪掉,需要CAShapeLayer来绘制
从写按钮的setHighlighted:方法,在里面实现长按button是大圆左右晃动的效果
给按钮本身添加一个点击事件,
设置大圆距离小圆最大的距离,根据手势的staus,在拖拽的函数里判断距离是否超过最大的距离,超过最大距离时候移除shapeLayer隐藏小圆
还有一些细节在此就不一一列举了
下面是OC的源码,希望小手能顺便点一下右上角的
如果朋友们有什么问题可以直接留言,我会看到回复
代码下载
勾股定理)
这个动画最大的难点在画俩个画出俩个圆之间的不规则的矩形,通过下面的这个公式可以计算出俩个圆的直径上的四个点和中间的2个点的贝塞尔控制点的point,参照下面图片
![](http://ww3.sinaimg.cn/mw690/0068uRu1gw1etgs1ssj09j30yg0qmaed.jpg)
根据俩个圆的中心点算出6个点的坐标
传入俩个圆的中心点,计算出6个点的坐标,用UIBezierPath画出6个点,代码如下
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView smallCirCleView:(UIView *)smallCirCleView { CGPoint bigCenter = bigCirCleView.center; CGFloat x2 = bigCenter.x; CGFloat y2 = bigCenter.y; CGFloat r2 = bigCirCleView.bounds.size.width / 2; CGPoint smallCenter = smallCirCleView.center; CGFloat x1 = smallCenter.x; CGFloat y1 = smallCenter.y; CGFloat r1 = smallCirCleView.bounds.size.width / 2; // 获取圆心距离 CGFloat d = [self pointToPoitnDistanceWithPoint:self.samllCircleView.center potintB:self.center]; CGFloat sinθ = (x2 - x1) / d; CGFloat cosθ = (y2 - y1) / d; // 坐标系基于父控件 CGPoint pointA = CGPointMake(x1 - r1 * cosθ , y1 + r1 * sinθ); CGPoint pointB = CGPointMake(x1 + r1 * cosθ , y1 - r1 * sinθ); CGPoint pointC = CGPointMake(x2 + r2 * cosθ , y2 - r2 * sinθ); CGPoint pointD = CGPointMake(x2 - r2 * cosθ , y2 + r2 * sinθ); CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ , pointA.y + d / 2 * cosθ); CGPoint pointP = CGPointMake(pointB.x + d / 2 * sinθ , pointB.y + d / 2 * cosθ); UIBezierPath *path = [UIBezierPath bezierPath]; // A [path moveToPoint:pointA]; // AB [path addLineToPoint:pointB]; // 绘制BC曲线 [path addQuadCurveToPoint:pointC controlPoint:pointP]; // CD [path addLineToPoint:pointD]; // 绘制DA曲线 [path addQuadCurveToPoint:pointA controlPoint:pointO]; return path; }
由于是在button内部实现的代码,所以不可以直接在drawRect中直接绘制,超出范围的会被裁剪掉,需要CAShapeLayer来绘制
self.shapeLayer.path = [self pathWithBigCirCleView:self smallCirCleView:_samllCircleView].CGPath;
从写按钮的setHighlighted:方法,在里面实现长按button是大圆左右晃动的效果
- (void)setHighlighted:(BOOL)highlighted { [self.layer removeAnimationForKey:@"shake"]; //长按左右晃动的幅度大小 CGFloat shake = 10; CAKeyframeAnimation *keyAnim = [CAKeyframeAnimation animation]; keyAnim.keyPath = @"transform.translation.x"; keyAnim.values = @[@(-shake), @(shake), @(-shake)]; keyAnim.removedOnCompletion = NO; keyAnim.repeatCount = MAXFLOAT; //左右晃动一次的时间 keyAnim.duration = 0.3; [self.layer addAnimation:keyAnim forKey:@"shake"]; }
给按钮本身添加一个点击事件,
TouchUpInside时候销毁所有的对象,播放消失动画
设置大圆距离小圆最大的距离,根据手势的staus,在拖拽的函数里判断距离是否超过最大的距离,超过最大距离时候移除shapeLayer隐藏小圆
还有一些细节在此就不一一列举了
我自己大体的思路就是如此
下面是OC的源码,希望小手能顺便点一下右上角的⭐️Star
如果朋友们有什么问题可以直接留言,我会看到回复
代码下载
相关文章推荐
- UIWebView
- Android主题和样式之系统篇
- java synchronized详解
- 高性能网站建设指南---前端工程师技能精髓--小记1
- 一个创业失败者的忠告:请不要再参加创业活动
- 数组
- soapUI接口测试工具所有版本下载地址
- 【UML】UML之类图
- 鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
- Kanzi UI Solution
- Linux 之test expr命令
- CSS制作图片水平垂直居中
- Kafka+Spark Streaming+Redis实时计算整合实践
- 1047. Student List for Course (25)
- 【Android】2015.08.28 安卓官方文档学习:Day1 Count:1
- csdn的bug??
- Git 使用规范流程
- [转]OC与JS的交互详解
- yum源的修改
- 安卓应用软件开发必学的基础内容