1. 程式人生 > >折線動畫、漸變色

折線動畫、漸變色

//新增座標的座標點

UIBezierPath * pathtemp=[[UIBezierPathalloc] init];

    [pathtemp moveToPoint:CGPointMake(10, 100)];

    [pathtemp addLineToPoint:CGPointMake(50, 90)];

    [pathtemp addLineToPoint:CGPointMake(100, 50)];

    [pathtemp addLineToPoint:CGPointMake(150, 80)];

    [pathtemp addLineToPoint:CGPointMake(200, 70)];

    [pathtemp

addLineToPoint:CGPointMake(250, 60)];

    [pathtemp addLineToPoint:CGPointMake(300, 50)];

    [pathtemp addLineToPoint:CGPointMake(350, 100)];

//把折線繪製到介面

CAShapeLayer *arctemp = [CAShapeLayerlayer];

    arctemp.path =pathtemp.CGPath//path->CGPath;

    arctemp.strokeColor = [UIColor purpleColor].CGColor;

    arctemp.lineWidth

= 8;

    [self.view.layer addSublayer:arctemp];

//繪製線條的動畫

CABasicAnimation *drawAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

    drawAnimation.duration= 5.0;

    drawAnimation.repeatCount = 1.0;

    drawAnimation.removedOnCompletion = NO;

    drawAnimation.fromValue = [NSNumber numberWithFloat

:0.0f];

    drawAnimation.toValue   = [NSNumber numberWithFloat:10.0f];

    drawAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];

    [arctemp addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

//===================================================================================================================

//繪製漸變色層

CAGradientLayer *gradientLayer = [CAGradientLayerlayer];

    gradientLayer.frame =CGRectMake(0, 0, 500, 400) ;// self.view.frame;

    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:249.0/255.0 green:127.0/255.0 blue:127.0/255.0 alpha:1].CGColor ,

                             (__bridge id)[UIColor colorWithRed:250.0/255.0 green:150.0/255.0 blue:150.0/255.0 alpha:1].CGColor,

                             (__bridge id)[UIColor yellowColor].CGColor];

    gradientLayer.locations=@[@0.0,@0.2,@1.0];

    gradientLayer.startPoint = CGPointMake(0.5,0.5);

    gradientLayer.endPoint = CGPointMake(0.5,1);

    [self.view.layer addSublayer:gradientLayer];//加上漸變層

//============第一種方式新增路徑->這個是繪製漸變需要的

UIBezierPath * path=[[UIBezierPathalloc] init];

    [path moveToPoint:CGPointMake(10, 100)];

    [path addLineToPoint:CGPointMake(10, 300)];

    [path addLineToPoint:CGPointMake(350, 300)];

    [path addLineToPoint:CGPointMake(350, 100)];

    [path addLineToPoint:CGPointMake(300, 50)];

    [path addLineToPoint:CGPointMake(250, 60)];

    [path addLineToPoint:CGPointMake(200, 70)];

    [path addLineToPoint:CGPointMake(150, 80)];

    [path addLineToPoint:CGPointMake(100, 50)];

    [path addLineToPoint:CGPointMake(50, 90)];

    [path closePath];

//============第二種方式新增路徑

//  UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];

//============第三種方式新增path路徑

//CGMutablePathRef path = CGPathCreateMutable();

    //

//CGPathAddRect(path, nil, CGRectInset(self.view.bounds, 20, 120));

CAShapeLayer *arc = [CAShapeLayerlayer];

    arc.path =path.CGPath;

    arc.fillColor = [UIColor yellowColor].CGColor;

    arc.strokeColor = [UIColoryellowColor].CGColor;

    arc.lineWidth = 1;

    gradientLayer.mask=arc;//用折現裁剪gradientLayer