我目前正在尝试创建一个看起来像这样的忙碌动画:
循环的中断部分不断地绕着圆圈旋转,表示正在进行操作。
我正在使用 CAShapeLayer 定义两个圆圈,一个圆圈使用 strokeEnd“填充”圆圈,另一个使用 strokeStart“清除”圆圈。 “清理圈”从“填充圈”前面的 1/10 处开始:
NSInteger radius = self.frame.size.width / 2;
CGFloat lineWidth = radius / 7.5;
UIColor *color = [UIColor redColor];
//add the outer circle
_outerCircle1 = [CAShapeLayer layer];
_outerCircle1.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
_outerCircle1.position = CGPointMake(0, 0);
_outerCircle1.strokeStart = 1;
_outerCircle1.fillColor = [UIColor clearColor].CGColor;
_outerCircle1.strokeColor = color.CGColor;
_outerCircle1.lineWidth = lineWidth;
[self.layer addSublayer:_outerCircle1];
_outerCircle2 = [CAShapeLayer layer];
_outerCircle2.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
_outerCircle2.position = CGPointMake(0, 0);
_outerCircle2.strokeEnd = 0;
_outerCircle2.fillColor = [UIColor clearColor].CGColor;
_outerCircle2.strokeColor = color.CGColor;
_outerCircle2.lineWidth = lineWidth;
[self.layer addSublayer:_outerCircle2];
[self createAnimations];
这是我定义动画的地方。当“清除圆圈”绕着圆圈一直走时,我必须开始一个新动画来完成剩余的动画,然后重新开始动画:
- (void)createAnimations {
[CATransaction begin];
[CATransaction setCompletionBlock:^{
[CATransaction begin];
[CATransaction setCompletionBlock:^{
[self createAnimations];
}];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = .5;
animation.fromValue = [NSNumber numberWithFloat:.9];
animation.toValue = [NSNumber numberWithFloat:1];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[_outerCircle2 addAnimation:animation forKey:@"fillingAnimation"];
animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation.duration = .5;
animation.fromValue = [NSNumber numberWithFloat:0];
animation.toValue = [NSNumber numberWithFloat:.1];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[_outerCircle2 addAnimation:animation forKey:@"clearingAnimation"];
[CATransaction commit];
}];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 5;
animation.fromValue = [NSNumber numberWithFloat:0];
animation.toValue = [NSNumber numberWithFloat:.9];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[_outerCircle2 addAnimation:animation forKey:@"fillingAnimation"];
animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation.duration = 5;
animation.fromValue = [NSNumber numberWithFloat:.1];
animation.toValue = [NSNumber numberWithFloat:1];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[_outerCircle1 addAnimation:animation forKey:@"clearingAnimation"];
[CATransaction commit];
此代码具有持续为圆圈设置动画的预期效果,但每次触发主要动画或后续动画的完成 block 时,动画都会断断续续。
我不确定执行此动画的最佳方式。谁能帮我改进一下??谢谢!
最佳答案
要创建旋转动画,请在您的 createAnimations
方法中,将您拥有的内容替换为:
CABasicAnimation *spinAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
spinAnimation.byValue = [NSNumber numberWithFloat:2.0f*M_PI];
spinAnimation.duration = 1.3;
spinAnimation.repeatCount = HUGE_VALF;
[self.viewThatHasTheDrawings.layer addAnimation:spinAnimation forKey:@"indeterminateAnimation"];
这将永远旋转动画。
要取消动画,使用:
[self.viewThatHasTheDrawings.layer removeAllAnimations];
关于ios - 重复忙圈动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24998135/