以可变速率为自定义 CAShapeLayer 设置动画
Animating a custom CAShapeLayer at a variable rate
我有一系列弧线,都是用这样的代码创建的,并用 CABasicAnimation @"strokeEnd".
制作动画
if (!_fourthShapeLayer) {
_fourthPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
radius:rect.size.width / 2 - 9.5
startAngle:startAngle
endAngle:startAngle - (endAngle - startAngle)
clockwise:YES];
_fourthShapeLayer = [CAShapeLayer layer];
_fourthShapeLayer.path = _fourthPath.CGPath;
_fourthShapeLayer.fillColor = [UIColor clearColor].CGColor;
_fourthShapeLayer.strokeColor = [UIColor colorWithHue:.33888889 saturation:.62 brightness:0.62 alpha:1.0].CGColor;
_fourthShapeLayer.lineWidth = 3.0;
_fourthShapeLayer.rasterizationScale = 2.0 * [UIScreen mainScreen].scale;
_fourthShapeLayer.shouldRasterize = YES;
}
CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
strokeAnimation.toValue = [NSNumber numberWithFloat:1.0];
strokeAnimation.duration = 1.0;
strokeAnimation.speed = 1.0;
[_fourthShapeLayer addAnimation:strokeAnimation forKey:@"stroke"];
[self.layer addSublayer:_fourthShapeLayer];
不同的是颜色,以及定义路径时的半径。
我想改变弧线动画的速率以执行以下操作:所有弧线同时开始和结束,但速率不同。基本上,有些弧开始快,结束慢,其他弧开始慢,结束快 - 都以不同的速率。
如果我能像这样定义绘制的弧度就好了:pow((elapsedAnimationTime / totalAnimationTime), 1.05) - 改变 'power' (1.05, 1.02, .97, .91 for例如,不同的弧线)。
有人有什么建议吗?本来我设置了一个定时器,每百分之一秒调用drawRect:,根据上面提到的'power'函数定义路径终点——当然这个操作成本太高了。
感谢帮助!
您可以使用自定义 timingFunction
,例如:
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5:0:0.9:0.7];
更多相关信息:Animations Explained
我有一系列弧线,都是用这样的代码创建的,并用 CABasicAnimation @"strokeEnd".
制作动画 if (!_fourthShapeLayer) {
_fourthPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
radius:rect.size.width / 2 - 9.5
startAngle:startAngle
endAngle:startAngle - (endAngle - startAngle)
clockwise:YES];
_fourthShapeLayer = [CAShapeLayer layer];
_fourthShapeLayer.path = _fourthPath.CGPath;
_fourthShapeLayer.fillColor = [UIColor clearColor].CGColor;
_fourthShapeLayer.strokeColor = [UIColor colorWithHue:.33888889 saturation:.62 brightness:0.62 alpha:1.0].CGColor;
_fourthShapeLayer.lineWidth = 3.0;
_fourthShapeLayer.rasterizationScale = 2.0 * [UIScreen mainScreen].scale;
_fourthShapeLayer.shouldRasterize = YES;
}
CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
strokeAnimation.toValue = [NSNumber numberWithFloat:1.0];
strokeAnimation.duration = 1.0;
strokeAnimation.speed = 1.0;
[_fourthShapeLayer addAnimation:strokeAnimation forKey:@"stroke"];
[self.layer addSublayer:_fourthShapeLayer];
不同的是颜色,以及定义路径时的半径。
我想改变弧线动画的速率以执行以下操作:所有弧线同时开始和结束,但速率不同。基本上,有些弧开始快,结束慢,其他弧开始慢,结束快 - 都以不同的速率。
如果我能像这样定义绘制的弧度就好了:pow((elapsedAnimationTime / totalAnimationTime), 1.05) - 改变 'power' (1.05, 1.02, .97, .91 for例如,不同的弧线)。
有人有什么建议吗?本来我设置了一个定时器,每百分之一秒调用drawRect:,根据上面提到的'power'函数定义路径终点——当然这个操作成本太高了。
感谢帮助!
您可以使用自定义 timingFunction
,例如:
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5:0:0.9:0.7];
更多相关信息:Animations Explained