效果
Simulator Screen Shot 2016年2月17日 下午1.33.59.png
實現思路
藍色部分圖形是一個CAShapeLayer,他的形狀由UIBezierPath的路徑組成的。
這個路徑是由r1,r2,r3,r4,r5這5個紅點確定的。其中r1,r2,r3,r4都是不動點，唯一可以動的是r5點。
根據上面的動態圖可以看出,CAShapeLayer的形狀是隨著r5紅點的移動而相應變化的，所以只要獲得r5的坐標變化就可以用UIBezierPath做出相應的路徑，然后就可以形成相應的形狀。
1159720-d330996503486904.jpg
代碼
-
初始化CAShapeLayer
-(void)configShapeLayer
{
//可變的shapeLayer
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.fillColor = [UIColor colorWithRed:0.22 green:0.54 blue:0.73 alpha:1].CGColor;
[self.layer addSublayer:_shapeLayer];
//底部的圓形shapeLayer 開始時候是被遮擋住的
_circleLayer = [CAShapeLayer layer];
_circleLayer.fillColor = [UIColor whiteColor].CGColor;
[self.layer addSublayer:_circleLayer];
//頂部的圓形shapeLayer 用于遮擋底部
_moveCircleLayer = [CAShapeLayer layer];
_moveCircleLayer.fillColor = [UIColor colorWithRed:0.22 green:0.54 blue:0.73 alpha:1].CGColor;
[self.layer addSublayer:_moveCircleLayer];
//提示語
_promptLabel = [[UILabel alloc] init];
_promptLabel.text = @"松開進入頭條";
_promptLabel.frame = CGRectMake(0, MIN_HEIGHT/2+20, kWidth, 30);
_promptLabel.textAlignment = NSTextAlignmentCenter;
_promptLabel.font = [UIFont systemFontOfSize:14];
_promptLabel.textColor = [UIColor whiteColor];
_promptLabel.alpha = 0;
[self addSubview:_promptLabel];
}
-
初始化r5點
-(void)configCurveView
{
//可變化的點
_curveX = kWidth/2.0;
_curveY = MIN_HEIGHT;
_curveView = [[UIView alloc] initWithFrame:CGRectMake(_curveX, _curveY, 0, 0)];
[self addSubview:_curveView];
}
-
添加手勢 & 計時器(CADisplayLink)
-(void)configAction
{
_mHeight = 100; //手勢移動時相對高度
_isAnimating = NO; //是否處于動效狀態
_circleY = 0;
//添加手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(movePanAction:)];
self.userInteractionEnabled = YES;
[self addGestureRecognizer:pan];
//CADisplayLink默認每秒運行60次 calculatePath計算出運行期間_curveView的坐標 ,從而確定_shaperLayer的形狀
//類似于NsTimer 簡介 http://www.lxweimin.com/p/72fedadf92e3
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
[_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
_displayLink.paused = YES;
}
-
手勢解析
- 手勢移動時,r5點跟著手勢移動,_shapeLayer根據r5的坐標來擴大自己的區域
- 手勢結束時, r5通過UIView的動畫方法來改變r5的坐標,同時_shapeLayer根據r5的坐標 縮小自己的區域 并最終返回原型
-(void)movePanAction:(UIPanGestureRecognizer *)pan
{
if (!_isAnimating) {
if (pan.state == UIGestureRecognizerStateChanged) {
//手勢移動時 _shapeLayer 跟著手勢向下擴大區域
CGPoint point = [pan translationInView:self];//在指定的坐標系下移動
//這部分代碼使 可以移動的點 隨著手勢走
_mHeight = point.y + MIN_HEIGHT;
_curveX = kWidth / 2.0 + point.x;
_curveY = _mHeight > MIN_HEIGHT ? _mHeight : MIN_HEIGHT;
_curveView.frame = CGRectMake(_curveX, _curveY, _curveView.frame.size.width, _curveView.frame.size.height);
//設置圓弧的顯示
if (_mHeight >= MIN_HEIGHT && _mHeight < 1.5 * MIN_HEIGHT) {
_circleY = (float)point.y * 2 / MIN_HEIGHT * 40;
_promptLabel.alpha = (float)point.y * 2 / MIN_HEIGHT;
}
else if (_mHeight >= 1.5 * MIN_HEIGHT)
{
_circleY = 40;
_promptLabel.alpha = 1.0;
}
//根據r5 的坐標,更新_shapeLayer形狀
[self updateShaperLayerPath];
}
else if (pan.state == UIGestureRecognizerStateCancelled || pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed){
//手勢結束時,_shaperLayer 返回原狀并產生彈簧動效
_isAnimating = YES;
_displayLink.paused = NO; //開啟displayLink ,會執行方法calculatePath
//彈簧動效
[UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
//曲線點(r5點)是一個view ,所以在block中有彈簧的效果.然后根據她的動態路徑,在calculatepath 中計算彈性圖形的形狀
_curveView.frame = CGRectMake(kWidth/2.0, MIN_HEIGHT, 3, 3);
_circleY = 0;
_promptLabel.alpha = 0;
} completion:^(BOOL finished) {
if (finished) {
_displayLink.paused = YES;
_isAnimating = NO;
}
}];
}
}
}
-
根據r5的位置,更新_shapeLayer的形狀
-(void)updateShaperLayerPath
{
UIBezierPath *tPath = [UIBezierPath bezierPath];
//5個點
//r1點
[tPath moveToPoint:CGPointMake(0, 0)];
//r2點
[tPath addLineToPoint:CGPointMake(kWidth, 0)];
//r4點
[tPath addLineToPoint:CGPointMake(kWidth, MIN_HEIGHT)];
[tPath addQuadCurveToPoint:CGPointMake(0, MIN_HEIGHT) controlPoint:CGPointMake(_curveX, _curveY)];
[tPath closePath];
_shapeLayer.path = tPath.CGPath;
//月牙視圖的下層圖 開始被覆蓋掉
UIBezierPath *pPath = [UIBezierPath bezierPath];
//center 圓弧的圓心 radius 半徑 startAngle 其實的弧度 endAngle 結束的弧度 clockwise 順時針 逆時針
[pPath addArcWithCenter:CGPointMake(kWidth/2, MIN_HEIGHT/2) radius:10 + _circleY / 4 startAngle:0 endAngle:100 clockwise:1];
_circleLayer.path = pPath.CGPath;
//
//月牙視圖的上層圖 用來覆蓋白色的月牙 隨著手勢下滑 逐漸移開 ,呈現出月牙形狀
UIBezierPath * mPath = [UIBezierPath bezierPath];
[mPath addArcWithCenter:CGPointMake(kWidth / 2, MIN_HEIGHT / 2 + _circleY) radius:10 + _circleY / 4 startAngle:0 endAngle:100 clockwise:1];
_moveCircleLayer.path = mPath.CGPath;
}
-
計算彈簧的效果坐標
- (void)calculatePath
{
// 由于手勢結束時,r5執行了一個UIView的彈簧動畫,把這個過程的坐標記錄下來,并相應的畫出_shapeLayer形狀
CALayer *layer = _curveView.layer.presentationLayer;
_curveX = layer.position.x;
_curveY = layer.position.y;
[self updateShaperLayerPath];
}
