UIView：如何用阴影为 CALayer 框架设置动画？

Posted 2023-03-13

【中文标题】UIView：如何用阴影为 CALayer 框架设置动画？

【英文标题】：UIView: How to animate CALayer frame with shadow?

【发布时间】：2012-03-03 16:32:32

【问题描述】：

我添加了一个阴影层作为 UIView 层的子层。以下是UIView子类的新增方法：

- (void)addDefaultShadowSubview 
    self.shadowSubview = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, self.frame.size.width, self.frame.size.height)] autorelease];

    CALayer *shadowLayer = [CALayer layer];
    shadowLayer.backgroundColor = self.backgroundColor.CGColor;
    shadowLayer.shadowOffset = CGSizeMake(0, 3);
    shadowLayer.shadowRadius = 5.0;
    shadowLayer.shadowColor = [UIColor blackColor].CGColor;
    shadowLayer.shadowOpacity = 0.8;

    shadowLayer.frame = self.shadowSubview.frame;

    [self.shadowSubview.layer addSublayer:shadowLayer];

    self.shadowSubview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self addSubview:self.shadowSubview];
    [self sendSubviewToBack:self.shadowSubview];

我想保留它作为调整 UIView 与 shadowSubview 动画大小的一部分。但是在使用+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;时找不到正确的方法

[UIView animateWithDuration:durationDefaultAnimation
                     animations:^
                         [self.viewWithShadowSubview setFrame:enlargedFrame];
                     
                     completion:^(BOOL finished) 
                         [self modifyInsetForCurrentImageviewWithAnimation:YES];
                     ];

请帮助我了解正确的方法。尝试了解CABasicAnimation，但找不到将其应用于此案例的方法。

【问题讨论】：

为什么不在shadowSubview层设置阴影？

【参考方案1】：

我建议你也设置阴影层的shadowPath属性，然后参考Animating CALayer's shadowPath property实现阴影路径的动画。

【参考方案2】：

CALayer 图层框架和阴影动画： 您可以在 CALayer 本身上应用阴影并调整框架。或者为阴影和框架设置不同的图层，然后根据您的要求对其进行动画处理..

我编写了一个对我有用的示例代码..

    //change in CALayer frame
    let startFrame = CGRect.init(x: -5, y: -5, width: view.frame.size.width+10, height: view.frame.size.height+10)
    let endFrame = CGRect.init(x: -15, y: -15, width: view.frame.size.width+30, height: view.frame.size.height+30)

    //Frame
    let layer = CALayer.init()
    layer.frame = startFrame
    layer.borderWidth = 3.0
    layer.borderColor = UIColor.white.cgColor
    layer.backgroundColor = UIColor.clear.cgColor
    view.layer.addSublayer(layer)

    //Shadow
    view.layer.shadowRadius = 4.0
    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowOffset = CGSize.init(width: 3.0, height: 3.0)

    //Animaiton for shadow
    let animation = CABasicAnimation(keyPath: "shadowOpacity")
    animation.fromValue = 0.0
    animation.toValue = 0.9
    animation.duration = 5.0
    CATransaction.setCompletionBlock 

    

    //Animation for Frame
    let baseAnimation = CABasicAnimation.init(keyPath: "bounds")
    baseAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    baseAnimation.duration = 5.0
    baseAnimation.fromValue = NSValue.init(cgRect: startFrame)
    baseAnimation.toValue = NSValue.init(cgRect: endFrame)
    layer.frame = endFrame
    CATransaction.setCompletionBlock 

    

    //Group animation - if u have multiple CA animation then group else no need to group it
    let animationGroup = CAAnimationGroup.init()
    animationGroup.duration = 5.0
    animationGroup.animations = [animation,baseAnimation]

    view.layer.add(animationGroup, forKey: nil)

【参考方案3】：

像大卫说的那样直接在你的 shadowSubview 上设置阴影。

您可以通过替换来做到这一点：

    - (void)addDefaultShadowSubview 
    self.shadowSubview = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, self.frame.size.width, self.frame.size.height)] autorelease];

    CALayer *shadowLayer = [CALayer layer];
    shadowLayer.backgroundColor = self.backgroundColor.CGColor;
    shadowLayer.shadowOffset = CGSizeMake(0, 3);
    shadowLayer.shadowRadius = 5.0;
    shadowLayer.shadowColor = [UIColor blackColor].CGColor;
    shadowLayer.shadowOpacity = 0.8;

    shadowLayer.frame = self.shadowSubview.frame;

    [self.shadowSubview.layer addSublayer:shadowLayer];

    self.shadowSubview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self addSubview:self.shadowSubview];
    [self sendSubviewToBack:self.shadowSubview];

由此

- (void)addDefaultShadowSubview 
    self.shadowSubview = [[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, self.frame.size.width, self.frame.size.height)] autorelease];

    CALayer *self.shadowSubview.layer = [CALayer layer];
    self.shadowSubview.layer.backgroundColor = self.backgroundColor.CGColor;
    self.shadowSubview.layer.shadowOffset = CGSizeMake(0, 3);
    self.shadowSubview.layer.shadowRadius = 5.0;
    self.shadowSubview.layer.shadowColor = [UIColor blackColor].CGColor;
    self.shadowSubview.layer.shadowOpacity = 0.8;