动画绘制值

Question

当我点击时，我想要一个增量计数器来增加圆弧的大小。

该线应该设置为下一个大小的动画并保持不变直到下一个增量（从一个水龙头 - 我已经在别处测量），然后动画到下一个大小等。

见下面的例子

example http://oi43.tinypic.com/33m24io.jpg

以下是我迄今为止发现的一些代码......

_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为你工作，你可能想看一下它。我有一个进展视图here，除了线性方式外，还有这种动画。

- (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会产生这种效果。

逐步使用CAShapeAnimation使用Tap

1 个答案:

动画绘制值

资源