Quart2D를 사용하여 경로를 애니메이션 처리하는 과정

Question

Quartz2D를 처음 사용하고 작게 시작하려면 선을 그려야하지만 그 선을 처음부터 끝까지 애니메이션화해야합니다. 내가 읽은 블로그와 비슷한 질문을 보니 레이어 경로를 설정하고 해당 레이어에 애니메이션을 적용해야합니다. 나를 위해 문제는, 비록 레이어가 경로 속성을 가지고 있지만, 나는 그것에 대한 경로를 올바르게 설정하는 방법에 대해 확신 할 수 없다.

UIView가 표시되어 있으며 애니메이션 코드를 주석 처리하면 선이 잘 표시됩니다.

CGContextRef context = UIGraphicsGetCurrentContext(); 

CGContextSetLineWidth(context, 2.0); 

CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB(); 

CGFloat components[] = {0.0, 0.0, 1.0, 1.0}; 

CGColorRef color = CGColorCreate(colorspace, components); 

CGContextSetStrokeColorWithColor(context, color); 

CGContextMoveToPoint(context, 0, 0); 
CGContextAddLineToPoint(context, 300, 400); 

CGContextStrokePath(context); 
CGColorSpaceRelease(colorspace); 
CGColorRelease(color); 

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
//[aLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 

처음부터 끝까지 애니메이션을 적용하려면 어떻게해야합니까? 여기

Answer 1

내가 그리는 선을 애니메이션을 사용했습니다 무엇 물론 석영을 가져올 수 있는지 확인하십시오

//Create the bezier path that will hold all the points of data 
UIBezierPath* bezierPath = [UIBezierPath bezierPath]; 
[[UIColor greenColor] setFill]; 
[bezierPath fill]; 
[[UIColor redColor] setStroke]; 
[bezierPath stroke]; 

for (int i = 10 ; i < 20; i++) { 
    //If its the first point we need to make sure and move to that point not add to it 
    if (i == 10) 
     [bezierPath moveToPoint: CGPointMake(10, 10)]; 
    else 
     [bezierPath addLineToPoint: CGPointMake(i * 2, i * 3)]; 
} 


CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
shapeLayer.strokeColor = [[UIColor blueColor] CGColor]; 
shapeLayer.fillColor = nil; 
shapeLayer.lineWidth = 10.0f; 
shapeLayer.lineJoin = kCALineJoinRound; 
shapeLayer.path = bezierPath.CGPath; 

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = @(0.0f); 
pathAnimation.toValue = @(1.0f); 

[shapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"]; 

[self.view.layer addSublayer:shapeLayer];