ios - 动画边界变化时的 CAShapeLayer 路径动画

标签 ios animation core-animation cashapelayer

我有一个 CAShapeLayer(它是 UIView 子类的层),其 path应该在 View 的 bounds 时更新尺寸变化。为此,我覆盖了图层的 setBounds:重置路径的方法:

@interface CustomShapeLayer : CAShapeLayer
@end

@implementation CustomShapeLayer

- (void)setBounds:(CGRect)bounds
{
    [super setBounds:bounds];
    self.path = [[self shapeForBounds:bounds] CGPath];
}

这工作正常,直到我为边界变化设置动画。我想让路径在任何动画边界更改(在 UIView 动画块中)旁边设置动画,以便形状层始终采用其大小。

path属性默认不动画,我想出了这个:

覆盖图层的 addAnimation:forKey:方法。在其中,确定是否向图层添加了边界动画。如果是这样,通过复制传递给该方法的边界动画中的所有属性,创建第二个显式动画来为边界旁边的路径设置动画。在代码中:
- (void)addAnimation:(CAAnimation *)animation forKey:(NSString *)key
{
    [super addAnimation:animation forKey:key];

    if ([animation isKindOfClass:[CABasicAnimation class]]) {
        CABasicAnimation *basicAnimation = (CABasicAnimation *)animation;

        if ([basicAnimation.keyPath isEqualToString:@"bounds.size"]) {
            CABasicAnimation *pathAnimation = [basicAnimation copy];
            pathAnimation.keyPath = @"path";
            // The path property has not been updated to the new value yet
            pathAnimation.fromValue = (id)self.path;
            // Compute the new value for path
            pathAnimation.toValue = (id)[[self shapeForBounds:self.bounds] CGPath];

            [self addAnimation:pathAnimation forKey:@"path"];
        }
    }
}

我从阅读 David Rönnqvist 的 View-Layer Synergy article 中得到了这个想法. (此代码适用于 iOS 8。在 iOS 7 上,您似乎必须检查动画的 keyPath@"bounds" 而不是 `@"bounds.size"。)

触发 View 动画边界更改的调用代码如下所示:
[UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.3 initialSpringVelocity:0.0 options:0 animations:^{
    self.customShapeView.bounds = newBounds;
} completion:nil];

问题

这主要有效,但我有两个问题:
  • 偶尔,我会在 EXC_BAD_ACCESS 中 ( CGPathApply() ) 崩溃在上一个动画仍在进行中时触发此动画。我不确定这是否与我的特定实现有关。编辑:没关系。我忘了转换 UIBezierPathCGPathRef . Thanks @antonioviero !
  • 使用标准的 UIView spring 动画时, View 边界和图层路径的动画会稍微不同步。也就是说,路径动画也以弹性方式执行,但它并没有完全遵循 View 的边界。
  • 更一般地说,这是最好的方法吗? 似乎有一个形状图层,其路径取决于其边界大小,并且应该与任何边界变化同步动画,这应该可以正常工作™,但我很难过。我觉得一定有更好的方法。

  • 我尝试过的其他事情
  • 覆盖图层的 actionForKey:或 View 的 actionForLayer:forKey:为了返回 path 的自定义动画对象属性(property)。我认为这将是首选方式,但我没有找到获取应由封闭动画块设置的事务属性的方法。即使从动画块内部调用,[CATransaction animationDuration ] 等总是返回默认值。

  • 有没有办法 (a) 确定您当前位于动画块中,以及 (b) 获取已在该块中设置的动画属性(持续时间、动画曲线等)?

    项目

    这是动画:橙色三角形是形状层的路径。黑色轮廓是承载形状图层的 View 的框架。

    Screenshot

    Have a look at the sample project on GitHub . (此项目适用于 iOS 8,需要 Xcode 6 才能运行,抱歉。)

    更新

    Jose Luis Piedrahita pointed methis article by Nick Lockwood ,这建议采用以下方法:
  • 覆盖 View 的 actionForLayer:forKey:或图层的 actionForKey:方法并检查传递给此方法的键是否是您要设置动画的键( @"path" )。
  • 如果是这样,请调用 super在图层的“正常”动画属性之一(例如 @"bounds" )上,将隐含地告诉您您是否在动画块内。如果 View (层的委托(delegate))返回一个有效的对象(而不是 nilNSNull ),我们是。
  • [super actionForKey:]返回的动画中设置路径动画的参数(持续时间、计时函数等)并返回路径动画。

  • 这在 iOS 7.x 下确实很好用。但是,在 iOS 8 下,对象是从 actionForLayer:forKey: 返回的。不是标准(并记录在案)CA...Animation但是一个私有(private)实例 _UIViewAdditiveAnimationAction类(NSObject 子类)。由于没有记录此类的属性,因此我无法轻松使用它们来创建路径动画。

    _Edit:或者它可能只是工作。正如 Nick 在他的文章中提到的,一些属性如 backgroundColor仍然返回标准 CA...Animation在 iOS 8 上。我必须尝试一下。`

    最佳答案

    我知道这是一个老问题,但我可以为您提供一个类似于洛克伍德先生方法的解决方案。遗憾的是,这里的源代码很快,因此您需要将其转换为 ObjC。

    如前所述,如果该层是 View 的支持层,您可以拦截 View 本身中的 CAAction。然而,这并不方便,例如,如果在多个 View 中使用背衬层。

    好消息是 actionForLayer:forKey: 实际上在支持层调用 actionForKey: 。

    它位于 actionForKey: 在支持层中,我们可以在其中拦截这些调用并在路径更改时提供动画。

    用 swift 编写的示例层如下:

    class AnimatedBackingLayer: CAShapeLayer
    {
    
        override var bounds: CGRect
        {
            didSet
            {
                if !CGRectIsEmpty(bounds)
                {
                    path = UIBezierPath(roundedRect: CGRectInset(bounds, 10, 10), cornerRadius: 5).CGPath
                }
            }
        }
    
        override func actionForKey(event: String) -> CAAction?
        {
            if event == "path"
            {
                if let action = super.actionForKey("backgroundColor") as? CABasicAnimation
                {
                    let animation = CABasicAnimation(keyPath: event)
                    animation.fromValue = path
                    // Copy values from existing action
                    animation.autoreverses = action.autoreverses
                    animation.beginTime = action.beginTime
                    animation.delegate = action.delegate
                    animation.duration = action.duration
                    animation.fillMode = action.fillMode
                    animation.repeatCount = action.repeatCount
                    animation.repeatDuration = action.repeatDuration
                    animation.speed = action.speed
                    animation.timingFunction = action.timingFunction
                    animation.timeOffset = action.timeOffset
                    return animation
                }
            }
            return super.actionForKey(event)
        }
    
    }
    

    关于ios - 动画边界变化时的 CAShapeLayer 路径动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24936987/

    相关文章:

    ios - 了解用户为该应用支付了多少费用

    ios - Google maps Places Picker for iOS - Swift 中的 GMSPlace Picker 出现但在动画结束时消失

    CSS 动画 : changing the border-width of an element

    javascript - Angular 2/4+ 路由器动画,等待上一个路由动画完成

    java - 如何在屏幕上移动/动画单个子类对象而不移动其他子类?

    iphone - 停止进行中的 CAKeyframeAnimation

    ios - 重新排列 UICollectionView 的单元格

    ios - CAShapeLayer路径动画延迟严重

    core-animation - CA关键帧动画

    ios - 使用 SDWebimage 使用 url 一张一张地下载图像