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

 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")

}

尝试使用CALayers为水龙头中的水滴设置动画

1 个答案: