圆段笔画动画以完整笔画结束
Posted
技术标签:
【中文标题】圆段笔画动画以完整笔画结束【英文标题】:Animation of stroke of circle segment ends in complete stroke 【发布时间】:2012-02-04 17:37:54 【问题描述】:我正在尝试为圆的一部分设置动画效果。为了存档这个,我使用了 CABasicAnimations,它运行良好。
动画从顶部开始,安静地移动到整个圆圈的三分之一处。但是当动画结束时,圆圈会立即被完全绘制出来。
如何防止这种情况发生?
这是我的自定义 UIView 的源代码:
- (void)drawRect:(CGRect)rect
int radius = 100;
int strokeWidth = 10;
CGColorRef color = [UIColor redColor].CGColor;
int timeInSeconds = 5;
CGFloat startAngle = 0;
CGFloat endAngle = 0.33;
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
circle.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius);
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = color;
circle.lineWidth = strokeWidth;
[self.layer addSublayer:circle];
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration = timeInSeconds;
drawAnimation.repeatCount = 1.0;
drawAnimation.removedOnCompletion = NO;
drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
drawAnimation.toValue = [NSNumber numberWithFloat:endAngle];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
【问题讨论】:
【参考方案1】:当您将动画应用到图层时,Core Animation 会创建图层的副本并为副本的属性设置动画。原始层称为模型层,副本称为表示层。动画永远不会改变模型层的属性。
您尝试通过将removedOnCompletion
设置为NO
来解决此问题。您还必须设置动画的 fillMode
才能使其正常工作,但这并不是为属性设置动画的真正正确方法。
正确的方法是更改模型层的属性,然后应用动画。
// Change the model layer's property first.
circle.strokeEnd = endAngle;
// Then apply the animation.
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration = timeInSeconds;
drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
drawAnimation.toValue = [NSNumber numberWithFloat:endAngle];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
这在WWDC 2011 的Core Animation Essentials video 中有解释。强烈推荐观看。
【讨论】:
知道drawAnimation.duration
期间的进度%(0到1)吗?以上是关于圆段笔画动画以完整笔画结束的主要内容,如果未能解决你的问题,请参考以下文章