大家好,今天是2015年的最后一天,在這里先祝大家新年快樂,在新的一年里打代碼沒bug.
好了,今天要講的是貝塞爾曲線的簡單應(yīng)用.大家在用app的時(shí)候不知道有沒有注意到有些app里,當(dāng)你向右滑動(dòng)屏幕時(shí),如果沒有內(nèi)容的話會從屏幕坐標(biāo)向右出現(xiàn)一個(gè)曲線陰影,而且陰影的形狀是根據(jù)手指的位置以及滑動(dòng)程度來決定的,效果圖如下.
那這是怎么做到的呢,看看代碼大家就知道了,代碼注釋的很詳細(xì),相信大家能看懂,如果想深入研究貝塞爾曲線,大家可以上網(wǎng)查查.
自定義的View
//
// XMHView.m
// XMHDragView
//
// Created by 徐茂懷 on 15/12/31.
// Copyright ? 2015年 徐茂懷. All rights reserved.
//
#import "XMHView.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface XMHView ()
@property(nonatomic, strong) UIView *dotOne; //這是個(gè)小點(diǎn),向下滑動(dòng)時(shí)改變其Point,從而繪制貝塞爾曲線
@property(nonatomic, assign) CGFloat dotOneX; //dotOne的x坐標(biāo),當(dāng)滑動(dòng)時(shí)會改變
@property(nonatomic, assign) CGFloat dotOneY; //dotOne的y坐標(biāo),當(dāng)滑動(dòng)時(shí)會改變
@property(nonatomic, strong) CAShapeLayer *dotOneShapeLayer;//這是滑動(dòng)時(shí)出現(xiàn)的那個(gè)曲面
/**下面的和上面的對應(yīng),上面是向下滑動(dòng)時(shí)的點(diǎn),下面是向右滑動(dòng)時(shí)的點(diǎn)*/
@property(nonatomic, assign) CGFloat maxWidth;
@property(nonatomic, strong) UIView *dotTwo;
@property(nonatomic, assign) CGFloat dotTwoX;
@property(nonatomic, assign) CGFloat dotTwoY;
@property(nonatomic, strong) CAShapeLayer *dotTwoShapeLayer;
@property(nonatomic, strong) CADisplayLink *dotTwoDisPlayLink;
@property(nonatomic, assign)BOOL isAnimating;
@property(nonatomic, strong) CADisplayLink *disPlayLink;//這相當(dāng)于一個(gè)定時(shí)器,不同于NSTimer的是NSTimer一旦初始化它就開始運(yùn)行，而CADisplayLink需要將顯示鏈接添加到一個(gè)運(yùn)行循環(huán)中，即用于處理系統(tǒng)事件的一個(gè)Cocoa Touch結(jié)構(gòu),還有就是NSTimer我們通常會用在背景計(jì)算，更新一些數(shù)值資料，而如果牽涉到畫面的更新，動(dòng)畫過程的演變，我們通常會用CADisplayLink。
@end
@implementation XMHView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.alpha = .4;
[self addGesture];
[self configDotView];
[self initShapeLayer];
[self updateShapeLayerPath];
}
return self;
}
#pragma mark-添加手勢和displaylink
-(void)addGesture
{
_isAnimating = NO;//是否處于動(dòng)畫狀態(tài)
// 添加滑動(dòng)手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanAction:)];
self.userInteractionEnabled = YES;
[self addGestureRecognizer:pan];
// CADisplayLink默認(rèn)每秒運(yùn)行60次calculatePath是算出在運(yùn)行期間_curveView的坐標(biāo)，從而確定_shapeLayer的形狀
_disPlayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
[_disPlayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];//之前說過CADisplayLink需要添加到運(yùn)行時(shí)中
_disPlayLink.paused = YES;
}
#pragma mark -初始化shapeLayer并將其顏色設(shè)置為灰色
-(void)initShapeLayer
{
_dotOneShapeLayer = [CAShapeLayer layer];
_dotOneShapeLayer.fillColor = [UIColor grayColor].CGColor;
[self.layer addSublayer:_dotOneShapeLayer];
_dotTwoShapeLayer = [CAShapeLayer layer];
_dotTwoShapeLayer.fillColor = [UIColor grayColor].CGColor;
[self.layer addSublayer:_dotTwoShapeLayer];
}
#pragma mark -初始化2個(gè)小點(diǎn)
- (void)configDotView
{
_dotOne = [[UIView alloc] initWithFrame:CGRectMake(WIDTH / 2.0, 0, 3, 3)];
_dotTwo = [[UIView alloc] initWithFrame:CGRectMake(0, HEIGHT / 2, 3, 3)];
[self addSubview:_dotOne];
[self addSubview:_dotTwo];
}
#pragma mark -當(dāng)滑動(dòng)時(shí)改變小點(diǎn)的point
- (void)handlePanAction:(UIPanGestureRecognizer *)pan
{
if(!_isAnimating)
{
if(pan.state == UIGestureRecognizerStateChanged)
{
CGPoint point = [pan translationInView:self];
// 這部分代碼使dotOne跟著手勢走
CGFloat dotOneHeight = point.y * 0.7;
_dotOneX = WIDTH / 2.0 + point.x;
_dotOneY = dotOneHeight ;
_dotOne.frame = CGRectMake(_dotOneX,_dotOneY,_dotOne.frame.size.width,_dotOne.frame.size.height);
// 根據(jù)r5的坐標(biāo),更新_shapeLayer形狀
CGFloat dotTwoWidth = point.x * 0.7 ;
_dotTwoX = dotTwoWidth;
_dotTwoY = HEIGHT / 2.0 + point.y;
_dotTwo.frame = CGRectMake(_dotTwoX, _dotTwoY, _dotTwo.frame.size.width, _dotTwo.frame.size.height);
[self updateShapeLayerPath];//當(dāng)小點(diǎn)point改變,各自的shaplayer也會跟著變
}
else if (pan.state == UIGestureRecognizerStateCancelled ||
pan.state == UIGestureRecognizerStateEnded ||
pan.state == UIGestureRecognizerStateFailed)
{
// 手勢結(jié)束時(shí),_shapeLayer返回原狀并產(chǎn)生彈簧動(dòng)效
_isAnimating = YES;
_disPlayLink.paused = NO; //開啟displaylink,會執(zhí)行方法calculatePath.
// 彈簧動(dòng)效,因?yàn)楦髯缘膕hapelayer是根據(jù)各自的點(diǎn)動(dòng),當(dāng)小點(diǎn)有彈簧效果,那么shapelayer也會有彈簧效果
[UIView animateWithDuration:1.0
delay:0.0
usingSpringWithDamping:1.0
initialSpringVelocity:0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
_dotOne.frame = CGRectMake(WIDTH / 2.0, 0, 3, 3);
_dotTwo.frame = CGRectMake(0, HEIGHT / 2.0, 3, 3);
} completion:^(BOOL finished) {
if(finished)
{
_disPlayLink.paused = YES;
_isAnimating = NO;
}
}];
}
}
}
- (void)updateShapeLayerPath
{
// 更新_shapeLayer形狀,貝塞爾曲線其實(shí)就是根據(jù)一天直線和一個(gè)點(diǎn)描繪出一條曲線,以向下滑動(dòng)為例,首先確定一條直線,這條直線就是從(0,0)到(WIDTH,0)這個(gè)線,然后就可以根據(jù)dotOne的point去描繪這條曲線了
UIBezierPath *dotOnePath = [UIBezierPath bezierPath];
[dotOnePath moveToPoint:CGPointMake(0, 0)];
[dotOnePath addLineToPoint:CGPointMake(WIDTH, 0)];
[dotOnePath addQuadCurveToPoint:CGPointMake(0, 0)
controlPoint:CGPointMake(_dotOneX, _dotOneY)];
[dotOnePath closePath];
_dotOneShapeLayer.path = dotOnePath.CGPath;
UIBezierPath *dotTwoPath = [UIBezierPath bezierPath];
[dotTwoPath moveToPoint:CGPointMake(0, 0)];
[dotTwoPath addLineToPoint:CGPointMake(0, HEIGHT)];
[dotTwoPath addQuadCurveToPoint:CGPointMake(0, 0) controlPoint:CGPointMake(_dotTwoX, _dotTwoY)];
[dotTwoPath closePath];
_dotTwoShapeLayer.path = dotTwoPath.CGPath;
}
- (void)calculatePath
{
// 由于手勢結(jié)束時(shí),dotOne和dotTwo執(zhí)行了一個(gè)UIView的彈簧動(dòng)畫,把這個(gè)過程的坐標(biāo)記錄下來,并相應(yīng)的畫出各自的shapeLayer形狀
CALayer *dotOnelayer = _dotOne.layer.presentationLayer;
_dotOneX = dotOnelayer.position.x;
_dotOneY = dotOnelayer.position.y;
CALayer *dotTwoLayer = _dotTwo.layer.presentationLayer;
_dotTwoX = dotTwoLayer.position.x;
_dotTwoY = dotTwoLayer.position.y;
[self updateShapeLayerPath];
}
@end
好了,今天就到這里,祝大家新年快樂??
