Target effect: After clicking the animation button, each card rotates and spreads to any position in the upper half of the screen and returns to the initial position. More like the skill animation of the LOL male knife: )
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)Create each card as a UIImageView. In order to operate these cards later, I use an array to hold them in the same position. After creating it, I send a setCreated message using a local notification to tell the observer of this page that the card set has been created and can start executing the second animation.
2: First, you need to turn off the user interaction of the button that starts the animation. If it is on, clicking continuously will create 50 cards every time, resulting in the program being stuck or even hanging
The delayTime here is to add a delay time to the thread just to make the animation less rigid
Each time I looped to add a rotation animation to the corresponding subscript card object and changed its origin. Before I implemented this animation with UIView animation, I thought about adding a Bezier curve to each card. That would be more controllable. However, due to time, I only used UIViewAnimation. The rotation animation added to the card is implemented using the POP animation library, which uses Basic animation here. After this step, each card will be rotated and spread to different positions. When delayTime ends and triggers the local notification to send shuffleFinished, the observer of this page will execute the next animation, that is, restore each card to the starting point of the animation.
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 the initial position and set the button title 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)The need for cards to be cut after the card is to cut cards. Due to time reasons, the subsequent animation effects will continue to be updated next week...
The above is the method of implementing the Swift reshuffle animation effect introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!