Swift 카드 세탁 애니메이션 효과 실현 방법

목표 효과: 애니메이션 버튼을 클릭한 후 각 패가 각각 회전하여 화면 상단의 임의의 위치로 흩어진 후 초기 위치로 돌아가는 것이 LOL 남자 칼의 스킬 애니메이션과 비슷하다:)
1: 카드 만들기 대상

for _ in 0...49 {
        let cardSet = UIImageView(image: UIImage(named: "cardBackLandscape"))
        self.view.addSubview(cardSet)
        cardSet.frame = self.landscapeCardBack.frame
        self.cardSetList.append(cardSet)
      }
      NSNotificationCenter.defaultCenter().postNotificationName("setCreated", object: nil)

모든 카드를 UIImageView로 만듭니다. 나중에 이 카드를 조작하기 위해 저는 그룹으로 같은 위치에 있는 카드를 가지고 만듭니다. 만든후에 로컬 알림으로 setCreated 메시지를 보내서 이 페이지의 관찰자 카드set가 만듭니다. 두 번째 애니메이션을 시작할 수 있습니다.
2: 우선 애니메이션을 시작하는 단추의 사용자 상호작용을 닫아야 합니다. 켜져 있으면 연속으로 클릭할 때마다 50장의 카드를 만들어서 프로그램이 끊기게 됩니다.
여기 delay Time은 라인을 지연시키는 거예요. 애니메이션이 어색하지 않게.
매번 아래 표시된 카드에 대응하는 대상에 회전 애니메이션을 추가하고 원점을 바꾼다. 나는 UIVIew 애니메이션으로 이 애니메이션을 실현하기 전에 각 카드에 베셀 곡선을 추가하려고 했다. 그러면 확실히 제어성이 높다. 그러나 시간 관계상 나는 UIVIew 애니메이션만 사용했다. 카드에 추가된 회전 애니메이션은 팝 애니메이션 라이브러리로 이루어졌다. 여기서 사용하는 것은 Basic 애니메이션이다.이 단계가 끝난 후에 모든 카드를 서로 다른 위치로 돌리고 흩어진다.delayTime이 끝나고 로컬 알림을 터치하여 shuffleFinished를 보낼 때 이 페이지의 관찰자는 다음 애니메이션을 실행한다. 즉, 모든 카드를 애니메이션의 시작점으로 복원하는 것이다

func shuffleTheSet() {
    self.shuffleButton.userInteractionEnabled = false
    let delayTime = dispatch_time(DISPATCH_TIME_NOW, Int64(0.5 * Double(NSEC_PER_SEC)))
    dispatch_after(delayTime, dispatch_get_main_queue()) {
      NSNotificationCenter.defaultCenter().postNotificationName("shuffleFinished", object: nil)
    }
    for count in 0...49 {
      UIView.animateWithDuration(0.3, animations: {
        let cardRotateAnimation = POPBasicAnimation(propertyNamed: kPOPLayerRotation)
        cardRotateAnimation.fromValue = 0
        cardRotateAnimation.toValue = CGFloat(M_PI * 2.0)
        cardRotateAnimation.duration = 1
        //        cardRotateAnimation.duration = Double(count>5 ? count/2 : count/10)
        cardRotateAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        self.cardSetList[count].layer.pop_addAnimation(cardRotateAnimation, forKey: "cardRotation")
        self.cardSetList[count].frame.origin = CGPointMake(CGFloat(arc4random()) % (250 - 0 + 1) + 0, CGFloat(arc4random()) % (300 - 74 + 1) + 74)
        self.view.layoutIfNeeded()
        self.landscapeCardBack.removeFromSuperview()
      })
    }
  }

3: 각 카드의 위치를 초기 위치로 복원하고 버튼의 타이틀을 카드 절단 상태로 설정합니다.

for count in 0...49 {
      UIView.animateWithDuration(0.3, animations: {
        self.cardSetList[count].center = self.landscapeCardBack.center
      })
      self.view.layoutIfNeeded()
    }
    self.shuffleButton.userInteractionEnabled = true
    self.shuffleButton.setTitle("Cut Card", forState: .Normal)

카드를 씻은 후의 수요는 카드를 자르는 것이다. 시간 때문에 다음 주에 후속 애니메이션 효과를 계속 업데이트할 것이다.
위에서 말한 것은 편집자가 여러분께 소개한 Swift 카드 세탁 애니메이션 효과의 실현 방법입니다. 여러분께 도움이 되었으면 합니다. 만약에 궁금한 것이 있으면 저에게 메시지를 남겨 주십시오. 편집자는 제때에 답장을 드리겠습니다.여기에서도 저희 사이트에 대한 지지에 감사드립니다!