4.gif
1.gif
2.gif
3.gif
4
先上圖，這就是所謂的貝爾曲線(xiàn)盖文，公式我不會(huì)嘱蛋，我也不懂，感覺(jué)大學(xué)白學(xué)了
果凍參考鏈接
先來(lái)一個(gè)簡(jiǎn)單一點(diǎn)的果凍效果：
4.gif
代碼沒(méi)有什么難度五续，所以注釋比較少洒敏，來(lái)直接上代碼
//
// 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;//點(diǎn)斷以后
@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 結(jié)合UIBezierPath來(lái)去更新drawRect
2.用到了阻尼系數(shù)的動(dòng)畫(huà)，也就是spring函數(shù)
3.對(duì)于動(dòng)畫(huà)疙驾，可以選擇spring函數(shù)凶伙，也可以用keysAnimal這個(gè)動(dòng)畫(huà)，不過(guò)要設(shè)置多個(gè)關(guān)鍵幀荆萤，所以直接選擇spring函數(shù)比較方便
4.關(guān)鍵就是UIBezierPath的各個(gè)點(diǎn)的計(jì)算問(wèn)題镊靴，可以根據(jù)前三個(gè)圖，來(lái)認(rèn)識(shí)一下UIBezierPath的特性链韭，然后去計(jì)算就比較容易
在寫(xiě)的過(guò)程我遇到的問(wèn)題：
1. 斷點(diǎn)的計(jì)算偏竟，開(kāi)始的圓我都是用path畫(huà)的后來(lái)發(fā)現(xiàn)，還有斷點(diǎn)問(wèn)題敞峭，又重新寫(xiě)了一下踊谋，
2.曲線(xiàn)的曲度，我開(kāi)始是不改變?cè)c(diǎn)的大小旋讹，去改變曲線(xiàn)cotrolPoint的位置殖蚕，但是形變無(wú)法控制，折騰一下午沒(méi)成功沉迹，還是去改變?cè)c(diǎn)的scale比較靠譜
