iOS如何实现QQ拖动效果-创新互联-成都快上网建站

iOS如何实现QQ拖动效果-创新互联

小编给大家分享一下iOS如何实现QQ拖动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

10年积累的网站建设、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有肇源免费网站建设让你可以放心的选择与我们合作。

具体代码如下

一、图示

iOS如何实现QQ拖动效果

二、分析

我们要实现的如果如上面的图示,那么我们可以按照下面的步骤操作:

第一步:我们的红点其实是一个UIButton。创建一个BageValueView继承自UIButton

第二步:初始化的时候,初始化控件,设置圆角,修改背景、文字颜色

第三步:添加手势。在手势的处理中我们,我们需要让当前控件随着手指移动而移动。

第四步:控件一开始创建的时候,其实有两个圆,一个就是我们能够拖动的大圆,另外一个就是原始位置上会改变大小的圆。这一步骤中,主要就是创建这个小圆,它的初始参数和大圆一样。
在手势的处理中,根据两圆的位置,来计算小圆半径,当两圆的位置大于大位置时候,小圆隐藏掉。

//获取两个圆之间的距离
CGFloat distance = [self distanceWithSmallCircle:self.smallCircle bigCircle:self];
if(distance<=MAX_DIST){//只有距离不超过大距离才计算小圆半径
 //计算小圆的半径
 //小圆半径最小的时候是MIN_RADIUS,这个时候两个圆达到大距离MAX_DIST
 //小圆半径大的时候是原始半径,这个时候两圆距离是0
 //处于前面两者之间的时候,小圆的半径是:MIN_RADIUS + (原始半径 - MIN_RADIUS)/MAX_DIST * (MAX_DIST - 当前的距离)
 CGFloat smallR = self.bounds.size.width * 0.5;
 smallR = MIN_RADIUS + (MAX_DIST-distance) * (smallR-MIN_RADIUS)/MAX_DIST;
 //重新设置小圆的尺寸
 self.smallCircle.bounds = CGRectMake(0, 0, smallR*2, smallR*2);
 //重新设置小圆的半径
 self.smallCircle.layer.cornerRadius = smallR;
}else{//超过了大距离
 self.smallCircle.hidden = YES;
}

第五步:创建大小圆之间的连接部分。连接部分我们需要创建一个形状图层(CAShapeLayer)——它可以根据一个路径生成一个形状。

路径分析如下图

iOS如何实现QQ拖动效果

根据上面我们需要创建一个 ABCDA 其中DA和BC是曲线,控制点分别为O和P。

第六步:当手势结束的时候,我们需要判断当前两圆的位置,如果小圆大距离,那么复位。如果大于大距离,那么添加一个销毁动画。

三、代码

2.1 BageValueView.m

//
// BageValueView.m
// 03_UIView78_粒子效果2
//
// Created by 杞文明 on 17/7/22.
// Copyright © 2017年 杞文明. All rights reserved.
//

#import "BageValueView.h"

#define MAX_DIST 80
#define MIN_RADIUS 5
@interface BageValueView()

@property (nonatomic, weak) UIView *smallCircle;
@property (nonatomic, weak) CAShapeLayer *shap;


@end

@implementation BageValueView

-(void)awakeFromNib{
 [self setUp];
}

-(instancetype)initWithFrame:(CGRect)frame{
 if ( self = [super initWithFrame:frame] ) {
  [self setUp];
 }
 return self;
}

//形状图层
-(CAShapeLayer*)shap{
 if(_shap == nil){
  //形状图层,它可以根据一个路径生成一个形状
  CAShapeLayer *shap = [CAShapeLayer layer];
  //设置形状填充色
  shap.fillColor = [UIColor redColor].CGColor;
  _shap = shap;
  //添加到最底层
  [self.superview.layer insertSublayer:shap atIndex:0];
 }
 return _shap;
}

//初始化
-(void)setUp{
 //设置圆角
 self.layer.cornerRadius = self.bounds.size.width * 0.5;

 //设置背景文字颜色
 [self setBackgroundColor:[UIColor redColor]];
 [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
 self.titleLabel.font = [UIFont systemFontOfSize:12];

 //添加手势
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
 [self addGestureRecognizer:pan];

 //添加小圆
 UIView *smallCircle = [[UIView alloc]initWithFrame:self.frame];
 smallCircle.backgroundColor = self.backgroundColor;
 smallCircle.layer.cornerRadius = self.layer.cornerRadius;
 self.smallCircle = smallCircle;
 //把小圆添加到父控件中,并且在大圆下面
 [self.superview insertSubview:smallCircle belowSubview:self];

}

-(void)pan:(UIPanGestureRecognizer*)pan{
 //获取当前点
 CGPoint currentP = [pan translationInView:self];
 //移动
 CGPoint center = self.center;
 center.x += currentP.x;
 center.y += currentP.y;
 self.center = center;
 //复位
 [pan setTranslation:CGPointZero inView:self];

 //获取两个圆之间的距离
 CGFloat distance = [self distanceWithSmallCircle:self.smallCircle bigCircle:self];
 if(distance<=MAX_DIST){//只有距离不超过大距离才计算小圆半径
  //计算小圆的半径
  //小圆半径最小的时候是MIN_RADIUS,这个时候两个圆达到大距离MAX_DIST
  //小圆半径大的时候是原始半径,这个时候两圆距离是0
  //处于前面两者之间的时候,小圆的半径是:MIN_RADIUS + (原始半径 - MIN_RADIUS)/MAX_DIST * (MAX_DIST - 当前的距离)
  CGFloat smallR = self.bounds.size.width * 0.5;
  smallR = MIN_RADIUS + (MAX_DIST-distance) * (smallR-MIN_RADIUS)/MAX_DIST;
  //重新设置小圆的尺寸
  self.smallCircle.bounds = CGRectMake(0, 0, smallR*2, smallR*2);
  //重新设置小圆的半径
  self.smallCircle.layer.cornerRadius = smallR;
 }else{//超过了大距离
  self.smallCircle.hidden = YES;
  [self.shap removeFromSuperlayer];
 }

 //创建不规则路径,其实就是连个圆之间连接的部分
 //小圆不隐藏才创建
 if(self.smallCircle.hidden == NO){
  UIBezierPath *path = [self pathWithSmallCircle:self.smallCircle bigCircle:self];
  self.shap.path = path.CGPath;
 }

 //当手指松开的时候
 if (pan.state==UIGestureRecognizerStateEnded) {
  //如果两圆之间的距离小于大距离,大圆复位
  if (distance

2.2 ViewController.m

//
// ViewController.m
// 03_UIView78_粒子效果2
//
// Created by 杞文明 on 17/7/22.
// Copyright © 2017年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 //让View在显示时不要把Autoresizing转成自动布局
 self.view.translatesAutoresizingMaskIntoConstraints = NO;
}


@end

以上是“iOS如何实现QQ拖动效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:iOS如何实现QQ拖动效果-创新互联
浏览路径:http://kswjz.com/article/dgcjoh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流