美文网首页
UIBezierPath动起来[UIBezierPath画图基础

UIBezierPath动起来[UIBezierPath画图基础

作者: 萧过 | 来源:发表于2016-08-03 16:37 被阅读0次

    1、效果图:

    函数代码:

    /**

    *  二次曲线动画

    */

    -(void)secondBeziePathDrawAnimation1

    {

    //曲线

    UIBezierPath *path=[UIBezierPath bezierPath];

    //起点

    [path moveToPoint:CGPointMake(20, 20)];

    //二次曲线

    [path addCurveToPoint:CGPointMake(self.frame.size.width-30, 20) controlPoint1:CGPointMake(self.frame.size.width/4., 0) controlPoint2:CGPointMake(120., 120)];

    CAShapeLayer *sLayer=[CAShapeLayer layer];

    sLayer.fillColor=[UIColor clearColor].CGColor;

    //画笔颜色

    sLayer.strokeColor=[UIColor redColor].CGColor;

    //画笔宽度

    sLayer.lineWidth=2.f;

    //路径

    sLayer.path=path.CGPath;

    sLayer.strokeStart=0.5;

    sLayer.strokeEnd=.5;

    [self.layer addSublayer:sLayer];

    //动画效果

    CABasicAnimation *slayerAnimat=[CABasicAnimation animationWithKeyPath:@"strokeStart"];

    slayerAnimat.duration=5;

    slayerAnimat.fromValue=[NSNumber numberWithFloat:0.5];

    slayerAnimat.toValue=[NSNumber numberWithFloat:0.];

    slayerAnimat.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    slayerAnimat.fillMode=kCAFillModeForwards;

    slayerAnimat.removedOnCompletion=NO;

    [sLayer addAnimation:slayerAnimat forKey:@"path"];

    //    //动画效果

    CABasicAnimation *slayerAnimat1=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    slayerAnimat1.duration=5;

    slayerAnimat1.fromValue=[NSNumber numberWithFloat:0.5];

    slayerAnimat1.toValue=[NSNumber numberWithFloat:1];

    slayerAnimat1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    slayerAnimat1.fillMode=kCAFillModeForwards;

    slayerAnimat1.removedOnCompletion=NO;

    [sLayer addAnimation:slayerAnimat1 forKey:@"path1"];

    }

    /**

    *  二次曲线线逐渐变粗动画

    */

    -(void)secondBeziePathLineWidthDrawAnimation

    {

    //曲线

    UIBezierPath *path=[UIBezierPath bezierPath];

    //起点

    [path moveToPoint:CGPointMake(20, 20)];

    //二次曲线

    [path addCurveToPoint:CGPointMake(self.frame.size.width-30, 20) controlPoint1:CGPointMake(self.frame.size.width/4., 0) controlPoint2:CGPointMake(120., 120)];

    CAShapeLayer *sLayer=[CAShapeLayer layer];

    sLayer.fillColor=[UIColor clearColor].CGColor;

    //画笔颜色

    sLayer.strokeColor=[UIColor redColor].CGColor;

    //画笔宽度

    sLayer.lineWidth=2.f;

    //路径

    sLayer.path=path.CGPath;

    sLayer.strokeStart=0.;

    sLayer.strokeEnd=1;

    [self.layer addSublayer:sLayer];

    //动画效果

    CABasicAnimation *slayerAnimat=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    slayerAnimat.duration=5;

    slayerAnimat.fromValue=[NSNumber numberWithFloat:0.];

    slayerAnimat.toValue=[NSNumber numberWithFloat:1.];

    slayerAnimat.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    slayerAnimat.fillMode=kCAFillModeForwards;

    slayerAnimat.removedOnCompletion=NO;

    [sLayer addAnimation:slayerAnimat forKey:@"path"];

    //    //动画效果

    CABasicAnimation *slayerAnimat1=[CABasicAnimation animationWithKeyPath:@"lineWidth"];

    slayerAnimat1.duration=5;

    slayerAnimat1.fromValue=[NSNumber numberWithFloat:0];

    slayerAnimat1.toValue=[NSNumber numberWithFloat:10];

    slayerAnimat1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    slayerAnimat1.fillMode=kCAFillModeForwards;

    slayerAnimat1.removedOnCompletion=NO;

    [sLayer addAnimation:slayerAnimat1 forKey:@"path1"];

    }

    以上教程的所有项目源代码;https://github.com/fb2012/IOS/tree/master/UIBezierPathStady

    相关文章

      网友评论

          本文标题:UIBezierPath动起来[UIBezierPath画图基础

          本文链接:https://www.haomeiwen.com/subject/pugqsttx.html