ios - 逐步使用 CAShapeAnimation 使用 Taps iOS

Question

当我点击时，我想增加一个计数器来增加圆的弧度。

该线应该动画到下一个尺寸并保持在那里直到下一个增量（让我们说从水龙头 - 我已经在其他地方测量过），然后动画到下一个尺寸等。

见下面的例子

这是我到目前为止找到的一些代码......

_radius = 150;

CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*_radius, 2.0*_radius)
                                         cornerRadius:_radius].CGPath;
// Center the shape in self.view
circle.position = CGPointMake(CGRectGetMidX(self.target.frame)-_radius,
                              CGRectGetMidY(self.target.frame)-_radius);

// Configure the appearence of the circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;
circle.lineWidth = 5;

// Add to parent layer
[self.view.layer addSublayer:circle];...

// Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 0.3; // "animate over 10 seconds or so.."
drawAnimation.repeatCount         = 1.0;  // Animate only once..
drawAnimation.removedOnCompletion = NO;   // Remain stroked after the animation..

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
//drawAnimation.toValue   = [NSNumber numberWithFloat:0.0f];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

// Add the animation to the circle

[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

Answer 1

动画绘图值

我在 CoreGraphics 中做过类似的动画，所以如果你不能为你工作，你可能想看看它作为替代方案CAShapeAnimation。我这里有一个进度视图，它有这种动画，除了线性方式。

- (void)setProgress:(CGFloat)progress {
    self.progressToAnimateTo = progress;
    if (self.animationTimer) {
        [self.animationTimer invalidate];
    }
    self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:0.008 target:self selector:@selector(incrementAnimatingProgress) userInfo:nil repeats:YES];
}

- (void)incrementAnimatingProgress {
    if (_progress >= self.progressToAnimateTo-0.01 && _progress <= self.progressToAnimateTo+0.01) {
        _progress = self.progressToAnimateTo;
        [self.animationTimer invalidate];
        [self setNeedsDisplay];
    } else {
        _progress = (_progress < self.progressToAnimateTo) ? _progress + 0.01 : _progress - 0.01;
        [self setNeedsDisplay];
    }
}

这种使用另一个属性的技术，例如在重绘之前progressToAnimateTo增加progress值，也可以用来重绘圆的进度。

资源

我还可以补充一点，您在这里所做的事情还有其他实现。MBProgressHUD和EVCircularProgressView有这种效果。