尝试使用CALayers为龙头制作动画

Question

我正在尝试创建一个UIView子类，它显示了一个水龙头，水滴一直在增长然后下降。我用不同的部分运行的实验越多，我就越困惑。

我创建了两个图形：

我创建了一个UIView类：

class ValvebeatView: UIView {
    var faucet = CALayer()
    var drip = CALayer()

    func _init() {
        self.faucet.contents = #imageLiteral(resourceName: "faucet").cgImage
        self.drip.contents = #imageLiteral(resourceName: "droplet").cgImage
        self.layer.insertSublayer(self.drip, above: nil)
        self.layer.insertSublayer(self.faucet, above: self.drip)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self._init()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self._init()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.faucet.frame = self.bounds
        self.drip.frame = self.bounds
    }

    func startDrop() {

    }
}

如果我在我的应用程序中添加此视图，我会得到如下所示的内容：

这是对的。但是一旦我尝试改变掉落的外观，就没有任何效果如预期的那样。到目前为止我尝试/学到的东西：

• 设置drip.contentScale似乎没有做任何事情。该文档听起来似乎只是一个暗示？
• 我玩contentsRect似乎改变了它，但在阅读了文档之后，它似乎表明它确定了所显示的丢弃图像的子部分。我想展示所有的下降，我只想从小开始，使其膨胀，然后切换到向下翻译。
• 各种变换选项（缩放然后翻译）似乎是正确的做事方式。但这也不会产生正确的结果。例如，如果我为self.valvebeatView.drip.transform = CATransform3DMakeScale(0.1, 0.1, 1)设置了一个轻击手势，它会暂时膨胀10倍，然后恢复到原始大小。但更奇怪的是，如果我改为做self.valvebeatView.drip.transform = CATransform3DMakeScale(10.0, 10.0, 1)，它会做同样的事情吗？！？！？为什么它至少不缩小然后恢复到原来的形状？

我想知道是不是因为我的引力设置为默认值（调整大小）。但是，当我将其更改为居中时，原始落差就会超出规模。

除了我的问题，我想用什么钩子（变换，位置等？）来动画我的滴从小规模到正常，然后向下坠落。

Answer 1

让我们假设您确实希望坚持使用图层和图层动画来执行此操作，而不是使用视图和查看动画的更简单的方法。

然后你列出的相当古怪的想法，只改变transform和可能还有position（如果想法也是移动下降）是正确的。您需要了解CABasicAnimation。要以良好的协调方式将下降的增长与下降的下降结合起来，请使用CAAnimationGroup。

Answer 2

 func startDrop() {

    self.drip.contentsGravity = kCAGravityCenter
    let center = CGPoint.init(x: self.frame.width / 2.0, y: self.frame.height / 2.0)
    let scaleAnimation = CAKeyframeAnimation.init(keyPath: "contentsScale")
    scaleAnimation.values = [3, 1, 1 ]
    scaleAnimation.keyTimes = [0,0.2, 1]
    scaleAnimation.duration = 3
    scaleAnimation.isRemovedOnCompletion = false
    scaleAnimation.repeatCount = Float.greatestFiniteMagnitude
    let positionAnimation = CAKeyframeAnimation.init(keyPath: "position")
    positionAnimation.values = [center  , center, CGPoint.init(x:center.x ,y:center.y * 2) ]
    positionAnimation.keyTimes = [0,0.2, 1]
    positionAnimation.duration = 3
    positionAnimation.repeatCount = Float.greatestFiniteMagnitude
    positionAnimation.isRemovedOnCompletion = false

    self.drip.add(scaleAnimation, forKey: "scale")
    self.drip.add(positionAnimation, forKey: "pos")

}