因此，我的目标是响应滑动手势制作一种滑动门动画。您可以看到我当前动画here的GIF(忽略手势的行为与预期相反的事实)。
这是我当前完成此操作的方式:我有一个UIView的子类，我将其称为DoorView。 DoorView具有三个CALayer:每个UIView随附的基本超层；一个称为doorLayer的子层，它是可滑动的白色矩形；另一个称为frameLayer的子层是“门框”(doorLayer周围的黑色边框)。 doorLayer和frameLayer具有各自独立的动画，这些动画按顺序触发。
我需要在DoorView中添加以下内容:一个代表门把手的简单矩形。目前，我不打算让门把手自己制作动画。相反，我希望将其简单地“附加”到doorLayer，以便使其与应用于doorLayer的所有动画一起动画。
这是我的第一个问题出现的地方:我知道我可以添加另一层(我们称为handleLayer)并将其作为子层添加到doorLayer。但是，有没有一种方法可以简单地在doorLayer上“绘制”一个小矩形而不需要额外的图层？如果是这样，出于任何原因，这是否可取？
现在，我的第二个问题是:实际上，我实际上使用的是称为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，这是不正确的。
谢谢你的帮助!
最佳答案
从高层次上讲，您需要
我拍了这张照片很有趣，这就是我想出的。我没有使用滑动手势，但可以轻松添加它。我点击视图即可触发动画。再次点击以切换回去。
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