CALayers：A）我可以直接在它们上绘制吗 B）如何在超层上进行宽度调整影响子层

Question

所以我的目标是制作一种响应滑动手势的滑动门动画。您可以看到我当前动画的 GIF here（忽略手势行为与您预期相反的事实）。

我目前是这样实现的：我有一个 UIView 的子类，我正在调用 DoorView。 DoorView 具有三个 CALayer：每个 UIView 附带的基础超层；一个名为 doorLayer 的子层，它是可滑动的白色矩形；另一个名为 frameLayer 的子层是 "doorframe"（doorLayer 周围的黑色边框）。 doorLayer 和 frameLayer 有各自独立的动画，它们按顺序触发。

这是我需要添加到 DoorView 的内容：一个表示门把手的简单矩形。目前我不打算为门把手提供自己的动画。相反，我希望它只是 "attached" 到 doorLayer，以便它与应用于 doorLayer 的任何动画一起动画。

这是我的第一个问题：我知道我可以添加另一个层（我们称之为 handleLayer）并将其作为子层添加到 doorLayer。但是有没有办法在 doorLayer 上简单地 "draw" 一个小矩形而不需要额外的层？如果是这样，这是否出于任何原因更可取？

现在我的第二个问题：所以目前我实际上使用一个名为 handleLayer 的单独层，它作为子层添加到 doorLayer。您可以使用 handleLayer here.

查看动画的 GIF

这是应用于 doorLayer 的动画：

UIView.animateWithDuration(1.0, animations: { () -> Void in
            self.doorLayer.frame.origin.x = self.doorLayer.frame.maxX
            self.doorLayer.frame.size.width = 0
}

此动画将 doorLayer 框架的原点移动到门的右边界，同时减小其宽度，导致门的外观向右滑动并在滑动时消失。

如您在上面的 GIF 中所见，doorLayer 的原点偏移已根据需要应用于其 handleLayer 子层。但宽度调整不会转移到 handleLayer。这很好，因为我不希望手柄以与 doorLayer 相同的速度变窄。

相反，我们希望 handleLayer 与 doorLayer 一起移动，但保持其大小。但是，当 doorLayer 消失在门框的右侧时，把手也会随之消失（就像普通门的外观一样）。有什么线索可以做到这一点的最佳方法是什么？

目前在我的 doorLayer 动画中，我添加了这一行：

if self.doorLayer.frame.size.width <= self.handleLayer.frame.size.width {
                self.handleLayer.frame.size.width = 0
}

但这导致 this，这不太正确。

感谢您的帮助！

Answer 1

从高层次上讲，您需要

使滑动层成为轮廓层的子层
让你的轮廓图层遮住它的边界
使用 x 平移为滑动层的变换设置动画
动画完成后，使用比例转换为轮廓图层的变换设置动画
反转动画再次关门
你的门把手层就这样很好，不需要单独设置动画。

我为了好玩试了一下，这就是我的想法。我没有使用滑动手势，但它可以很容易地添加。我通过点击视图触发动画。再次点击切换回来。

func didTapView(gesture:UITapGestureRecognizer) {

    // Create a couple of closures to perform the animations. Each
    // closure takes a completion block as a parameter. This will
    // be used as the completion block for the Core Animation transaction's
    // completion block.

    let slideAnimation = {
        (completion:(() -> ())?) in
        CATransaction.begin()
        CATransaction.setCompletionBlock(completion)
        CATransaction.setAnimationDuration(1.0)
        if CATransform3DIsIdentity(self.slideLayer.transform) {
            self.slideLayer.transform = CATransform3DMakeTranslation(220.0, 0.0, 0.0)
        } else {
            self.slideLayer.transform = CATransform3DIdentity
        }
        CATransaction.commit()
    }

    let scaleAnimation = {
        (completion:(() -> ())?) in
        CATransaction.begin()
        CATransaction.setCompletionBlock(completion)
        CATransaction.setAnimationDuration(1.0)
        if CATransform3DIsIdentity(self.baseLayer.transform) {
            self.baseLayer.transform = CATransform3DMakeScale(2.0, 2.0, 2.0)
        } else {
            self.baseLayer.transform = CATransform3DIdentity
        }
        CATransaction.commit()
    }

    // Check to see if the slide layer's transform is the identity transform
    // which would mean that the door is currently closed.
    if CATransform3DIsIdentity(self.slideLayer.transform) {
        // If the door is closed, perform the slide animation first
        slideAnimation( {
            // And when it completes, perform the scale animation
            scaleAnimation(nil) // Pass nil here since we're done animating
        } )
    } else {
        // Otherwise the door is open, so perform the scale (down)
        // animation first
        scaleAnimation( {
            // And when it completes, perform the slide animation
            slideAnimation(nil) // Pass nil here since we're done animating
        })
    }
}

图层最初的设置方式如下：

func addLayers() {
    baseLayer = CALayer()
    baseLayer.borderWidth = 10.0
    baseLayer.bounds = CGRect(x: 0.0, y: 0.0, width: 220, height: 500.0)
    baseLayer.masksToBounds = true
    baseLayer.position = self.view.center

    slideLayer = CALayer()
    slideLayer.bounds = baseLayer.bounds
    slideLayer.backgroundColor = UIColor.whiteColor().CGColor
    slideLayer.position = CGPoint(x: baseLayer.bounds.size.width / 2.0, y: baseLayer.bounds.size.height / 2.0)

    let knobLayer = CALayer()
    knobLayer.bounds = CGRect(x: 0.0, y: 0.0, width: 20.0, height: 20.0)
    knobLayer.cornerRadius = 10.0 // Corner radius with half the size of the width and height make it round
    knobLayer.backgroundColor = UIColor.blueColor().CGColor
    knobLayer.position = CGPoint(x: 30.0, y: slideLayer.bounds.size.height / 2.0)

    slideLayer.addSublayer(knobLayer)

    baseLayer.addSublayer(slideLayer)

    self.view.layer.addSublayer(baseLayer)
}

这是动画的样子：

您可以在此处查看完整的 Xcode 项目：https://github.com/perlmunger/Door

CALayers：A）我可以直接在它们上绘制吗 B）如何在超层上进行宽度调整影响子层

CALayers: A) Can I draw directly on them and B) How to make a width adjustment on a superlayer affect a sublayer

core-animation

calayer

uikit

ios

swift