在iOS中绘制圆形笔划的圆形动画

Question

我正在尝试为在iOS 7中绘制的圆圈制作动画 - 这非常简单。

我的问题是我需要笔画有圆角。我现在尝试这样做的方法是在动画的开始位置添加另一个圆圈。

然后，对于正在移动的结束，我需要另一个循环来跟随。它正在做我想要的，但我需要使用easeInOutQuart时间，这比我想象的要困难。

到目前为止的结果是：

我的代码如下所示：

- (void) drawCircleAnimated {
    int radius = 100;

    CALayer *animationLayer = [CALayer layer];
    animationLayer.frame = CGRectMake(20.0f, 64.0f, CGRectGetWidth(self.view.layer.bounds) - 40.0f, CGRectGetHeight(self.view.layer.bounds) - 84.0f);

    [self.view.layer addSublayer:animationLayer];

    CGRect pathRect = CGRectInset(animationLayer.bounds, 100.0f, 100.0f);

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius];

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame = animationLayer.bounds;
    pathLayer.bounds = pathRect;
    pathLayer.geometryFlipped = NO;
    pathLayer.path = path.CGPath;
    pathLayer.strokeColor = [[UIColor blackColor] CGColor];
    pathLayer.fillColor = nil;
    pathLayer.lineWidth = 10.0f;
    pathLayer.lineJoin = kCALineJoinBevel;

    [animationLayer addSublayer:pathLayer];

    [self addStartPointCircle];
    CAShapeLayer* circleToMove = [self addStartPointCircle];
    circleToMove.anchorPoint = CGPointZero;

    [pathLayer addSublayer:circleToMove];

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

    CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    penAnimation.duration = 5.0;
    penAnimation.path = pathLayer.path;
    penAnimation.calculationMode = kCAAnimationPaced;
    penAnimation.delegate = self;
    penAnimation.removedOnCompletion = NO;
    [circleToMove addAnimation:penAnimation forKey:@"position"];
}

为了实现缓动功能，我已将其添加到penAnimation - 但它不会改变任何内容。我的客人会一直关注其他动画吗？

penAnimation.values = [NSArray arrayWithObjects:    // i.e., Rotation values for the 3 keyframes, in RADIANS
                        [NSNumber numberWithFloat:0.0 * M_PI],
                        [NSNumber numberWithFloat:0.75 * M_PI],
                        [NSNumber numberWithFloat:1.5 * M_PI], nil];
penAnimation.keyTimes = [NSArray arrayWithObjects:     // Relative timing values for the 3 keyframes
                          [NSNumber numberWithFloat:0],
                          [NSNumber numberWithFloat:.5],
                          [NSNumber numberWithFloat:1.0], nil];
penAnimation.timingFunctions = [NSArray arrayWithObjects:
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn], // from keyframe 1 to keyframe 2
                                 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], nil];  // from keyframe 2 to keyframe 3

Answer 1

这应该是您需要添加的全部内容。

pathLayer.lineCap = kCALineCapRound;