自動レイアウトと子ビューのUIViewアニメーション

Question

私は非常に解決しやすいような奇妙な問題があります。私は、私が望むような行動を起こすためにいくつかの回避策を使うことができると思っていますが、もっと良い方法があるかどうかを知りたいのです。

私はUIView.animationを使用して高さを広げるcontentViewという名前のビューを持っていますが、これはまったく問題はなく、期待どおりです。

ここでの問題は、このビューは、このような22の底部に等しい自動レイアウト制約を有する子コンポーネント（ボタン）を有することである。

これはオートレイアウトの制約である：

アニメーションなしで高さを変更すると、表示の高さの変更とボタンは常にcontentViewの下部の22ポイントになります。しかし、アニメーションを使用してこのスムージーで使いやすいようにすると、アニメーションが開始される前にボタンが最後の位置に移動します。

は私がここに滑らかなアニメーションを実現することができる方法を知りたいが、ボタンとその親ビューに沿って移動

アニメーションを処理するコードの一部は非常に簡単ですが、私はよここでそれを投稿：サイドノートとして

@IBAction func openDetail(_ sender: ExpandCourseDetail) { 
     let rotation = sender.getOpen() ? CGAffineTransform.identity : CGAffineTransform(rotationAngle: CGFloat.pi) 
     UIView.animate(withDuration: 0.5, delay: 0.1, options: [.curveEaseInOut], animations: { 
      sender.transform = rotation 
     }, completion: { 
      success in 
      sender.setOpen(!sender.getOpen()) 
     }) 
     UIView.animate(withDuration: 1.0, delay: 0.5, options: [.curveEaseInOut], animations: { 
      self.contentView.frame.size.height = sender.getOpen() ? self.contentView.frame.height - 300 : self.contentView.frame.height + 300 
     }, completion: nil) 
    } 

を、ボタン自体は、ビューが拡大しているユーザーを表示するには、ボタンを180度回転させるアニメーションを持っています。

ありがとうございました。

Answer 1

制約があるのは簡単ですが、スーパービュー高さ制約IBOutletを作成して定数値を変更するだけです。

@IBAction func btnPressed(_ sender: UIButton) { 
    self.toggleButton.isSelected = !sender.isSelected 

    //Animation starts here 
    self.view.layoutIfNeeded() 
    UIView.animate(withDuration: 0.7) { 

     if self.toggleButton.isSelected { 
      //transform button 
      self.toggleButton.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi)) 

      //change your ParentView height to desired one 
      self.constContentViewHeight.constant = self.view.frame.size.height - 220 
      self.view.layoutIfNeeded() 
     } else { 

      self.toggleButton.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi*2)) 
      // Set height constraint to original value 
      self.constContentViewHeight.constant = 250 
      self.view.layoutIfNeeded() 
     } 
    } 

} 

私はデモを作成しました。

Answer 2

あなたが直面している問題は、2つのアニメーションブロックによるものです。そこで、私はいくつかの線を変更し、ボタンの変形と高さのアニメーションを1つのアニメーションブロックに入れました。

func openDetail(_ sender: ExpandCourseDetail) { 

    let isOpen = sender.getOpen() ? CGAffineTransform.identity : CGAffineTransform(rotationAngle: CGFloat.pi) 

    UIView.animate(withDuration: 1.0, delay: 0.5, options: [.curveEaseInOut], animations: { 

     sender.transform = rotation 
     self.contentView.frame.size.height = self.contentView.frame.height + (isOpen ? 300 : -300) 

    }, completion: { (success) in 
     sender.setOpen(!isOpen) 
    }) 
}