如何在iPhone中绘制动画线条

时间:2011-10-24 14:25:48

标签: iphone drawing cgcontext

我正在使用CGContextRef在iphone中绘制线条。任何人都可以建议我如何在iphone中绘制动画线。

请建议。

3 个答案:

答案 0 :(得分:14)

以下是答案(见http://soulwithmobiletechnology.blogspot.fr/2012/07/how-to-animate-line-draw.html

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50.0,0.0)];
[path addLineToPoint:CGPointMake(120.0, 600.0)];

CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.view.bounds;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = [[UIColor redColor] CGColor];
pathLayer.fillColor = nil;
pathLayer.lineWidth = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;

[self.view.layer addSublayer:pathLayer];

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 2.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

不要忘记#import <QuartzCore/QuartzCore.h>

答案 1 :(得分:2)

是直线吗?..您可以使用1像素宽的UIView并为其框架属性设置动画。使用[UIView beginAnimations][UIView commitAnimations];,否则see this post

已编辑的回复

使用核心动画,你可以做这样的事情(例如在按钮后面)

CABasicAnimation *theAnimation = [self pathAnimation];
theAnimation.duration=3.0;  
theAnimation.autoreverses=YES;
[[self layer] addAnimation:theAnimation forKey:@"animatePath"];

路径动画定义为:

- (CAAnimation*)pathAnimation;
{

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path,NULL,50.0,120.0);

    CGPathAddCurveToPoint(path,NULL,50.0,275.0,
                          150.0,275.0,
                          150.0,120.0);
    CGPathAddCurveToPoint(path,NULL,150.0,275.0,
                          250.0,275.0,
                          250.0,120.0);    
    CGPathAddCurveToPoint(path,NULL,250.0,275.0,
                          350.0,275.0,
                          350.0,120.0);    
    CGPathAddCurveToPoint(path,NULL,350.0,275.0,
                          450.0,275.0,
                          450.0,120.0);

    CAKeyframeAnimation *
        animation = [CAKeyframeAnimation 
                     animationWithKeyPath:@"position"];

    [animation setPath:path];
    [animation setDuration:3.0];

    [animation setAutoreverses:YES];

    CFRelease(path);

    return animation;

}

这只是指向使用Core Animation可以执行的操作的指针。有关详细信息,请参阅this article

答案 2 :(得分:2)

Martin的答案的Swift 3版本(使用Xcode 8.3.3检查)

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 50, y: 0))
    path.addLine(to: CGPoint(x: 120, y: 600))

    let pathLayer = CAShapeLayer()
    pathLayer.frame = view.bounds
    pathLayer.path = path.cgPath
    pathLayer.strokeColor = UIColor.red.cgColor
    pathLayer.fillColor = nil
    pathLayer.lineWidth = 2
    pathLayer.lineJoin = kCALineJoinBevel
    view.layer.addSublayer(pathLayer)

    let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
    pathAnimation.duration = 2.0
    pathAnimation.fromValue = 0
    pathAnimation.toValue = 1
    pathLayer.add(pathAnimation, forKey: "strokeEnd")