ios - 循环加载动画(如 Weather Channel App)

Question

我如何实现加载动画，如 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];
}

Answer 1

正如其他地方所指出的，您可以只添加一个 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 来旋转它:

1. 为动画师定义一个属性:

   @property (nonatomic, strong) UIDynamicAnimator *animator;
   

2. 实例化动画器:

   self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
   

3. 为项目添加旋转:

   UIDynamicItemBehavior *rotationBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.imageView]];
   [rotationBehavior addAngularVelocity:2.0 forItem:self.imageView];
   [self.animator addBehavior:rotationBehavior];