iOS實現貝塞爾曲線動畫

Posted on by

本文實例為大傢分享瞭iOS實現貝塞爾曲線動畫的具體代碼，供大傢參考，具體內容如下

效果如圖：

仿美人相機，手勢滑動隱藏頂部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];
    }];
}

完整代碼

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：