效果

Simulator Screen Shot 2016年2月17日 下午1.33.59.png

實現(xiàn)思路

藍色部分圖形是一個CAShapeLayer,他的形狀由UIBezierPath的路徑組成的。

這個路徑是由r1,r2,r3,r4,r5這5個紅點確定的。其中r1,r2,r3,r4都是不動點，唯一可以動的是r5點。

根據(jù)上面的動態(tài)圖可以看出,CAShapeLayer的形狀是隨著r5紅點的移動而相應(yīng)變化的，所以只要獲得r5的坐標變化就可以用UIBezierPath做出相應(yīng)的路徑，然后就可以形成相應(yīng)的形狀。

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;       //是否處于動效狀態(tài)
    _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.itdecent.cn/p/72fedadf92e3
    _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(calculatePath)];
    [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
    _displayLink.paused = YES;
    
}

• 手勢解析

  • 手勢移動時,r5點跟著手勢移動,_shapeLayer根據(jù)r5的坐標來擴大自己的區(qū)域
  • 手勢結(jié)束時, r5通過UIView的動畫方法來改變r5的坐標,同時_shapeLayer根據(jù)r5的坐標 縮小自己的區(qū)域 并最終返回原型

-(void)movePanAction:(UIPanGestureRecognizer *)pan
{
    if (!_isAnimating) {
        
        if (pan.state == UIGestureRecognizerStateChanged) {
            //手勢移動時 _shapeLayer 跟著手勢向下擴大區(qū)域
            
            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);
            
            //設(shè)置圓弧的顯示
            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;
            }
            //根據(jù)r5 的坐標,更新_shapeLayer形狀
            [self updateShaperLayerPath];
        }
        else if (pan.state == UIGestureRecognizerStateCancelled || pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateFailed){
            
            //手勢結(jié)束時,_shaperLayer 返回原狀并產(chǎn)生彈簧動效
            _isAnimating = YES;
            _displayLink.paused = NO; //開啟displayLink ,會執(zhí)行方法calculatePath
            //彈簧動效
            [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                //曲線點(r5點)是一個view ,所以在block中有彈簧的效果.然后根據(jù)她的動態(tài)路徑,在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;
                }
            }];
            
        }
        
    }
}

• 根據(jù)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 結(jié)束的弧度 clockwise 順時針 逆時針
    [pPath addArcWithCenter:CGPointMake(kWidth/2, MIN_HEIGHT/2) radius:10 + _circleY / 4 startAngle:0 endAngle:100 clockwise:1];
    
    _circleLayer.path = pPath.CGPath;
    
    //
    
    //月牙視圖的上層圖  用來覆蓋白色的月牙 隨著手勢下滑 逐漸移開 ,呈現(xiàn)出月牙形狀
    
    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
{
    // 由于手勢結(jié)束時,r5執(zhí)行了一個UIView的彈簧動畫,把這個過程的坐標記錄下來,并相應(yīng)的畫出_shapeLayer形狀
    CALayer *layer = _curveView.layer.presentationLayer;
    _curveX = layer.position.x;
    _curveY = layer.position.y;
    
    [self updateShaperLayerPath];
}