Simple Animations Using Facebook’s Pop Framework

Overview

The Facebook’s open source animation framework named Pop was first released in late April 2014, that powers the animations in the Paper for iOS app. Pop Framework becomes easy to use if you have worked on Apple’s Core Animation before. Even if you have not, writing a basic animation using Pop is very easy.

Once you spend time on iOS animation, You will face lots of crazy things and too many LOCs to perform even a small task, but here Facebook’s pop animation framework will help you to overcome that.

Pop is an extensible animation engine for both iOS and OS X. It supports basic, spring, decay and custom animations.

There are a couple of things to adore about this library:

  1. It’s easy to use and fun
  2. It plays well with auto layout by allowing you to interact at the layer level
  3. You can animate constraints when needed
  4. It supports spring and dynamic animations

I’m expecting that you know about making new XCode project, so I’m skipping that part.

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:

Basic Animation

linear animation

ease-in

ease-out

easein-out

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.

  3. Create POPBasicAnimation object with using Layer Properties.
  4. Set the toValue, fromValue, duration of the animation.
  5. Add animation to View or Layer.

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

basic-animation

Spring Animation

spring

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:

    spring-animation-step2
  3. Here is Bool for to know Up/Down status
  4. In the viewDidLoad method, add the following line of code to set UISlider minimum and maximum value.
  5. Create POPSpringAnimation object by using NSLayoutConstraint Property.
  6. Set the toValue, springBounciness, springSpeed of animation.
  7. Add animation to UIView vertical center constraint
  8. Same code for MoveDown, just change value to -100.
  9. Implement button action method.


spring-animation

Decay Animation

decay

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:

    decay-animation-step2
  3. Create POPDecayAnimation object with using NSLayoutConstraint Property.
  4. Set the velocity of animation.
  5. Add animation to UIView vertical center constraint.
  6. Implement button action method.

decay-animation

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:

Some POPAnimationDelegate are:

#Example Highlighted UITableViewCell

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

highlighted-cell

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.

mm

Nishal Solanki iOS Developer

I am Nishal Solanki, iOS Developer at Yudiz Solutions Pvt. Ltd. - a leading iPhone App development company. I have a deep rooted inclination towards learning and developing creative application that would ultimately lead to converting the clients idea into reality and satisfy them.

Comments are closed.

Top