在 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;