如何一个接一个地为不同的图层链接核心动画？答案

【问题标题】：How can I chain Core Animations for different Layers one after the other?如何一个接一个地为不同的图层链接核心动画？
【发布时间】：2012-02-25 17:21:03
【问题描述】：

我有一个启用分页的滚动视图和 N 个页面，它们是 UIViews 作为滚动视图的子视图。

我正在尝试执行以下操作：

用户滚动到第 n 页。此时，之前添加到页码 n 的 7 个 CALayers （即到页面[[scrollView subviews] objectAtIndex:n-1].layer subLayers]）一个接一个地淡入。

但我不知道如何使 CALayers 依次淡入。到目前为止，我已经从控制器的委托方法中尝试了以下 3 种方法：（假设我有一个图层数组，并且它们的不透明度在创建时设置为 0）

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
  int pageNumber = floor(self.scrollView.contentOffset.x / self.scrollView.frame.size.width);
  if(pageNumber == (n-1))
  {
    int timeOffset = 0;

    [CATransaction begin];
    for(CALayer *layer in layerArray)
    {
      CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@"opacity"];
      a.duration = 6;
      a.beginTime = timeOffset++;
      a.fromValue = [NSNumber numberWithFloat:0.];
      a.toValue = [NSNumber numberWithFloat:1.];

      [layer addAnimation:a forKey:nil];
    }
    [CATransaction commit];
  }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
  int pageNumber = floor(self.scrollView.contentOffset.x / self.scrollView.frame.size.width);
  if(pageNumber == (n-1))
  {
    int timeOffset = 0;

    [CATransaction begin];
    for(CALayer *layer in layerArray)
    {
      CABasicAnimation *a = [CABasicAnimation animation];
      a.duration = 6;
      a.beginTime = timeOffset++;
      [layer addAnimation:a forKey:@"opacity"];
      [layer setOpacity:1];
    }
    [CATransaction commit];
  }
}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
  int pageNumber = floor(self.scrollView.contentOffset.x / self.scrollView.frame.size.width);
  if(pageNumber == (n-1))
  {
    int timeOffset = 0;


    for(CALayer *layer in layerArray)
    {
      [CATransaction begin];
      CABasicAnimation *a = [CABasicAnimation animation];
      a.duration = 6;
      a.beginTime = timeOffset++;
      [layer addAnimation:a forKey:@"opacity"];
      [layer setOpacity:1];
    }

    for(CALayer *layer in layerArray)
      [CATransaction commit];
  }
}

但似乎两者都不起作用。当用户滚动到正确的页面时，所有图层都立即可见，没有太多的淡入淡出，而且绝对没有任何顺序。

有什么想法吗？

【问题讨论】：

标签： ios core-animation calayer

【解决方案1】：

实际上，关键是根据参考系获取当前时间，并将任何时间偏移量添加到当前时间。这也适用于非分组动画。

例如，与此代码类似的内容会导致 n 层（假设存储在某个数组中）一个接一个地依次淡入，每层需要 0.8 秒。

CGFloat timeOffset = 0;

[CATransaction begin];

for (CALayer *layer in layers) {
    CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@"opacity"];

    a.fromValue = @(0);
    a.toValue = @(1);
    a.fillMode = kCAFillModeForwards;
    a.beginTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil] + timeOffset;
    a.duration = 0.8;
    a.removedOnCompletion = NO;

    [layer addAnimation:a forKey:nil];

    timeOffset += a.duration;
}

[CATransaction commit];

在上述情况下，参考框架只是调用发生的当前时间。

【讨论】：

【解决方案2】：

CAAnimation 的beginTime 属性似乎仅在CAAnimation 是CAAnimationGroup 的一部分时才有效。我认为您还需要将CAAnimationGroup 的duration 属性设置得足够大，以持续到其最终动画完成。

https://stackoverflow.com/a/563486/77567

【讨论】：

【解决方案3】：

在 Swift 3 中 （layers 是一个 CALayer 或 CAShapeLayer 的数组）

var timeOffset:Double = 0
for layer in layers {
    let a = CABasicAnimation(keyPath: "path"
    a.fromValue = layer.ovalPathSmall.cgPath
    a.toValue = layer.ovalPathLarge.cgPath
    a.fillMode = kCAFillModeForwards
    a.beginTime = CACurrentMediaTime() + timeOffset
    a.duration = 0.3
    a.isRemovedOnCompletion = false
    layer.add(a, forKey: nil)

    timeOffset += 0.3
}

如果你想知道什么是椭圆路径小和椭圆路径大：

ovalPathSmall = UIBezierPath(arcCenter: position, radius: smallRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
ovalPathLarge = UIBezierPath(arcCenter: position, radius: largeRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)

【讨论】：