4.gif
1.gif
2.gif
3.gif
4
先上图，这就是所谓的贝尔曲线，公式我不会，我也不懂，感觉大学白学了
果冻参考链接
先来一个简单一点的果冻效果：
4.gif
代码没有什么难度，所以注释比较少，来直接上代码
//
// PullCircleView.m
// MyTest
//
// Created by 丁祥 on 2017/3/24.
// Copyright © 2017年 wonders. All rights reserved.
//
#import "PullCircleView.h"
#define boundSize 150
@interface CircleView : UIView
@end
@interface PullCircleView()
@property (nonatomic,strong)CAShapeLayer *shapeLayer;
@property (nonatomic,assign)double r1;
@property (nonatomic,assign)double r2;
@property (nonatomic,assign)double x1;
@property (nonatomic,assign)double x2;
@property (nonatomic,assign)double y1;
@property (nonatomic,assign)double y2;
@property (nonatomic,assign)double d;
@property (nonatomic,assign)CGPoint pointA;
@property (nonatomic,assign)CGPoint pointB;
@property (nonatomic,assign)CGPoint pointC;
@property (nonatomic,assign)CGPoint pointD;
@property (nonatomic,assign)CGPoint pointM;
@property (nonatomic,assign)CGPoint pointN;
@property (nonatomic,strong)CADisplayLink *displayLink;
@property (nonatomic,strong)CircleView *circleViewOne;//为了做出弹簧效果
@property (nonatomic,strong)CircleView *circleViewTwo;//为了做出弹簧效果
@property (nonatomic,assign)BOOL state;//点断以后
@end
@implementation PullCircleView
- (instancetype)initWithFrame:(CGRect)frame
{
self =[super initWithFrame:frame];
if (self) {
_shapeLayer =[CAShapeLayer layer];
_shapeLayer.fillColor=[UIColor redColor].CGColor;
[self.layer addSublayer:_shapeLayer];
[self loadData];
[self addGesture];
_circleViewOne =[[CircleView alloc] initWithFrame:CGRectMake(0, 0, 2*_r1, 2*_r1)];
_circleViewOne.center =CGPointMake(_x1, _y1);
_circleViewTwo =[[CircleView alloc] initWithFrame:CGRectMake(0, 0, 2*_r2, 2*_r2)];
_circleViewTwo.center =CGPointMake(_x2, _y2);
_state =YES;
[self addSubview:_circleViewOne];
[self addSubview:_circleViewTwo];
}
return self;
}
- (void)addGesture
{
_displayLink =[CADisplayLink displayLinkWithTarget:self selector:@selector(calcauLayer)];
[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
_displayLink.paused =YES;
UIPanGestureRecognizer *pan =[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pullLayer:)];
[self addGestureRecognizer:pan];
}
- (void)calcauLayer
{
CALayer *layer =_circleViewTwo.layer.presentationLayer;
_x2 =layer.position.x;
_y2 =layer.position.y;
CGFloat scale = (1 - [self getDistance]/boundSize);
_circleViewOne.transform = CGAffineTransformMakeScale(scale, scale);
[self updateLayer];
}
- (void)updateLayer
{
[self setNeedsDisplay];
}
- (void)pullLayer:(UIPanGestureRecognizer *)pangesture
{
if (pangesture.state == UIGestureRecognizerStateChanged){
CGPoint point =[pangesture locationInView:self];
_x2 =point.x;
_y2 =point.y;
_circleViewTwo.center =CGPointMake(_x2, _y2);
if ([self getDistance]<boundSize) {
CGFloat scale = (1 - [self getDistance]/boundSize);
scale = MAX(0.25, scale);
_circleViewOne.transform = CGAffineTransformMakeScale(scale, scale);
[self updateLayer];
}else{
self.shapeLayer.path =nil;
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_circleViewOne.transform =CGAffineTransformMakeScale(1, 1);
} completion:^(BOOL finished) {
_state =NO;
}];
}
}else if (pangesture.state == UIGestureRecognizerStateEnded){
if (_state) {
_displayLink.paused =NO;
}
[UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_x2 =_x1;
_y2 =_y1;
_circleViewTwo.center =CGPointMake(_x2, _y2);
} completion:^(BOOL finished) {
if (finished) {
_displayLink.paused =YES;
_state =YES;
}
}];
}
}
- (void)drawRect:(CGRect)rect
{
double d =[self getDistance];
double sin =[self getSin];
double cos =[self getCos];
_r1 =_circleViewOne.frame.size.width/2;
_r2 =_circleViewTwo.frame.size.width/2;
_pointA =CGPointMake(_x1-_r1*cos, _y1 +_r1*sin);
_pointB =CGPointMake(_x1+_r1*cos, _y1 -_r1*sin);
_pointC =CGPointMake(_x2+_r2*cos, _y2 -_r2*sin);
_pointD =CGPointMake(_x2-_r2*cos, _y2 +_r2*sin);
_pointM = CGPointMake(_pointA.x+(d / 2) * sin, _pointA.y + (d / 2) * cos);
_pointN = CGPointMake(_pointB.x + (d / 2) * sin, _pointB.y+ (d / 2) * cos);
UIBezierPath *path =[UIBezierPath bezierPath];
[path moveToPoint:_pointA];
[path addLineToPoint:_pointB];
[path addQuadCurveToPoint:_pointC controlPoint:_pointN];
[path addLineToPoint:_pointD];
[path addQuadCurveToPoint:_pointA controlPoint:_pointM];
self.shapeLayer.path =path.CGPath;
}
- (void)loadData
{
_x1 =200;
_y1 =200;
_x2 =200;
_y2 =200;
_r1 =15;
_r2 =20;
}
- (double)getDistance
{
double d =(_x2 -_x1)*(_x2 -_x1) +(_y2 -_y1)*(_y2 -_y1);
_d =sqrtf(d);
return _d;
}
- (double)getSin
{
double d =[self getDistance];
if (d ==0) {
return 0;
}
return (_x2 -_x1)/d;
}
- (double)getCos
{
double d =[self getDistance];
if (d==0) {
return 0;
}
return (_y2 -_y1)/d;
}
@end
@implementation CircleView
- (instancetype)initWithFrame:(CGRect)frame
{
self =[super initWithFrame:frame];
if (self) {
self.clipsToBounds =YES;
self.layer.cornerRadius =MIN(self.bounds.size.width, self.bounds.size.height)/2.0;
self.backgroundColor =[UIColor redColor];
}
return self;
}
@end
1.中间用到了CADisplayLink 结合UIBezierPath来去更新drawRect
2.用到了阻尼系数的动画，也就是spring函数
3.对于动画，可以选择spring函数，也可以用keysAnimal这个动画，不过要设置多个关键帧，所以直接选择spring函数比较方便
4.关键就是UIBezierPath的各个点的计算问题，可以根据前三个图，来认识一下UIBezierPath的特性，然后去计算就比较容易
在写的过程我遇到的问题：
1. 断点的计算，开始的圆我都是用path画的后来发现，还有断点问题，又重新写了一下，
2.曲线的曲度，我开始是不改变原点的大小，去改变曲线cotrolPoint的位置，但是形变无法控制，折腾一下午没成功，还是去改变原点的scale比较靠谱
网友评论