сжиматься ширину кнопки с выпуском анимации

Question

Я хочу, чтобы скопировать эту анимацию в моем проекте

Так что я сделал попытку это:

1. Для преобразования масштаба X .. но проблема заключается также в сокращении названия кнопки.

   self.transform = CGAffineTransform.identity 
   UIView.animate(withDuration: duration, delay: delayTime, 
          usingSpringWithDamping: 0.7, 
          initialSpringVelocity: 0.7, 
          options: [.curveEaseIn], 
          animations: { 
          self.transform = CGAffineTransform(scaleX: 0.5, y: 1.0) 
       }, completion: nil) 
   

   Это то, что она дает (название кнопки также сжимается)

   

2. Использование CASpringAnimation

   let shrinkAnim = CASpringAnimation(keyPath: "bounds.size.width") 
   shrinkAnim.damping = 0.7 
   shrinkAnim.initialVelocity = 0.7 
   shrinkAnim.fromValue = frame.width 
   shrinkAnim.toValue = width 
   shrinkAnim.dura[![enter image description here][3]][3]tion = duration 
   shrinkAnim.timingFunction = getTimingFunction(curve: curve) 
   shrinkAnim.fillMode = kCAFillModeForwards 
   shrinkAnim.isRemovedOnCompletion = false 
   layer.add(shrinkAnim, forKey: shrinkAnim.keyPath) 
   

   Таким образом, можно изменить ширину, но и позиция title

Так что мой вопрос: что происходит не так, или что мне нужно добавить, чтобы воспроизвести первое изображение?

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

Answer 1

Не используйте CGAffineTransform, а взять и выход NSLayoutConstraint атрибут кнопки width и изменить его constant внутри анимации блока/закрытия.

UIView.animate(withDuration: duration, delay: delayTime, 
      usingSpringWithDamping: 0.7, 
      initialSpringVelocity: 0.7, 
      options: [.curveEaseIn], 
      animations: { 
      self.buttonWidthConstraint.constant = desired_width_here 
}, completion: nil) 

Answer 2

Вы пробовали обжалуние содержимого и сопротивление сжатию. Не могли бы вы попытаться сделать это по наивысшему приоритету.

Answer 3

Применить преобразование на рамке кнопки. Когда вы масштабируете UIView в анимации, он не учитывает subviews/layout, он будет просто равномерно масштабировать все, что делается.

self.transform = CGAffineTransform.identity 
UIView.animate(withDuration: duration, delay: delayTime, 
       usingSpringWithDamping: 0.7, 
       initialSpringVelocity: 0.7, 
       options: [.curveEaseIn], 
       animations: { 
       self.frame = CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>) 
    }, completion: nil) 

Answer 4

Поместите кнопку внутри UIView

ваш взгляд дерево будет выглядеть как этот

SuperView> UIView> Кнопка

Делая это, вы теперь фиксированный размер ширины вашей кнопки может следовать, что является uiview

Это будет выглядеть так

А затем анимировать с помощью

//let's say the current left and right constraint are 8 

leftConstraint.constant = 50 
rightConstraint.constant = 50 
UIView.animate ... { 
    self.view.layoutIfNeeded() 
} 

С помощью этого вам нужно только установить фрейм UIView к нужной рамке и имеют кнопку следуйте примеру костюма, и ваши анимации просто будут установлены пропорционально тому, как вы его кодировали.