1. 首页
  2. 文章中心
  3. IOS

iOS粒子路径移动效果 iOS实现QQ拖动效果

113 阅读 0 评论
我是靠谱客的博主 有魅力马里奥，最近开发中收集的这篇文章主要介绍iOS粒子路径移动效果 iOS实现QQ拖动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

粒子效果，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）——它可以根据一个路径生成一个形状。

路径分析如下图

根据上面我们需要创建一个 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<MAX_DIST) {
   //移除形状图层
   [self.shap removeFromSuperlayer];
   //添加一个弹性动画
   [UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
    //大圆复位
    self.center = self.smallCircle.center;
   } completion:^(BOOL finished) {
    //小圆显示
    self.smallCircle.hidden = NO;
   }];
  } else {
   //距离大于最大位置的时候，播放动画，按钮从父控件中删除
   //添加一个UIImageView 用来播放动画
   UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];
   [self addSubview:imageV];

   //添加图片
   NSMutableArray *imageArray = [NSMutableArray array];
   for (int i=1; i<=8; i++) {
    NSString *imageName = [NSString stringWithFormat:@"%d",i];
    UIImage *image = [UIImage imageNamed:imageName];
    [imageArray addObject:image];
   }
   imageV.animationImages = imageArray;
   //设置动画时长
   [imageV setAnimationDuration:1];
   //开始动画
   [imageV startAnimating];

   //一秒钟后.把当前的按钮从父控件当中移.
   dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self removeFromSuperview];
   });
  }
 }
}

//计算两个圆之间的距离 使用勾股定理：两直角边的平方和等于斜边的平方
- (CGFloat)distanceWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{
 //X轴上的偏移量（就是x1-x2的值）
 CGFloat offsetX = bigCircle.center.x - smallCircle.center.x;
 //y轴上的偏移量（就是y1-y2的值）
 CGFloat offsetY = bigCircle.center.y - smallCircle.center.y;

 return sqrt(offsetX*offsetX + offsetY*offsetY);
}

//根据两个圆设置一个不规的路径
- (UIBezierPath *)pathWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{

 CGFloat x1 = smallCircle.center.x;
 CGFloat y1 = smallCircle.center.y;

 CGFloat x2 = bigCircle.center.x;
 CGFloat y2 = bigCircle.center.y;

 CGFloat d = [self distanceWithSmallCircle:smallCircle bigCircle:self];

 if (d <= 0) {
  return nil;
 }


 CGFloat cosθ = (y2 - y1) / d;
 CGFloat sinθ = (x2 - x1) / d;

 CGFloat r1 = smallCircle.bounds.size.width * 0.5;
 CGFloat r2 = bigCircle.bounds.size.width * 0.5;

 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 * 0.5 * sinθ, pointA.y + d * 0.5 * cosθ);
 CGPoint pointP = CGPointMake(pointB.x + d * 0.5 * sinθ, pointB.y + d * 0.5 * cosθ);


 UIBezierPath *path = [UIBezierPath bezierPath];
 //AB
 [path moveToPoint:pointA];
 [path addLineToPoint:pointB];
 //BC(曲线)
 [path addQuadCurveToPoint:pointC controlPoint:pointP];
 //CD
 [path addLineToPoint:pointD];
 //DA(曲线)
 [path addQuadCurveToPoint:pointA controlPoint:pointO];

 return path;

}


//清空高亮状态
-(void)setHighlighted:(BOOL)highlighted{}

@end

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粒子路径移动效果 iOS实现QQ拖动效果的全部内容，希望文章能够帮你解决iOS粒子路径移动效果 iOS实现QQ拖动效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(75)

相关文章

swift 单例的实现方法及实例
swift 单例的实现方法及实例
iOS之UIWebView无法获取web标题的解决方法
iOS之UIWebView无法获取web标题的解决方法
ios UITableView实现无数据加载占位图片
ios UITableView实现无数据加载占位图片
iOS中只让textField使用键盘通知的实例代码
iOS中只让textField使用键盘通知的实例代码
iOS粒子路径移动效果 iOS实现QQ拖动效果
iOS粒子路径移动效果 iOS实现QQ拖动效果
iOS开发实现随机图片验证码封装
iOS开发实现随机图片验证码封装
iOS如何实现强制转屏、强制横屏和强制竖屏的实例代码
iOS如何实现强制转屏、强制横屏和强制竖屏的实例代码
详解Swift中对C语言接口缓存的使用以及数组与字符串转为指针类型的方法
详解Swift中对C语言接口缓存的使用以及数组与字符串转为指针类型的方法

评论列表共有 0 条评论

立即
投稿
返回
顶部