The realization method of Swift shuffle animation effect

Target effect: after clicking the animation button, each card rotates and spreads to any position in the upper half of the screen, and then returns to the initial position, which is similar to the LOL men's knife skill animation:)

1: create a card object

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)

I created each card as an UIImageView, and in order to manipulate the CARDS later I used an array to hold them in the same position and created them and then sent an setCreated message to the viewer of the page with a local notification that card set had been created and could start the second animation

2. First, the user interaction of the button to start the animation needs to be closed. If the button is open, 50 CARDS will be created for each successive click, resulting in the program getting stuck or even hanging

So delayTime here is adding a delay to the thread just to keep the animation from being too stiff

Each loop to corresponding subscript card add rotation animation objects, and change its origin, I thought before UIView animation is used to implement the animation for each card add bezier curve, then really controllability is higher, but due to time relationship I still took only a UIViewAnimation, add rotation animation is used to card POP animation library implementation, used here is Basic animation. This will step 1 at the end of each token rotation and spread out to a different location, and triggers local notice at the end of the delayTime send shuffleFinished, this page The top observer will perform the next animation by restoring each card to its starting point

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: restore each card to its original position, and set title of button to the card cutting state.

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)

After shuffling, the demand is to cut the CARDS. Due to time, the following animation effect will be updated next week.