我如何实现加载动画,如 Weather Channel iOS App 中的动画?
具体来说,我有一个圆形的 UIButton
,当用户点击它并且正在加载某些内容时,我想要一个旋转的圆圈。
最好,我想使用内置的 iOS 框架和尽可能少的第 3 方库来实现。
这是天气 channel 应用程序的外观(无法获取 gif,因此要查看它的运行情况,请从 App Store 下载该应用程序):
它不一定要看起来完全像这样,纯色会是一个好的开始。但是概念应该是一样的。我不认为它应该很难制作,但遗憾的是我不知道从哪里开始。
感谢大家的帮助!
编辑 1: 我应该指出,纯色就足够了,不需要渐变或发光。
我一直在研究一些可能朝着正确方向发展的简单代码。请随意使用它作为起点:
- (void)drawRect:(CGRect)rect {
// Make the button round
self.layer.cornerRadius = self.frame.size.width / 2.0;
self.clipsToBounds = YES;
// Create the arc
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2) radius:(self.frame.size.width / 2) startAngle:M_PI_2 endAngle:M_PI clockwise:NO].CGPath;
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor redColor].CGColor;
circle.lineWidth = 10;
// Create the animation
// Add arc to button
[self.layer addSublayer:circle];
}
最佳答案
正如其他地方所指出的,您可以只添加一个 View ,然后旋转它。如果你想用基于 block 的动画旋转,它可能看起来像:
- (void)rotateView:(UIView *)view {
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
[UIView animateKeyframesWithDuration:1.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
for (NSInteger i = 0; i < 4; i++) {
[UIView addKeyframeWithRelativeStartTime:(CGFloat) i / 4.0 relativeDuration:0.25 animations:^{
view.transform = CGAffineTransformMakeRotation((CGFloat) (i + 1) * M_PI / 2.0);
}];
}
} completion:nil];
} completion:nil];
}
坦率地说,虽然我通常更喜欢基于 block 的动画,但是用动画包装动画(这是没有缓入/缓出所必需的)的愚蠢使得基于 block 的方法不那么引人注目。但它说明了这个想法。
或者,在 iOS 7 及更高版本中,您可以使用 UIKit Dynamics 来旋转它:
为动画师定义一个属性:
@property (nonatomic, strong) UIDynamicAnimator *animator;
实例化动画器:
self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
为项目添加旋转:
UIDynamicItemBehavior *rotationBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.imageView]]; [rotationBehavior addAngularVelocity:2.0 forItem:self.imageView]; [self.animator addBehavior:rotationBehavior];
关于ios - 循环加载动画(如 Weather Channel App),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27821589/