縮小按鈕的寬度動畫問題

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) 
   

   所以它可以改變的寬度，而且位置標題

所以我的問題是最新錯誤或我需要添加複製第一個圖像？

我對按鈕的限制固定在左側，右側和底部邊緣並固定高度。更多的是我正在爲此做一個類，所以我不能改變常量，因爲我必須在很多屏幕上使用它..所以我想要一站式解決方案。

Answer 1

不要使用CGAffineTransform，而是採取和巴頓的widthNSLayoutConstraint屬性出口，並改變其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時，它不考慮子視圖/佈局，它只會統一縮放繪製的任何內容。

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的框架設置爲你想要的框架，並有按鈕跟隨和你的動畫只會設置成與你如何編碼

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

// get view frame 

... 

// calculate distance 

var calculatedDistance = ...... 

// set distance 
let distanceToAnimate = calculatedDistance 

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