動畫特效十八：粘性動畫2

本人錄製技術視頻地址：https://edu.csdn.net/lecturer/1899 歡迎觀看。

注：本文內容是學習自 KittenYang  的《A GUIDE TO IOS ANIMATION》一書，如果大家感興趣的話，可以購買本書閱讀。但就個人而言，覺得作者的確思維清晰，但語言表達上面忽略了很多細節方面的說明，代碼書寫方面有許多需要優化及更正的地方。

上一節的動畫效果中介紹了 粘性動畫, 不過真的很複雜。這一節繼續爲大家介紹一個粘性動畫實現的效果，不過簡單了許多。所以我只會給出一些說明過程及關鍵代碼。 先看效果圖。

需求分析圖：

主要代碼：

- (void)drawInContext:(CGContextRef)ctx {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointZero];
    [path addLineToPoint:CGPointMake(self.frame.size.width - kExtraWidth, 0)];
    if (self.isNeedStickyEffcetion) {
        [path addQuadCurveToPoint:CGPointMake(self.frame.size.width - kExtraWidth, self.frame.size.height) controlPoint:CGPointMake(self.frame.size.width - kExtraWidth + self.factor, self.frame.size.height * 0.5)];
    } else {
        [path addLineToPoint:CGPointMake(self.frame.size.width - kExtraWidth, self.frame.size.height)];
    }
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path closePath];
    CGContextAddPath(ctx, path.CGPath);
    CGContextSetFillColorWithColor(ctx, [UIColor colorWithRed:0 green:0.722 blue:1 alpha:1].CGColor);
    CGContextDrawPath(ctx, kCGPathFill);
}

- (void)restoreSticky {
    // 這裏的factor就是二階貝塞爾曲線定位點的x值
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"factor"];
    CGFloat duration = 0.5;
    anim.duration  = duration;
    // 這裏要根據二階貝塞爾曲線公式計算得出曲線最右邊的點位點和最左邊的定位點的值
    anim.values = [self valuesWithSamplesArray:@[@(80), @(-40), @(0)] duration:duration];
    anim.fillMode = kCAFillModeForwards;
    anim.removedOnCompletion = NO;
    anim.delegate = self;
    [self addAnimation:anim forKey:@"sticky_animation"];
}

說明：

1. 代碼中的 kExtraWidth 就是分析圖中的兩條紅線之間的距離。

2. isNeedStickyEffection 這個bool變量就是用來判斷自定義的這個layer是否已經移動到了AF1F2D這個位置了，如果沒有的話，就直接繪製F1F2這條直線，否則的話，使用二階貝塞爾曲線繪製F1EF2這條曲線。

3. CAKeyframeAnimation這個關鍵幀動畫就是不停的改變factor這個值，然後不斷的繪製F1EF2這條曲線。

如果大家不怎麼明白的話，強力建議可以先看看我以前寫的兩篇博客:CALayer的needsDisplayForKey方法使用說明 和 粘性動畫。