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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS之Cocoapods安装教程(全面解析)

    网上关于cocoapods的教程很多,关于它的优点我不赘述:但是我根据多次安装的经验,把我遇到的问题写一下,希望对新手有所帮助: 1. 设置输入源(由于默认的gem资源是国外的,由于历史原因,访问比较慢,所以需要改为国内的) 删除原来的: $ sudo gem sources --remove https://rubygems.org/ 添加新的 $ sudo gem sources -a https://ruby.taobao.org/ 出现如下提示,即为设置成功 $ sudo gem sou

  • iOS如何实现强制转屏、强制横屏和强制竖屏的实例代码

    本文介绍了iOS如何实现强制转屏.强制横屏和强制竖屏的实例代码,分享给大家 今天项目中遇到正在看视频的时候账号被挤,如果当时是横屏的情况下,需要强制竖屏.真头疼,网上找了好多方法,终于解决啦.O(∩_∩)O~ 强制横屏: [self interfaceOrientation:UIInterfaceOrientationLandscapeRight]; 强制竖屏: [self interfaceOrientation:UIInterfaceOrientationPortrait]; 强制转屏 -

  • iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • iOS实现手机获取验证码倒计时效果

    手机获取验证码的倒计时效果,实现很简单,附倒计时效果完整代码 之前做项目使用的是NSTimer做的倒计时效果,效果不太好.今天学习了下用GCD做,效果还是不错的. 关键代码如下:(完整代码) //创建一个全局并非队列 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); //创建一个定时器 _timer = dispatch_source_create(DISPATCH_SO

  • IOS 禁止缩放页面的实现方法

    IOS 禁止缩放页面的实现方法 在ios10前我们能通过设置meta来禁止用户缩放页面: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 在ios10系统中meta设置失效了: 为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以

  • iOS tableView实现单选和多选的实例代码

    今天在项目中遇到了tableView的单选需求,现在总结一下,用一个简单的demo实现了简单的单选和多选两个功能.先看下效果图: 1:首先实现下单选 1:使用一个变量记录选中的行 @property (assign, nonatomic) NSIndexPath *selIndex; //单选选中的行 2:设置tableView数据,共2组,每组10行, - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { ret

  • iOS模仿微信长按识别二维码的多种方式

    参考:https://github.com/nglszs/BCQRcode 方式一: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end ************** #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDid

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

    粒子效果,QQ拖动效果,实现很简单,具体代码如下 一.图示 二.分析 我们要实现的如果如上面的图示,那么我们可以按照下面的步骤操作: 第一步:我们的红点其实是一个UIButton.创建一个BageValueView继承自UIButton 第二步:初始化的时候,初始化控件,设置圆角,修改背景.文字颜色 第三步:添加手势.在手势的处理中我们,我们需要让当前控件随着手指移动而移动. 第四步:控件一开始创建的时候,其实有两个圆,一个就是我们能够拖动的大圆,另外一个就是原始位置上会改变大小的圆.这一步骤中

  • iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • iOS 仿微博客户端红包加载界面 XLDotLoading效果

    一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范

  • iOS使用自带的UIViewController实现qq加号下拉菜单的功能(实例代码)

    创建PopViewControlller 在tableview中创建一个tableview用于显示菜单 //重置控制器的大小 -(CGSize)preferredContentSize{ if (self.popoverPresentationController != nil) { CGSize tempSize ; tempSize.height = self.view.frame.size.height; tempSize.width = 150; CGSize size = [_tabl

  • iOS开发中仿Tumblr点赞心破碎动画效果

    最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画: 1.首先看下效果: 2.模仿Tumblr中的效果应用如下: 原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等: setupUI及touch Action: <span style="font-size:14px;">- (void)setupUI { // 点击的btn UIB

  • iOS高仿微信相册界面翻转过渡动画效果

    点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背

  • iOS TableView头视图根据偏移量下拉缩放效果

    本文实例为大家分享了iOS TableView实现下拉缩放效果的具体代码,供大家参考,具体内容如下 在做项目时,一些TableView的地方会使用到下拉TableView让HeardView头视图随其偏移量的变化而变化,之前做过一次但没记录下来.现在做的时候总是遇到一些问题,比如下拉时是以原点向左右两边放大,这个只是效果问题.还有就是看到的视图确实变大了,但是会盖到下面的TableViewCell.开始以为是加在里面的视图变大,而TableViewHeardView没变大,我NSLog打印了一下

  • iOS开发中TabBar再次点击实现刷新效果

    需求 之前已经实现了自定义TabBar,如图所示: 自定义TabBar.jpeg 现在需要实现一个类似今日头条TabBar的功能 -- 如果继续点击当前TabBar的选中项,那么该界面需要刷新UITableView. 分析 既然已经自定义了TabBar,那么最简单的就是在自定义中给TabBar中需要的UITabBarButton添加事件 -- 点击就发送通知,并且将当前的索引传出去.对应的界面监听通知,拿到索引比对,如果和当前索引一致,就执行对应的操作. 实现 1. 自定义TabBar的layo

  • Python PyQt4实现QQ抽屉效果

    本文实例为大家分享了Python PyQt4实现QQ抽屉效果展示的具体代码,供大家参考,具体内容如下 先看截图效果: 主要是使用了QT的QTabWidget.QToolBox多页窗口部件 # -*- coding: utf-8 -*- from PyQt4.QtGui import * from PyQt4.QtCore import * import sys QTextCodec.setCodecForTr(QTextCodec.codecForName("utf8")) class

  • ViewDragHelper实现QQ侧滑效果

    前言 侧滑的实现方式有很多方式来实现,这次总结的ViewDragHelper就是其中一种方式,ViewDragHelper是2013年谷歌I/O大会发布的新的控件,为了解决界面控件拖拽问题.下面就是自己学习写的一个实现类似于QQ侧滑效果的实现. activity_main.xml: <com.yctc.drag.DragLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

随机推荐