首页 > 代码库 > 沿着贝塞尔曲线做动画

沿着贝塞尔曲线做动画

沿着贝塞尔曲线做动画

效果图如下:

源码:

////  RootViewController.m////  Copyright (c) 2014年 Y.X. All rights reserved.//#import "RootViewController.h"#import "YXGCD.h"@interface RootViewController ()@property (nonatomic, strong) GCDTimer *timer;@end@implementation RootViewController- (void)viewDidLoad{    [super viewDidLoad];    CAShapeLayer *shapeLayer = [CAShapeLayer layer];    shapeLayer.path          = [self bezierPath].CGPath;        shapeLayer.fillColor     = [UIColor clearColor].CGColor;    shapeLayer.strokeColor   = [UIColor redColor].CGColor;    [self.view.layer addSublayer:shapeLayer];        CGFloat MAX = 0.7f;    CGFloat GAP = 0.1f;        _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];    [_timer event:^{                CABasicAnimation *aniStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];        aniStart.fromValue = [NSNumber numberWithFloat:0.f];        aniStart.toValue   = [NSNumber numberWithFloat:MAX];        aniStart.duration  = 10.f;                CABasicAnimation *aniEnd   = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];        aniEnd.fromValue   = [NSNumber numberWithFloat:0.f + GAP];        aniEnd.toValue     = [NSNumber numberWithFloat:MAX + GAP];        aniEnd.duration    = 10.f;                CAAnimationGroup *group = [CAAnimationGroup animation];        group.duration     = 10.f;        group.animations   = @[aniEnd, aniStart];                shapeLayer.strokeStart   = MAX;        shapeLayer.strokeEnd     = MAX + GAP;                [shapeLayer addAnimation:group forKey:nil];            } timeInterval:NSEC_PER_SEC*11];    [_timer start];}- (UIBezierPath *)bezierPath{    UIBezierPath* bezierPath = [UIBezierPath bezierPath];    [bezierPath moveToPoint: CGPointMake(0, 153)];    [bezierPath addCurveToPoint: CGPointMake(7.15, 68.33) controlPoint1: CGPointMake(0, 153) controlPoint2: CGPointMake(3.87, 81.7)];    [bezierPath addCurveToPoint: CGPointMake(25.04, 19.69) controlPoint1: CGPointMake(12.37, 47.12) controlPoint2: CGPointMake(18.32, 30.36)];    [bezierPath addCurveToPoint: CGPointMake(52.34, 11.11) controlPoint1: CGPointMake(33.25, 6.65) controlPoint2: CGPointMake(42.42, 3.15)];    [bezierPath addCurveToPoint: CGPointMake(66.37, 35.65) controlPoint1: CGPointMake(59.1, 16.55) controlPoint2: CGPointMake(63.57, 24.69)];    [bezierPath addCurveToPoint: CGPointMake(70.44, 68.48) controlPoint1: CGPointMake(68.59, 44.35) controlPoint2: CGPointMake(69.67, 53.94)];    [bezierPath addCurveToPoint: CGPointMake(70.82, 76.33) controlPoint1: CGPointMake(70.55, 70.64) controlPoint2: CGPointMake(70.62, 72.11)];    [bezierPath addCurveToPoint: CGPointMake(78.01, 120.77) controlPoint1: CGPointMake(72.01, 101.67) controlPoint2: CGPointMake(73.36, 111.89)];    [bezierPath addCurveToPoint: CGPointMake(113.44, 130.02) controlPoint1: CGPointMake(84.01, 132.24) controlPoint2: CGPointMake(94.99, 135.64)];    [bezierPath addCurveToPoint: CGPointMake(160.6, 80.19) controlPoint1: CGPointMake(136.37, 123.04) controlPoint2: CGPointMake(150.08, 106.8)];    [bezierPath addCurveToPoint: CGPointMake(165.62, 66.27) controlPoint1: CGPointMake(162.24, 76.04) controlPoint2: CGPointMake(163.77, 71.76)];    [bezierPath addCurveToPoint: CGPointMake(170.01, 53.2) controlPoint1: CGPointMake(165.71, 66) controlPoint2: CGPointMake(169.06, 55.92)];    [bezierPath addCurveToPoint: CGPointMake(183.09, 29.29) controlPoint1: CGPointMake(174.54, 40.1) controlPoint2: CGPointMake(178.09, 33.17)];    [bezierPath addCurveToPoint: CGPointMake(207.73, 32.08) controlPoint1: CGPointMake(189.16, 24.57) controlPoint2: CGPointMake(196.99, 25.3)];    [bezierPath addCurveToPoint: CGPointMake(231.82, 80.54) controlPoint1: CGPointMake(224.41, 42.62) controlPoint2: CGPointMake(230.78, 57.67)];    [bezierPath addCurveToPoint: CGPointMake(231.98, 95.87) controlPoint1: CGPointMake(232.01, 84.84) controlPoint2: CGPointMake(232.03, 88.32)];    [bezierPath addCurveToPoint: CGPointMake(235.32, 127.15) controlPoint1: CGPointMake(231.86, 113.33) controlPoint2: CGPointMake(232.39, 120.2)];    [bezierPath addCurveToPoint: CGPointMake(259.98, 142) controlPoint1: CGPointMake(239.09, 136.1) controlPoint2: CGPointMake(246.69, 141.02)];    [bezierPath addCurveToPoint: CGPointMake(285.24, 127.17) controlPoint1: CGPointMake(272.35, 142.91) controlPoint2: CGPointMake(280.44, 137.75)];    [bezierPath addCurveToPoint: CGPointMake(291.02, 90.5) controlPoint1: CGPointMake(289.16, 118.51) controlPoint2: CGPointMake(290.78, 106.84)];    [bezierPath addCurveToPoint: CGPointMake(290.96, 74.58) controlPoint1: CGPointMake(291.09, 86.01) controlPoint2: CGPointMake(291.07, 82.22)];    [bezierPath addCurveToPoint: CGPointMake(292.11, 46.27) controlPoint1: CGPointMake(290.74, 57.91) controlPoint2: CGPointMake(290.89, 51.9)];    [bezierPath addCurveToPoint: CGPointMake(303.56, 39.05) controlPoint1: CGPointMake(293.74, 38.8) controlPoint2: CGPointMake(297.35, 36.18)];    [bezierPath addCurveToPoint: CGPointMake(320.2, 88.6) controlPoint1: CGPointMake(315.78, 44.7) controlPoint2: CGPointMake(320.73, 62.49)];    [bezierPath addCurveToPoint: CGPointMake(320, 153) controlPoint1: CGPointMake(319.99, 99.31) controlPoint2: CGPointMake(320, 153)];    [bezierPath addLineToPoint: CGPointMake(0, 153)];    [bezierPath closePath];    return bezierPath;}@end

一个需要注意的地方,需要把时间都设置成一致哦:)