Попытка оживить каплю из крана с помощью CALayers - PullRequest
Новая
       44

Попытка оживить каплю из крана с помощью CALayers

0 голосов
/ 11 сентября 2018

Я пытаюсь сделать подкласс UIView, который показывает водопроводный кран с каплей, которая продолжает расти, а затем падает.Чем больше экспериментов я выполняю с разными частями, тем больше я запутываюсь.

Я создал две графики:

enter image description here enter image description here

Я создал класс 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() {

    }
}

Если я добавлю это представление в свое приложение, я получу что-то похожее на это:

enter image description here

что в самый раз.Но как только я пытаюсь поэкспериментировать с изменением внешнего вида капли, ничего не работает, как ожидалось.То, что я пробовал / усвоил до сих пор:

  • Установка drip.contentScale, похоже, ничего не дает.Документация делает его звучащим так, будто это просто подсказка?
  • Я играл с contentsRect, что, кажется, меняет его, но после прочтения документов, кажется, это указывает на то, что он определяет подраздел перетаскиваемого изображения, которыйПоказано.Я хочу показать все капли, я просто хочу начать с малого, заставить его набухать, а затем переключиться на перевод его вниз.
  • Различные варианты преобразования (масштабирование, затем перевод) кажутся правильным способом сделать что-то,Но это также не дает правильного результата.Например, если я установил жест касания self.valvebeatView.drip.transform = CATransform3DMakeScale(0.1, 0.1, 1), он временно увеличится в 10 раз, а затем вернется к исходному размеру.Но что еще страннее, если я вместо этого self.valvebeatView.drip.transform = CATransform3DMakeScale(10.0, 10.0, 1) сделаю то же самое?!?!?Почему он, по крайней мере, не сжался, а затем вернулся к исходной форме?

Я задавался вопросом, так ли это, потому что моя гравитация установлена ​​по умолчанию (то есть с изменением размера).Но когда я изменяю это на центр, оригинальная капля выходит за рамки размера.

Суть моего вопроса в том, какие хуки (трансформировать, позиционировать и т. Д.) Я хочу использовать для анимации растущей капли измаленький масштаб до нормы, а затем падает вниз.

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018 
 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")

}
0 голосов
/ 11 сентября 2018

Давайте предположим, что вы действительно хотите упорствовать в выполнении этого с использованием слоя и анимации слоя вместо гораздо более простого подхода использования вида и анимации вида.

Тогда из довольно дурацких идей, которые вы перечислили, только изменение transform и, возможно, также position (если идея также заключается в перемещении капли) - это правильно. Вам нужно узнать о CABasicAnimation. Чтобы совместить рост капли с падением капли хорошо скоординированным образом, используйте CAAnimationGroup.

...