swift 3 uiview 애니메이션은 마지막 두 애니메이션 만 표시합니다.

Question

내 팝업 UIView의 배경색을 4 가지 색상 사이에서 변경하고 다시 반복하여 반복하려고합니다. 아래의 코드는 마지막 두 색상 만 나타나고, 처음 두 개는 건너 뛰고 있습니다. 생각해 볼 수있는 모든 것을 시도했습니다. 제가 누락 된 아이디어가 있습니까?

 UIView.animateWithDuration(2, delay: 0.0, options:[UIViewAnimationOptions.Repeat, UIViewAnimationOptions.Autoreverse], animations: { 
     self.view.backgroundColor = UIColor.blackColor() 
     self.view.backgroundColor = UIColor.greenColor() 
     self.view.backgroundColor = UIColor.grayColor() 
     self.view.backgroundColor = UIColor.redColor() 
    }, completion: nil) 

업데이트 코드 :

 UIView.animate(withDuration: 12, delay: 1, options: 
       [UIViewAnimationOptions.allowUserInteraction, 
       UIViewAnimationOptions.repeat, 
       UIViewAnimationOptions.autoreverse], 
             animations: { 
             self.popupView.backgroundColor = UIColor.black 
             self.popupView.backgroundColor = UIColor.green 
             self.popupView.backgroundColor = UIColor.gray 
             self.popupView.backgroundColor = UIColor.red 
      }, completion:nil) 

업데이트 2 : 개별 애니메이션 블록 : 모든

 UIView.animate(withDuration: 3, delay: 0.0, options: 
     [UIViewAnimationOptions.repeat, 
     UIViewAnimationOptions.autoreverse, 
     .allowUserInteraction], 
     animations: { (BOOL) -> Void in 

       self.popupView.backgroundColor = UIColor.black 
      }) { (Bool) -> Void in 
       UIView.animate(withDuration: 3.0, animations: {() -> Void in 
        self.popupView.backgroundColor = UIColor.green 
       }, completion: { (Bool) -> Void in 
        UIView.animate(withDuration: 3.0, animations: {() -> Void in 
         self.popupView.backgroundColor = UIColor.gray 
        }, completion: { (Bool) -> Void in 
         UIView.animate(withDuration: 3.0, animations: {() -> Void in 
          self.popupView.backgroundColor = UIColor.white 
         }, completion:nil) 
        }) 
       }) 
      } 

Answer 1

첫째로, backgroundColor은 애니메이션 가능하지 않습니다. 그러나 경우 는이었다, 또는 이 애니메이션 뭔가 애니메이션을 원한다면, 여러 애니메이션 순환에 더 좋은 방법과 같이, 키 프레임 애니메이션을 사용하는 것입니다 :

UIView.animateKeyframes(withDuration: 12, delay: 0, options: [.allowUserInteraction, .repeat, .autoreverse], animations: { 
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: { 
     self.popupView.backgroundColor = .black 
    }) 
    UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: { 
     self.popupView.backgroundColor = .green 
    }) 
    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25, animations: { 
     self.popupView.backgroundColor = .gray 
    }) 
    UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25, animations: { 
     self.popupView.backgroundColor = .red 
    }) 
}, completion: nil) 

을이 경우 I 각 keyFrame의 relativeDuration을 전체 애니메이션 시간의 0.25 (1/4)로 설정하고 relativeStartTime을 총 재생 시간의 처음, 1/4, 1/2 및 3/4으로 설정하십시오.

다시 말하지만, 이것은 애니메이션 속성은 아니지만 애니메이션을 함께 묶는 효과적인 방법입니다.

또한 은 키 프레임 전환을 할 수 없지만, 대신 animate의 transition를 사용하여 색상 변경을 애니메이션 할 수입니다. 완성을 사용하여 이들을 함께 연결할 수 있고 끝날 때 몇 가지 래퍼 함수 또는 비슷한 것을 호출하여 애니메이션을 다시 시작해야합니다.

UIView.transition(with: self.popupView, duration: 3, options: .allowUserInteraction, animations: { 
    self.popupView.backgroundColor = .black 
}, completion: { (finished) in 
    UIView.transition(with: self.popupView, duration: 3, options: .allowUserInteraction, animations: { 
     self.popupView.backgroundColor = .green 
    }, completion: { (finished) in 
     UIView.transition(with: self.popupView, duration: 3, options: .allowUserInteraction, animations: { 
      self.popupView.backgroundColor = .gray 
     }, completion: { (finished) in 
      UIView.transition(with: self.popupView, duration: 3, options: .allowUserInteraction, animations: { 
       self.popupView.backgroundColor = .red 
      }, completion: { (finished) in 
       //Start the chain over again 
      }) 
     }) 
    }) 
}) 

Answer 2

먼저, 애니메이션 블록의 색상 변경 색상 변경을 애니메이션으로하지 않습니다. 그러나 색상을 변경하려면 애니메이션 블록을 사용해도됩니다.

애니메이션 블록으로 원하는 결과를 얻으려면 코드가 아래처럼 보입니다.

UIView.animate(withDuration: 12, delay: 1, options: 
      [.allowUserInteraction, .repeat, .autoreverse], 
            animations: { 
            self.popupView.backgroundColor = UIColor.black 
     }, completion:{ competed in 
      UIView.animate(withDuration: 12, delay: 1, options: 
      [.allowUserInteraction, .repeat, .autoreverse], 
            animations: { 
            self.popupView.backgroundColor = UIColor.green 
      }, completion: ....) 

N 초마다 배경색을 변경하려면 타이머를 사용하는 것이 좋습니다.

UDATE는

여기서 타이머를 사용하는 예이다.

class MyViewController : UIViewController { 
    var timer: Timer? 
    let colors: [UIColor] = [.white, .black, .red, .magenta] 
    var idx: Int = 0 

    deinit { 
     timer?.invalidate() 
     timer = nil 
    } 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     timer = Timer(timeInterval: 5, 
         target: self, 
         selector: #selector(changeColor), 
         userInfo: nil, 
         repeats: true) 
    } 

    @objc 
    func changeColor() { 
     view.backgroundColor = colors[idx] 
     idx = (idx + 1) % colors.count 
    } 
} 

타이머를 사용하면 코드가 더 간단 해집니다.