貝塞爾曲線動畫demo(仿美人相機效果)
效果如圖:
仿美人相機,手勢滑動隱藏頂部view。為了方便講解,將螢幕分為幾個區域,如圖:
在拖動過程中:
1、拖動距離小於minMoveDistance,貝賽爾曲線發生形變
2、拖動大於minMoveDistance,整個view開始下移
在鬆開手時:
1、拖動距離小於minMoveDistance,未發生位移,貝塞爾曲線恢復形變
2、拖動大於minMoveDistance,小於minDisappearDistance,貝塞爾曲線恢復形變、位移回到初始位置。
3、拖動大於minDisappearDistance,向下移動隱藏view
一、根據y軸位移量確定貝塞爾路徑
在拖動時曲線形變、鬆手時曲線恢復形變的時候都需要改變貝塞爾曲線,實際上是改變二階貝塞爾曲線的控制點,因此寫一個方法,根據傳入的y軸位移量得到新的貝塞爾路徑:
- (CGPathRef)getPathWithMoveDistance:(CGFloat)distance{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = CGPointMake(0, 0);
CGPoint controlPoint = CGPointMake(self.bounds.size.width*0.5, 60 +distance);
CGPoint endPoint = CGPointMake(self.bounds.size.width, 0);
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
[path addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];
[path addLineToPoint:CGPointMake(0 , self.bounds.size.height)];
return path.CGPath;
}
二、初始化圖形
初始化的時候,可以根據上一步的方法,傳入位移量0,獲取貝塞爾路徑,並將獲得的路徑賦給CAShapeLayer:
- (id)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.originY = frame.origin.y;
[self setUpLayer];
[self addGesure];
}
return self;
}
- (void)setUpLayer{
self.topLineLayer = [CAShapeLayer layer];
self.topLineLayer.fillColor = ColorForTheme.CGColor;
self.topLineLayer.strokeColor = ColorForTheme.CGColor;
self.topLineLayer.path = [self getPathWithMoveDistance:0];
[self.layer addSublayer:self.topLineLayer];
}
三、新增手勢
新增UIPanGestureRecognizer拖動手勢,並處理手勢拖動和結束拖動的事件。
拖動時:
1、拖動距離小於minMoveDistance,只有貝賽爾曲線發生形變,呼叫步奏一中的方法。
2、拖動距離大於minMoveDistance,整個view開始下移
結束拖動時:
呼叫revertFormY:方法,傳入當前在y軸上已經發生的位移量
- (void)addGesure{
if (self.gesture == nil) {
self.gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
}
[self addGestureRecognizer:self.gesture];
}
- (void)handlePan:(UIPanGestureRecognizer *)gesture{
CGFloat distanceX = [gesture translationInView:self].x;
CGFloat distanceY = [gesture translationInView:self].y;
if (ABS(distanceX) > ABS(distanceY)) {
return;
}
//拖動過程
if (gesture.state == UIGestureRecognizerStateChanged) {
NSLog(@"%f",distanceY);
//移動少於minMoveDistance,貝賽爾曲線形變
if (distanceY > 0 && distanceY <= minMoveDistance) {
self.topLineLayer.path = [self getPathWithMoveDistance:distanceY];
}
//移動大於minMoveDistance,整個view下移
else if (distanceY > minMoveDistance) {
self.frame = CGRectMake(0, self.originY+distanceY-minMoveDistance, self.bounds.size.width, self.bounds.size.height);
}
}
//手勢結束
if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateCancelled || gesture.state == UIGestureRecognizerStateFailed) {
[self removeGestureRecognizer:self.gesture];
[self revertFormY:distanceY];
}
}
四、revertFormY:恢復形變方法
根據傳入的y軸上的位移量,實現不同的效果:
1、y小於minMoveDistance,未發生位移,貝塞爾曲線恢復形變
2、y大於minMoveDistance,小於minDisappearDistance,貝塞爾曲線恢復形變、位移回到初始位置。
3、y大於minDisappearDistance,向下移動隱藏view
//手勢結束後恢復或隱藏
-(void)revertFormY:(CGFloat)y{
//y < 最小的隱藏位移距離,未發生位移,貝塞爾曲線恢復動畫
if (y < minDisappearDistance) {
CAKeyframeAnimation *vibrate = [CAKeyframeAnimation animationWithKeyPath:@"path"];
vibrate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
vibrate.values = @[
(id) [self getPathWithMoveDistance:y],
(id) [self getPathWithMoveDistance:-(y * 0.3)],
(id) [self getPathWithMoveDistance:(y * 0.2)],
(id) [self getPathWithMoveDistance:-(y * 0.15)],
(id) [self getPathWithMoveDistance:(y * 0.1)],
(id) [self getPathWithMoveDistance:-(y * 0.07)],
(id) [self getPathWithMoveDistance:(y * 0.05)],
(id) [self getPathWithMoveDistance:0.0]
];
vibrate.duration = 0.5;
vibrate.removedOnCompletion = NO;
vibrate.fillMode = kCAFillModeForwards;
vibrate.delegate = self;
[self.topLineLayer addAnimation:vibrate forKey:nil];
}
//y > 最小位移距離,發生了位移
if(y > minMoveDistance){
[UIView animateWithDuration:0.3 animations:^{
CGFloat endY;
//向上恢復view
if (y < minDisappearDistance) {
endY = self.originY;
}
//向下隱藏view
else{
endY = SCREEN_HEIGHT;
}
self.frame = CGRectMake(0, endY, SCREEN_WIDTH, self.frame.size.height);
}];
}
}
五、雙擊螢幕空白,消失的view從底部上移,恢復到初始位置
這個只是為了回到初始狀態,根據實際需求實現。
//恢復到初始位置
- (void)comeBack{
if (self.frame.origin.y <= self.originY) {
return;
}
[UIView animateWithDuration:0.3 animations:^{
self.frame = CGRectMake(0, self.originY, SCREEN_WIDTH, self.frame.size.height);
} completion:^(BOOL finished) {
[self revertFormY:10];
}];
}