Simple Animations Using Facebook’s Pop Framework

Installing CocoaPods

Install CocoaPods on System.CocoaPods Guides.

OR

If you have already added CocoaPods to your project then you’ll just need to add the following line to your Podfile:

pod 'pop'

Basic Animation

Basic animations make linear, ease-in, ease-out, and ease-in-ease-out animations simple to leverage.

In given example, I’m simply rotating the view. POPBasicAnimation class is used for Basic Animation. POPBasicAnimation has several different properties, but I have used toValue, fromValue, duration to define the behavior of the view.

Steps:

1. Import framework in your UIViewController class: import pop
2. Create the outlet variables for UIView.
   

   @IBOutlet weak var animView: UIView!

   
   
3. Create POPBasicAnimation object with using Layer Properties.
   

   let anim = POPBasicAnimation(propertyNamed: kPOPLayerRotation)

4. Set the toValue, fromValue, duration of the animation.
   

   anim?.fromValue = 0
   anim?.toValue = Double.pi
   anim?.duration = 0.5

5. Add animation to View or Layer.
   

   animView.layer.pop_add(anim, forKey: "basicAnimation")

   
   NOTE: You can set any string as key
6. Implement button action method.
   

   func prepareForBasicAnimation() {
        		let anim = POPBasicAnimation(propertyNamed: kPOPLayerRotation)
         	    anim?.fromValue = 0
           	anim?.toValue = Double.pi
           	anim?.duration = 0.5
           	animView.layer.pop_add(anim, forKey: "basicAnimation")
       }

   
   

   @IBAction func btnAnimationTap(_ sender: UIButton) {
           	prepareForBasicAnimation()
       	}

Spring Animation

Here in the demo app, I have given the Bouncing effect to Rounded View when it moves up and down. There is one UISlider to set springBounciness of UIView. POPSpringAnimation class is used for Spring Animation. POPSpringAnimation has properties like springBounciness, springSpeed to define the behavior of spring. We can apply constraints to the object we wish to move. We can modify the value of kPOPLayoutConstraintConstant to animate our interface object.

Steps:

1. Import framework in your UIViewController class: import pop
2. Create the outlet for ballView, slider and vertical center constraint constant of UIView. Your code should look like this:
   

   @IBOutlet weak var ballView: UIView!
   @IBOutlet weak var slider: UISlider!
   @IBOutlet weak var ballCenterYConstraint: NSLayoutConstraint!

   
   
3. Here is Bool for to know Up/Down status
   

   var atTop: Bool = false

4. In the viewDidLoad method, add the following line of code to set UISlider minimum and maximum value.
   

   slider.minimumValue = 8.0
   slider.maximumValue = 20.0

5. Create POPSpringAnimation object by using NSLayoutConstraint Property.
   

   let spring = POPSpringAnimation(propertyNamed: kPOPLayoutConstraintConstant)

6. Set the toValue, springBounciness, springSpeed of animation.
   

   spring?.toValue = 100
   spring?.springBounciness = 8.0
   spring?.springSpeed = 8

7. Add animation to UIView vertical center constraint
   

   ballCenterYConstraint.pop_add(spring, forKey: "moveUp")

8. Same code for MoveDown, just change value to -100.
   

   func animateBottom() {
   let spring = POPSpringAnimation(propertyNamed: kPOPLayoutConstraintConstant)
           	spring?.toValue = -100
           	spring?.springBounciness = bounciness
           	spring?.springSpeed = 8
           	ballCenterYConstraint.pop_add(spring, forKey: "moveDown")
       	}

9. Implement button action method.
   

   func animateTop() {
           let spring = POPSpringAnimation(propertyNamed: kPOPLayoutConstraintConstant)
           spring?.toValue = 100
           spring?.springBounciness = bounciness
           spring?.springSpeed = 8
           ballCenterYConstraint.pop_add(spring, forKey: "moveUp")
       }

   
   

   func animateBottom() {
           let spring = POPSpringAnimation(propertyNamed: kPOPLayoutConstraintConstant)
           spring?.toValue = -100
           spring?.springBounciness = bounciness
           spring?.springSpeed = 8
           ballCenterYConstraint.pop_add(spring, forKey: "moveDown")
       }

   
   

   @IBAction func btnAnimationTap(_ sender: UIButton) {
           if atTop {
               animateBottom()
           } else {
               animateTop()
           }
           atTop = !atTop
       }

Decay Animation

Decay makes a movement to an eventual slow end. Decay use velocity as an input. In the demo app, I have given slow end effect to Rounded View. POPDecayAnimation class is used for Decay Animation. POPDecayAnimation has a property called velocity.

Steps:

1. Import framework in your UIViewController class: import pop.
2. Create the outlet variables for UIView and UISlider, as well as, Vertical Center Constraint Constant of UIView. Your outlet variable should look like this:
   

   @IBOutlet weak var ballView: UIView!
   @IBOutlet weak var ballCenterYConstraint: NSLayoutConstraint!

   
   
3. Create POPDecayAnimation object with using NSLayoutConstraint Property.
   

   let spring = POPDecayAnimation(propertyNamed: kPOPLayoutConstraintConstant)

4. Set the velocity of animation.
   

   spring?.velocity = NSValue(cgPoint: CGPoint(x: -642.0, y: 0))

5. Add animation to UIView vertical center constraint.
   

   ballCenterYConstraint.pop_add(spring, forKey: "move")

6. Implement button action method.
   

   func prepareForDecayAnimation() {
           let spring = POPDecayAnimation(propertyNamed: kPOPLayoutConstraintConstant)
           spring?.velocity = NSValue(cgPoint: CGPoint(x: -642.0, y: 0))
           rightBallCenterY.pop_add(spring, forKey: "move")
   }

   
   

   @IBAction func btnAnimationTap(_ sender: UIButton) {
           rightBallCenterY.constant = 160 //Reset your View Position Y 
           prepareForDecayAnimation()
   }

Delegation Handling

POP comes with a couple of delegate methods that alert you to particular events. We can take advantage of these when we are stacking animations in order to get the feeling you are looking for.

When one of these methods are called you can check the animation name to verify the animation in the one you need. For example:

let sprintAnimation = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)
sprintAnimation?.velocity = NSValue(cgPoint: CGPoint(x: 8.0, y: 8.0))
sprintAnimation?.springBounciness = 20.0
sprintAnimation?.name = "send"
sprintAnimation?.delegate = self
btnSend.pop_add(sprintAnimation, forKey: "sendAnimation")

Some POPAnimationDelegate are:

// Called on animation start.
    func pop_animationDidStart(_ anim: POPAnimation!) {
        if anim.name == "send" {
            // perform a new animation or action
        }
    }

    // Called when value meets or exceeds to value.
    func pop_animationDidReach(toValue anim: POPAnimation!) {
        if anim.name == "send" {
            // perform a new animation or action
        }
    }

    // Called on animation stop.
    func pop_animationDidStop(_ anim: POPAnimation!, finished: Bool) {
        if anim.name == "send" {
            // perform a new animation or action
        }
    }

    // Called each frame animation is applied
    func pop_animationDidApply(_ anim: POPAnimation!) {
        if anim.name == "send" {
            // perform a new animation or action
        }
    }

#Example Highlighted UITableViewCell

Go to your UITableViewCell class and override the setHighlighted method using the given code snippet:

override func setHighlighted(_ highlighted: Bool, animated: Bool) {
        super.setHighlighted(highlighted, animated: animated)
        if highlighted {
            let scaleAnimation = POPBasicAnimation(propertyNamed: kPOPViewScaleXY)
            scaleAnimation?.duration = 0.1// defaults to 0.4
            scaleAnimation?.toValue = NSValue(cgPoint: CGPoint(x: 1.0, y: 1.0))
            self.lblTitle.pop_add(scaleAnimation, forKey: "scaleAnimation")
        } else {
            let springAnimation = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)
            springAnimation?.toValue = NSValue(cgPoint: CGPoint(x: 0.9, y: 0.9))
            springAnimation?.velocity = NSValue(cgPoint: CGPoint(x: 2.0, y: 2.0))
            springAnimation?.springBounciness = 20.0//from 1 to 20
            self.lblTitle.pop_add(springAnimation, forKey: "springAnimation")
        }
    }

Properties To Know

• toValue: id // value type should match the property
• fromValue: id // value type should match the property
• velocity: id
• springBounciness: CGFloat // from 1 to 20
• springSpeed: CGFloat // from 1 to 20
• repeatForever: Bool // a convenient way to loop an animation
• duration: CFTimeInterval // defaults to 0.4
• beginTime: CFTimeInterval // if you want to delay the beginning of an animation
• name: NSString // identify the animation when delegate methods are called
• autoreverses: Bool // this will complete one full animation cycle; use repeateForever to loop the effect

Note: There are a number of predefined animation properties in the POPAnimatableProperty.h file that will help you make your animation.