자동보기 및 자식 뷰가있는 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

제약 조건이 매우 쉽고, 단지 superView 높이 제약 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

당신이 직면하고있는 문제로 인해 두 개의 애니메이션 블록이다. 그래서 몇 줄을 변경하고 버튼 변환과 높이 애니메이션을 하나의 애니메이션 블록에 넣었습니다.

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