6.2 核心动画->4.0 常用动画效果
2016-07-26 本文已影响469人
蓝田_Loto
本文并非最终版本，如果想要关注更新或更正的内容请关注文集，联系方式详见文末，如有疏忽和遗漏，欢迎指正。
本文相关目录：
===================== 所属文集：6.0 图形和多媒体 =====================
6.2 核心动画->1.0 CALayer的简介
6.2 核心动画->1.1 CALayer的基本属性
6.2 核心动画->1.2 CALayer的创建 & 非根layer的隐式动画
6.2 核心动画->2.0 Core Animation(核心动画)
6.2 核心动画->3.0 核心动画 & UIView动画
6.2 核心动画->4.0 常用动画效果
===================== 所属文集：6.0 图形和多媒体 =====================
4.1 旋转立体效果 - 折叠图片案例
1、如何制作图片折叠效果？
把一张图片分成两部分显示，上面一部分，下面一部分，折叠上面部分的内容。
2、如何把一张图片分成两部分显示。
- 创建两个View，一个显示上半部分，一个显示下半部分
- 需要用到Layer(图层)的一个属性：contentsRect ，这个属性是可以控制图片显示的尺寸，可以
让图片只显示上部分或者下部分，注意: 取值范围是0~1
CGRectMake(0, 0, 1, 0.5) : 表示显示上半部分
CGRectMake(0, 0.5, 1, 0.5) : 表示显示下半部分
3、如何快速的把两部分拼接成一张完整的图片
(1)首先了解折叠，折叠其实就是旋转，既然需要旋转就需要明确锚点，因为默认都是绕着锚点旋转的。
(2)上部分内容绕着底部中心旋转，所以设置上部分的锚点为（0.5，1）
(3)锚点设置好了，就可以确定位置了.
(4)可以把上下部分重合在一起，然后分别设置上下部分的锚点，上部分的锚点为（0.5，1），下部分
的锚点为（0.5，0）,就能快速重叠了。
4、如何折叠上部分内容。
- 在拖动视图的时候，旋转上部分控件。修改 transform 属性。
- 可以在上部分和下部分底部添加一个拖动控件（拖动控件尺寸就是完整的图片尺寸），给这个控件添
加一个pan手势，就能制造一个假象，拖动控件的时候，折叠图片。
- 计算Y轴每偏移一点，需要旋转多少角度，假设完整图片尺寸高度为200，当y = 200时，上部分图片
应该刚好旋转180°，因此 angle = offsetY * M_PI / 200 ;
- 上部分内容应该是绕着X轴旋转，逆时针旋转，因此角度需要为负数。
代码示例：
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) IBOutlet UIImageView *topView;
@property(weak, nonatomic) IBOutlet UIImageView *bottomView;
@property(weak, nonatomic) IBOutlet UIView *dragView; // 手势拖动的 View
@property(weak, nonatomic) CAGradientLayer *gradientL; // 渐变图层
@end
@implementation ViewController
// 快速把两个控件拼接成一个完整图片
- (void)viewDidLoad {
[super viewDidLoad];
// 通过设置contentsRect可以设置图片显示的尺寸，取值0~1
_topView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
_topView.layer.anchorPoint = CGPointMake(0.5, 1);
_bottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
_bottomView.layer.anchorPoint = CGPointMake(0.5, 0);
// 添加手势
UIPanGestureRecognizer *pan =
[[UIPanGestureRecognizer alloc] initWithTarget:self
action:@selector(pan:)];
[_dragView addGestureRecognizer:pan];
#pragma mark - 阴影效果(当折叠图片的时候，底部应该有个阴影渐变过程)（利用CAGradientLayer渐变图层，制作阴影效果，添加到底部视图上，并且一开始需要隐藏，在拖动的时候慢慢显示出来。颜色应是由 透明到黑色 渐变,表示阴影从无到有）
// 创建渐变图层
CAGradientLayer *gradientL = [CAGradientLayer layer];
// 设置渐变颜色
gradientL.colors =
@[ (id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor ];
// 设置尺寸
gradientL.frame = _bottomView.bounds;
_gradientL = gradientL;
// 设置图层透明色为不透明
gradientL.opacity = 0;
// 设置渐变定位点（决定渐变的范围）
// gradientL.locations = @[@0.1,@0.4,@0.5];
// 设置渐变开始点，取值0~1（决定渐变的方向）
// gradientL.startPoint = CGPointMake(0, 1);
[_bottomView.layer addSublayer:gradientL];
}
#pragma mark - 拖动的时候旋转上部分内容
- (void)pan:(UIPanGestureRecognizer *)pan {
// 获取手指偏移量
CGPoint transP = [pan translationInView:_dragView];
// 初始化形变
CATransform3D transfrom = CATransform3DIdentity;
// 设置立体效果,增加旋转的立体感，给形变设置m34属性,近大远小
// -1 / z,z表示观察者在z轴上的值,表示距图层的距离:z越小,离我们越近，东西越大
transfrom.m34 = -1 / 500.0; // 第二个数
// 计算折叠角度，因为往下逆时针旋转，所以取反
CGFloat angle = -transP.y / 200.0 * M_PI;
// 开始旋转
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
_topView.layer.transform = transfrom;
// 设置阴影效果
// 在拖动的时候计算不透明度值，假设拖动200，阴影完全显示，不透明度应该为1，因此opacity=y轴偏移量*1/200.0;
_gradientL.opacity = transP.y * 1 / 200.0;
#pragma mark - 反弹效果(当手指抬起的时候，应该把折叠图片还原，其实就是把形变清空)
// 当手指抬起的时候，设置弹簧效果的动画
if (pan.state == UIGestureRecognizerStateEnded) {
// 弹簧效果的动画
[UIView animateWithDuration:0.6
delay:0
usingSpringWithDamping:0.2 // 弹性系数:越小，弹簧效果越明显
initialSpringVelocity:10 // 弹簧的初始速度
options:UIViewAnimationOptionCurveEaseInOut // 动画效果：快入快出
animations:^{
_topView.layer.transform = CATransform3DIdentity; // 初始化形变量
_gradientL.opacity = 0; // 还原阴影
}
completion:^(BOOL finished){
}];
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
旋转立体效果.gif
4.2 音量震动条效果
方法1 ：创建多个layer，按顺序播放y轴缩放动画
方法2：利用 CAReplicatorLayer（复制图层）实现
（这里只介绍方法2）
1、什么是CAReplicatorLayer？
一种可以复制自己子层的layer，并且复制出来的layer和原生子层有同样的属性，位置，形变，动画。
2、CAReplicatorLayer属性
// 复制层中子层总数：表示复制层里面有多少个子层，包括原始层
@property NSInteger instanceCount;
// 复制子层动画延迟时长
@property CFTimeInterval instanceDelay;
// 复制子层形变偏移量(不包括原生子层)：相对于原生子层x偏移，每个复制子层都是相对上一个
@property CATransform3D instanceTransform;
// 子层颜色:会和原生子层背景色冲突，如果设置了原生子层背景色，就不需要设置这个属性
@property (nullable) CGColorRef instanceColor;
// 颜色通道的偏移量:每个复制子层都是相对上一个的偏移量
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;
代码示例：
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) IBOutlet UIView *lightView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
#pragma mark - 首先创建复制layer,音乐振动条layer添加到复制layer上，然后复制子层
// 创建复制图层（CAReplicatorLayer），可以把图层里面所有子层复制
CAReplicatorLayer *repL = [CAReplicatorLayer layer];
// 设置复制图层的属性
repL.frame = _lightView.bounds;
// 添加复制图层到lightView上
[_lightView.layer addSublayer:repL];
#pragma mark - 先创建一个音量振动条，并且设置好动画,动画是绕着底部缩放，设置锚点
// 创建图层
CALayer *layer = [CALayer layer];
// 设置图层属性
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(15, _lightView.bounds.size.height);
layer.bounds = CGRectMake(0, 0, 30, 150);
layer.backgroundColor = [UIColor whiteColor].CGColor;
// 添加图层到复制图层上
[repL addSublayer:layer];
// 创建动画
CABasicAnimation *anim = [CABasicAnimation animation];
// 动画属性
anim.keyPath = @"transform.scale.y"; // 缩放y值
anim.toValue = @0.1;
anim.duration = 0.2;
anim.repeatCount = MAXFLOAT;
anim.autoreverses = YES; // 设置动画反转
// 添加动画
[layer addAnimation:anim forKey:nil];
// 复制层中子层总数：表示复制层里面有多少个子层，包括原生子层
repL.instanceCount = 5; // 设置5个子层，其中4个是复制层
// 复制子层形变偏移量(不包括原生子层)：相对于原生子层x偏移，每个复制子层都是相对上一个
// 设置复制子层的相对位置，每个x轴相差45
repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
// 设置复制子层动画延迟时长
repL.instanceDelay = 0.1;
// 子层颜色:会和原生子层背景色冲突，如果设置了原生子层背景色，就不需要设置这个属性
repL.instanceColor = [UIColor blueColor].CGColor;
// 颜色通道的偏移量:每个复制子层都是相对上一个的偏移量
repL.instanceBlueOffset = -0.3;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
音量震动条效果.gif
4.3 活动指示器效果
设计思路：
1、创建复制图层
2、创建一个矩形图层，设置缩放动画
3、复制矩形图层，并且设置每个复制层的角度形变
4、设置复制动画延长时间
代码示例：
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) IBOutlet UIView *gray;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
#pragma mark - 创建复制图层
CAReplicatorLayer *repL = [CAReplicatorLayer layer];
repL.frame = _gray.bounds;
[_gray.layer addSublayer:repL];
#pragma mark - 创建一个矩形图层，设置缩放动画。
CALayer *layer = [CALayer layer];
// 设置属性
layer.transform = CATransform3DMakeScale(0, 0, 0);
layer.position = CGPointMake(_gray.bounds.size.width / 2, 20);
layer.bounds = CGRectMake(0, 0, 10, 10);
layer.backgroundColor = [UIColor grayColor].CGColor;
// 添家图层
[repL addSublayer:layer];
// 设置缩放动画
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale";
anim.fromValue = @1; // 动画Value值从1到0变化
anim.toValue = @0;
anim.repeatCount = MAXFLOAT;
CGFloat duration = 1;
anim.duration = duration;
[layer addAnimation:anim forKey:nil];
#pragma mark - 复制矩形图层，并且设置每个复制层的角度形变
int count = 20;
CGFloat angle = M_PI * 2 / count; // 设置子层形变角度
repL.instanceCount = count; // 设置子层总数
repL.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
#pragma mark - 设置复制动画延长时间（需要保证第一个执行完毕之后，绕一圈刚好又是从第一个执行，因此需要把动画时长平均分给每个子层）
// 公式:子层动画延长时间 = 动画时长 / 子层总数
// 假设有两个图层，动画时间为1秒，延长时间就为0.5秒。当第一个动画执行到一半的时候（0.5），第二个开始执行。第二个执行完
repL.instanceDelay = duration / count;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
活动指示器效果.gif
4.4 粒子效果
思路：搞个画板绘制路径，自定义view
效果：随机绘制一条路径，点击开始按钮，粒子动画
代码示例：
ViewController.m
#import "DrawView.h"
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
#pragma mark - 点击开始动画
- (IBAction)startAnim:(id)sender {
DrawView *view = (DrawView *)self.view; // 强转的方式获取
[view startAnim];
}
#pragma mark - 点击重绘
- (IBAction)reDraw:(id)sender {
DrawView *view = (DrawView *)self.view;
[view reDraw];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
DrawView.h
#import <UIKit/UIKit.h>
@interface DrawView : UIView
- (void)startAnim; // 开始动画
- (void)reDraw; // 重绘
@end
DrawView.m
#import "DrawView.h"
@interface DrawView ()
@property(nonatomic, strong) UIBezierPath *path; // 路径
@property(nonatomic, weak) CALayer *dotLayer; // 点图层
@property(nonatomic, weak) CAReplicatorLayer *repL; // 复制层
@end
@implementation DrawView
#pragma mark - 1、加载完xib调用，创建复制层
- (void)awakeFromNib {
// 创建复制层
CAReplicatorLayer *repL = [CAReplicatorLayer layer];
// 设置复制层属性
repL.frame = self.bounds;
// 添加复制层到控件的layer上
[self.layer addSublayer:repL];
_repL = repL;
}
#pragma mark - 2、调用drawRect
- (void)drawRect:(CGRect)rect {
[_path stroke];
}
#pragma mark - 3、点击屏幕
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
// 获取touch对象
UITouch *touch = [touches anyObject];
// 获取当前触摸点
CGPoint curP = [touch locationInView:self];
// 设置起点
[self.path moveToPoint:curP];
}
#pragma mark - 4、懒加载路径（目的是为了在不点击重绘的情况下，将所有的线添加到一条路径上去）
// 因为核心动画只能设置一个路径，因此只能创建一个路径，懒加载路径。
- (UIBezierPath *)path {
if (_path == nil) {
_path = [UIBezierPath bezierPath];
}
return _path;
}
static int _instansCount = 0;
#pragma mark - 5、手指在屏幕上移动的时候
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
// 获取touch对象
UITouch *touch = [touches anyObject];
// 获取当前触摸点
CGPoint curP = [touch locationInView:self];
// 添加线到某个点
[_path addLineToPoint:curP];
// 重绘
[self setNeedsDisplay];
_instansCount++;
}
#pragma mark - 6、点击开始动画（重写开始动画的方法）
- (void)startAnim {
_dotLayer.hidden = NO; // 开始动画的时候显示图层
// 创建帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
// 动画属性
anim.keyPath = @"position";
anim.path = _path.CGPath;
anim.duration = 3;
anim.repeatCount = MAXFLOAT;
// 添加动画到 dotLayer 图层上
[self.dotLayer addAnimation:anim forKey:nil];
// 复制子层的数(如果复制的子层有动画，先添加动画，在复制)
_repL.instanceCount = _instansCount;
// 设置图层延时动画
_repL.instanceDelay = 0.2;
}
#pragma mark - 7、懒加载点图层
- (CALayer *)dotLayer {
if (_dotLayer == nil) {
// 创建粒子图层
CALayer *layer = [CALayer layer];
// 设置图层属性
CGFloat wh = 10;
layer.frame = CGRectMake(0, -1000, wh, wh);
layer.cornerRadius = wh / 2;
layer.backgroundColor = [UIColor blueColor].CGColor;
// 添加图层到复制层上
[_repL addSublayer:layer];
_dotLayer = layer;
}
return _dotLayer;
}
#pragma mark - 8、点击重绘（重写重绘方法）
- (void)reDraw {
_path = nil; // 清空绘图信息
[self setNeedsDisplay]; // 重绘
// 把图层移除父控件，复制层也会移除。
[_dotLayer removeFromSuperlayer];
_dotLayer = nil; // 清空点图层
_instansCount = 0; // 清空子层总数
}
@end
运行效果：
粒子效果.gif
4.5 倒影效果
实现思路：
1、通常做法：用复制图层实现，搞个UIImageView展示图片，然后复制UIImageView.
注意：复制图层只能复制子层，但是UIImageView只有一个主层，并没有子层，因此不能直接复制UIImageView
正确做法：应该把UIImageView添加到一个UIView上，然后复制UIView的层，就能复制UIImageView
注意：默认A控件是B控件的子控件，那么A控件的层就是B控件的层的子层。
2、但是有问题，默认UIView的层不是复制层，我们想把UIView的层变成复制层，重写+layerClass方法。
3、倒影效果：就是就是把复制图片旋转180度，然后往下平移，最好先偏移在，在旋转。
代码示例：
RepView.m
#import "RepView.h"
@implementation RepView
// 设置控件主层的类型
+ (Class)layerClass {
return [CAReplicatorLayer class]; // 设置为复制层
}
@end
ViewController.m
#import "RepView.h"
#import "ViewController.h"
@interface ViewController ()
@property(weak, nonatomic) IBOutlet RepView *repView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
CAReplicatorLayer *layer = (CAReplicatorLayer *)_repView.layer;
layer.instanceCount = 2;
// 设置平移（向下平移）
CATransform3D transform =
CATransform3DMakeTranslation(0, _repView.bounds.size.height, 0);
// 设置旋转：绕着X轴旋转（180度）
transform = CATransform3DRotate(transform, M_PI, 1, 0, 0);
// 设置复制层的形变（将旋转和平移的数据设置在layer上）
layer.instanceTransform = transform;
// 设置颜色通道的偏移量
layer.instanceAlphaOffset = -0.2;
layer.instanceBlueOffset = -0.5;
layer.instanceGreenOffset = -0.5;
layer.instanceRedOffset = -0.5;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
运行效果：
倒影效果.png
4.6 QQ粘性效果
实现思路:
步骤1、自定义大圆控件（UIButton）可以显示背景图片，和文字
步骤2、让大圆控件随着手指移动而移动（不能根据形变修改大圆的位置，只能通过center，因为全程都需要用到中心点计算）
步骤3、在拖动的时候，添加一个小圆控件在原来大圆控件的位置
- 注意这个小圆控件并不会随着手指移动而移动，因此应该添加到父控件上
- 一开始设置中心点和尺寸和大圆控件一样
- 随着大圆拖动，小圆半径不断减少，可以根据两个圆心的距离，随便生成一段比例，随着圆心距离
增加，圆心半径不断减少
- 每次小圆改变，需要重新设置小圆的尺寸和圆角半径
步骤4、粘性效果：就是在两圆之间绘制一个形变矩形，描述形变矩形路径
- 这里需要用到CAShapeLayer,可以根据一个路径，生成一个图层，展示出来。把形变图层添加到父控件并且显示在小圆图层下就OK了。因为所有计算出来的点，都是基于父控件。
注意：这里不能用绘图，因为绘图内容只要超过当前控件尺寸就不会显示，但是当前形变矩形必须显示
在控件之外
先复习下对边、邻边、斜边
- 对边：这角的对面的线
- 邻边：这个角的邻居.组成这个角的两条线
- 斜边：直角三角形三条线中最长的这条线（直角的对面的这么条）
cos Θ = 邻边 / 斜边
sin Θ =对边 / 斜边
附赠：角度、弧度互转图表
角度、弧度互转图表.png
粘性计算图：
粘性计算图.png
关于不规则矩形的处理：（使用 CAShapeLayer）
- 普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的bounds值一致,它本身是有形状的,而且是矩形.
- CAShapeLayer在初始化时也需要给一个frame值，但是,它本身没有形状,它的形状来源于你给定的一个path（因此必须给一个path，而且，即使path不完整也会自动首尾相接）然后它会去取CGPath值
步骤5、粘性业务逻辑处理
- 当圆心距离超过100，就不需要描述形变矩形（并且把之前的形变矩形移除父层），小圆也需要隐藏。
- 没有超过100，则相反。
步骤6、手指停止拖动业务逻辑
- 判断下圆心是否超过100，超过就播放爆炸效果，添加个UIImageView在当前控件上，并且需要取消控制器view的自动布局。
- 没有超过，就还原。
代码示例：
ViewController.m
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 取消自动布局
self.view.translatesAutoresizingMaskIntoConstraints = NO;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
GooView.m（注意GooView继承自UIButton，且 SB中的UIButton的class要关联GooView）
#import "GooView.h"
@interface GooView ()
@property(nonatomic, weak) UIView *smallCircleView; // 小圆
@property(nonatomic, assign) CGFloat oriSmallRadius; // 小圆半径
@property(nonatomic, weak) CAShapeLayer *shapeLayer; // 不规则矩形
@end
@implementation GooView
#pragma mark - 不规则矩形的懒加载（两圆产生距离才需要绘制）
- (CAShapeLayer *)shapeLayer {
if (_shapeLayer == nil) {
CAShapeLayer *layer = [CAShapeLayer layer]; // 创建不规则矩形
_shapeLayer = layer;
layer.fillColor = self.backgroundColor.CGColor; // 设置不规则矩形的填充颜色
// 不规则矩形添加按钮的父控件上的layer
[self.superview.layer insertSublayer:layer below:self.layer];
}
return _shapeLayer;
}
#pragma mark - 小圆懒加载
- (UIView *)smallCircleView {
if (_smallCircleView == nil) {
UIView *view = [[UIView alloc] init]; // 创建
view.backgroundColor = self.backgroundColor; // 背景色
_smallCircleView = view;
// 小圆添加按钮的父控件上
[self.superview insertSubview:view belowSubview:self];
}
return _smallCircleView;
}
- (void)awakeFromNib {
[self setUp];
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self setUp];
}
return self;
}
#pragma mark - 初始化
- (void)setUp {
CGFloat w = self.bounds.size.width;
// 记录小圆最初始半径
_oriSmallRadius = w / 2;
// 设置最初始圆角半径
self.layer.cornerRadius = w / 2;
// 设置小圆的文字颜色
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
// 设置小圆的文字字体大小
self.titleLabel.font = [UIFont systemFontOfSize:12];
// 添加手势事件（不用touchesBegan,因为会跟按钮监听事件冲突）
UIPanGestureRecognizer *pan =
[[UIPanGestureRecognizer alloc] initWithTarget:self
action:@selector(pan:)];
// 添加手势到控件上
[self addGestureRecognizer:pan];
// 设置小圆位置、尺寸和圆角半径
self.smallCircleView.center = self.center;
self.smallCircleView.bounds = self.bounds;
self.smallCircleView.layer.cornerRadius = w / 2;
}
// 最大圆心距离
#define kMaxDistance 80
// 计算两个圆心之间的距离
- (CGFloat)circleCenterDistanceWithBigCircleCenter:(CGPoint)bigCircleCenter
smallCircleCenter:(CGPoint)smallCircleCenter {
CGFloat offsetX = bigCircleCenter.x - smallCircleCenter.x; // x2-x1
CGFloat offsetY = bigCircleCenter.y - smallCircleCenter.y; // y2-y1
// 开平方得到两个圆心之间的距离
return sqrt(offsetX * offsetX + offsetY * offsetY);
}
// 描述两圆之间一条矩形路径
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView
smallCirCleView:(UIView *)smallCirCleView {
// 大圆的圆心、x、y、半径
CGPoint bigCenter = bigCirCleView.center;
CGFloat x2 = bigCenter.x;
CGFloat y2 = bigCenter.y;
CGFloat r2 = bigCirCleView.bounds.size.width / 2;
// 小圆的圆心、x、y、半径
CGPoint smallCenter = smallCirCleView.center;
CGFloat x1 = smallCenter.x;
CGFloat y1 = smallCenter.y;
CGFloat r1 = smallCirCleView.bounds.size.width / 2;
// 获取圆心距离
CGFloat d = [self circleCenterDistanceWithBigCircleCenter:bigCenter
smallCircleCenter:smallCenter];
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θ);
// 1、创建一个路径对象
UIBezierPath *path = [UIBezierPath bezierPath];
// 2、一个封闭路径（A-B-C-D-A）
[path moveToPoint:pointA]; // 起点：A
[path addLineToPoint:pointB]; // 添加线AB
[path addQuadCurveToPoint:pointC controlPoint:pointP]; // 绘制BC曲线
[path addLineToPoint:pointD]; // 添加线CD
[path addQuadCurveToPoint:pointA controlPoint:pointO]; // 绘制DA曲线
// 3、返回path
return path;
}
- (void)pan:(UIPanGestureRecognizer *)pan {
#warning 移动控件位置
// 获取手指偏移量
CGPoint transP = [pan translationInView:self];
// 修改按钮的形变,并不会修改中心点，因此要用下面的方法
// self.transform = CGAffineTransformTranslate(self.transform, transP.x,
// transP.y);
// 通过修改center的xy，用以修改按钮的形变
CGPoint center = self.center;
center.x += transP.x;
center.y += transP.y;
// 将修改后的参数赋值
self.center = center;
// 复位
[pan setTranslation:CGPointZero inView:self];
#warning 设置小圆半径（小圆半径随着大小两个圆的圆心的距离不断增加而减小）
// 计算圆心距离
CGFloat d = [self
circleCenterDistanceWithBigCircleCenter:self.center
smallCircleCenter:self.smallCircleView.center];
// 计算小圆的半径（随着圆心距的不断变化而变化）
CGFloat smallRadius = _oriSmallRadius - d / 10;
// 设置小圆的尺寸（随着小圆半径的不断变化而变化）
self.smallCircleView.bounds =
CGRectMake(0, 0, smallRadius * 2, smallRadius * 2);
// 设置小圆的圆角半径（随着小圆半径的不断变化而变化）
self.smallCircleView.layer.cornerRadius = smallRadius;
#warning 绘制不规则矩形
/*
遇到的问题：不能通过绘图，因为绘图只能在当前控件上画，超出部分不会显示
解决方法：展示不规则矩形，通过不规则矩形路径生成一个图层
*/
// 当圆心距离大于最大圆心距离的时候，可以拖出来
if (d > kMaxDistance) {
self.smallCircleView.hidden = YES; // 隐藏小圆
[self.shapeLayer removeFromSuperlayer]; // 移除不规则的矩形
self.shapeLayer = nil; // 清空不规则的矩形的内容
} else if (d > 0 && self.smallCircleView.hidden == NO) {
// 当有圆心距离，并且圆心距离不大的时候，展示不规则矩形
self.shapeLayer.path =
[self pathWithBigCirCleView:self smallCirCleView:self.smallCircleView]
.CGPath;
}
#warning 手指抬起的时候，还原
if (pan.state == UIGestureRecognizerStateEnded) {
// 当圆心距离大于最大圆心距离的时候，展示gif动画
if (d > kMaxDistance) {
// 创建imageView，设置Frame
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];
// for循环展示图片
NSMutableArray *arrM = [NSMutableArray array];
for (int i = 1; i < 9; i++) {
UIImage *image =
[UIImage imageNamed:[NSString stringWithFormat:@"%d", i]];
[arrM addObject:image];
}
imageView.animationImages = arrM; // 将图片添加到数组
imageView.animationRepeatCount = 1; // 设置动画次数
imageView.animationDuration = 0.5; // 设置动画时间
[imageView startAnimating]; // 开始动画
[self addSubview:imageView]; // 添加图片
// 延迟0.4s，移除控件
dispatch_after(
dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)),
dispatch_get_main_queue(), ^{
[self removeFromSuperview];
});
} else { // 当圆心距离小于最大圆心距离的时候
[self.shapeLayer removeFromSuperlayer]; // 移除不规则矩形
self.shapeLayer = nil; // 清空不规则的矩形的内容
// 当抬起手指的时候，还原位置、显示小圆
[UIView animateWithDuration:0.5
delay:0
usingSpringWithDamping:0.2
initialSpringVelocity:0
options:UIViewAnimationOptionCurveLinear
animations:^{
self.center = self.smallCircleView.center; // 设置大圆中心点位置
}
completion:^(BOOL finished) {
self.smallCircleView.hidden = NO; // 显示小圆
}];
}
}
}
@end
运行效果：
QQ粘性效果.gif
本文源码 Demo 详见 Github
https://github.com/shorfng/iOS_6.0_Graphics_and_multimedia.git
作者：蓝田（Loto）
出处： 简书
如果你觉得本篇文章对你有所帮助，请点击文章末尾下方“喜欢”
如有疑问，请通过以下方式交流：
① 评论区回复 ② 微信（加好友请注明“简书+称呼”） ③发送邮件至 shorfng@126.com
本文版权归作者和本网站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
