在UIView动画期间，如何为UIView图层的子图层设置动画？ [英] How do you animate the sublayers of the layer of a UIView during a UIView animation?

问题描述

在视图的UIView动画中，您可以通过在<$ c的options参数中包含 UIViewAnimationOptionLayoutSubviews 来设置其子视图的动画。 $ c> [UIView animateWithDuration：delay：options：animations：completion：] 。但是，当它们不是某个视图的背景层时，我无法找到一种方法来设置它的子图层的动画。他们只是跳到位以匹配视图的新边界。因为我正在使用图层而不是视图，所以我似乎必须使用Core Animation而不是UIView动画，但我不知道如何（以及何时）这样做，以便图层动画与视图匹配动画。

In a UIView animation for a view, you can animate its subviews being laid out by including UIViewAnimationOptionLayoutSubviews in the options parameter of [UIView animateWithDuration:delay:options:animations:completion:]. However, I cannot find a way to animate it laying out its sublayers when they are not some view's backing layer; they would just jump into place to match the new bounds of the view. Since I'm working with layers and not views, it seems like I have to use Core Animation instead of UIView animation, but I don't know how (and when) to do this such that the layer animation would match up to the view animation.

这是我的基本问题。如果你想知道我想要完成的具体事情，请阅读更多内容。

我通过添加CAShapeLayer创建了一个带有虚线边框的视图到视图的层（请参阅此stackoverflow问题： UIView周围的虚线边界）。我调整CAShapeLayer的路径以匹配 layoutSubviews 中视图的边界。

I've created a view with a dotted border by adding a CAShapeLayer to the view's layer (see this stackoverflow question: Dashed line border around UIView). I adjust the path of the CAShapeLayer to match the bounds of the view in layoutSubviews.

这有效，但有是一个美容问题：当视图的边界在UIView动画中进行动画处理时（如旋转期间），虚线边框会跳转到视图的新边界，而不是在视图为其边界设置动画时平滑地动画。也就是说，当视图动画时，虚线边框的右边和底部不会分别保持与视图的右边和底边部分紧密相连。 我如何从CAShapeLayer中获取虚线边框，以便在视图动画边界时为其设置动画？

This works, but there is one cosmetic issue: when the view's bounds is animated in a UIView animation (like during rotation), the dotted border jumps to the new bounds of the view instead of smoothly animating to it as the view animates its bounds. That is, the right and bottom parts of the dotted border do not respectively stay hugged to the right and bottom parts of the view as the view animates. How can I get the dotted border from the CAShapeLayer to animate alongside the view as it animates its bounds?

到目前为止我在做什么将CABasicAnimation附加到CAShapeLayer：

What I'm doing so far is attaching a CABasicAnimation to the CAShapeLayer:

- (void)layoutSubviews
{
    [super layoutSubviews];

    self.borderLayer.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
    self.borderLayer.frame = self.bounds;

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    [self.borderLayer addAnimation:pathAnimation forKey:nil];
}

这会导致虚线边框动画，但它没有正确的计时功能和动画持续时间匹配视图动画。此外，有时候，我们不希望虚线边框有动画，例如，当视图首先进行布局时，边框不应该从一些旧路径动画到新的正确路径;它应该只是出现。

This does cause the dotted border to animate, but it does not have the right timing function and animation duration to match the view animation. Also, sometimes, we don't want the dotted border to animate like, when the view first does layout, the border should not animate from some old path to the new correct path; it should just appear.

推荐答案

你可能已经找到了答案，但最近我也遇到了类似的问题，因为解决了它，我将发布答案。

You might have found the answer already, but I also faced similar problems recently, since solved it, I will post the answer.

在 - layoutSubViews 方法中，您可以获得当前的 UIView 动画作为支持图层的 CAAnimation ，带有 - animationForKey：方法。
使用此功能，您可以实现 - layoutSubviews ，例如：

In - layoutSubViews method, you can get current UIView animation as backing layer's CAAnimation with - animationForKey: method. Using this, You can implement - layoutSubviews like:

- (void)layoutSubviews {
    [super layoutSubviews];

    // get current animation for bounds
    CAAnimation *anim = [self.layer animationForKey:@"bounds"];

    [CATransaction begin];
    if(anim) {
        // animating, apply same duration and timing function.
        [CATransaction setAnimationDuration:anim.duration];
        [CATransaction setAnimationTimingFunction:anim.timingFunction];

        CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        [self.borderLayer addAnimation:pathAnimation forKey:@"path"];
    }
    else {
        // not animating, we should disable implicit animations.
        [CATransaction disableActions];
    }

    self.borderLayer.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
    self.borderLayer.frame = self.bounds;
    [CATransaction commit];
}

这篇关于在UIView动画期间，如何为UIView图层的子图层设置动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！