Use Swift to realize all kinds of CATransition animation details

  • 2020-06-01 11:06:41
  • OfStack


Recently, due to the need of work, I plan to use swift to reconstruct the existing project. In the process of implementation, I find that many system animations are used, because the previous ones are all realized by OC. Here, I mainly use some animation effects to achieve 1 through swift.

This article mainly implements the different effects of CATransition animation under 1.

Step 1 creates an swift file and declares the corresponding enumeration type

enum TransitionAnimType : Int {
case fade = 0,    // The fading 
push,      // push 
reveal,      // uncover 
moveIn,      // cover 
cube,      // The cube 
suckEffect,     // suck 
oglFlip,     // flip 
rippleEffect,    // corrugated 
pageCurl,     // Turn the page 
pageUnCurl,     // The page 
cameraIrisHollowOpen,  // Open the camera 
cameraIrisHollowClose,  // Close the camera 
curlDown,     // Next page 
curlUp,      // On the page 
flipFromLeft,    // Turn left 
flipFromRight,    // Turn right 
ramdom      // random 

enum TransitionSubType : Int {
case top = 0,    // on 
left,      // On the left 
bottom,      // Under the 
right,      // right 
ramdom      // random 

enum TransitionCurve : Int {
case Default = 0,   // The default 
EaseIn,      // Slowly into the 
EaseOut,     // Slowly out of the 
EaseInEaseOut,    // Slow in slow out 
Linear,      // linear 
Ramdom      // random 

The three enumerated types above represent:

TransitionAnimType: animation type TransitionSubType: direction of animation TransitionCurve: animated curves

Step 2. The custom function returns the animation type

///  Return animation type 
private func animationType(animType: TransitionAnimType) -> String {
 ///  Set the transition animation type 
 let animTypeArray = ["fade", "push", "reveal", "moveIn", "cube", "suckEffect", "oglFlip", "rippleEffect", "pageCurl", "pageUnCurl", "cameraIrisHollowOpen", "cameraIrisHollowClose", "curlDown", "curlUp", "flipFromLeft", "flipFromRight", "ramdom"]
 return objectFromDataSource(array: animTypeArray, index: animType.rawValue, isRamdom: (TransitionAnimType.ramdom == animType)) as! String

Step 3. The custom function returns the direction of the animation

///  Back to animation 
private func animationSubType(subType: TransitionSubType) -> String {
 let animSubTypeArray = [kCATransitionFromTop, kCATransitionFromLeft, kCATransitionFromBottom, kCATransitionFromRight]
 return objectFromDataSource(array: animSubTypeArray, index: subType.rawValue, isRamdom: (TransitionSubType.ramdom == subType)) as! String

Step 4. The custom function returns the animated curve

///  Back to the animation curve 
private func animationCurve(curve: TransitionCurve) -> String {
 let animCurveArray = [kCAMediaTimingFunctionDefault, kCAMediaTimingFunctionEaseIn, kCAMediaTimingFunctionEaseOut, kCAMediaTimingFunctionEaseInEaseOut, kCAMediaTimingFunctionLinear]
 return objectFromDataSource(array: animCurveArray, index: curve.rawValue, isRamdom: (TransitionCurve.Ramdom == curve)) as! String

In step 5, it is not difficult to find that we all use objectFromDataSource in the above three custom methods. It is not difficult to find from our parameters that it is used to return the specified data we need. Let's implement 1 of this method

///  system 1 Returns an object from the data 
private func objectFromDataSource(array: Array<Any>, index: Int, isRamdom: Bool) -> AnyObject {
 let count = array.count
 let i = isRamdom ? Int(arc4random_uniform(UInt32(count))) : index

 return array[i] as AnyObject

Step 6 ok, now that all the preparatory work has been done, let's take a look at the specific animation implementation method 1

func layerTransition(animTye: TransitionAnimType, subType: TransitionSubType, curve: TransitionCurve, duration: CGFloat, layer: CALayer) {
let key = "transition"
if layer.animation(forKey: key) != nil {
 layer.removeAnimation(forKey: key)
let transition = CATransition()

///  Animation duration 
transition.duration = CFTimeInterval(duration)

///  Animation types 
transition.type = animationType(animType: animTye)

///  The animation direction 
transition.subtype = animationSubType(subType: subType)

///  Slow function 
transition.timingFunction = CAMediaTimingFunction(name: animationCurve(curve: curve))

///  Complete animation delete 
transition.isRemovedOnCompletion = true

layer.add(transition, forKey: key)


And we're done! Let's go to the place where we need to use the animation and call the method we implemented in step 6. so easy! Ha ha

layerTransition(animTye: .ramdom, subType: .ramdom, curve: .Ramdom, duration: 2.0, layer: (self.view.window?.layer)!)

Does it feel very simple, the above code combination 1 can be directly used, there is a need to take away not thank you ~ ~


Related articles: