iOS Development Facebook Pop Action Library tutorial

If origami is the dynamic prototyping tool behind Facebook paper, pop is the foundation of origami. Thanks to Facebook's open-source pop action library, everyone can make gorgeous moves. We take 5 steps to get the cool action done.

Step 1: Install

To install pop using cocoapods, you only need to include this line in the Podfile:

Pod ' pop ', ' ~> 1.0 '

Or if you want to add it manually, refer to the description in pop GitHub:

In

addition, you can add the project to the workspace and then use the provided configuration file. or manually copy the files under the pop subdirectory and copy them to the project. If you choose to install manually, make sure that the C + + standard library is chained to it, just include-lc++ in the project LINK tag.

Facebook Pop Action Library: Https://github.com/facebook/pop

If you don't know how to use Cocoapods, take a look at this tutorial:

"Cocoapods Easy to use guide"

Step 2: Add a pop to the project

Add the following at the beginning of the project:

#import <POP/POP.h>

Step 3: Create a dynamic effect

Use Pop to create 4 types of dynamic effects:: Spring, Decay, basic and custom.

Spring (elastic) dynamic effect can give the object a pleasant elasticity

* = [Popspringanimation Animationwithpropertynamed:kpoplayerbounds];

Decay (attenuation) motion can be used to gradually slow down the object's speed to stop

* = [Popdecayanimation Animationwithpropertynamed:kpoplayerpositionx];

Basic

(Basic) motion can be inserted in the movement of a given time to adjust the rhythm of the Movement

* = [Popbasicanimation Animationwithpropertynamed:kpopviewalpha];

Custom

(customized) dynamic effect allows design values to create custom effects, simply handle cadisplaylink and contact time-motion relationships

In this short tutorial will not cover the custom dynamic, you can look at the pop github to get more advanced knowledge https://github.com/facebook/pop

Step 4: Add properties to the action

Pop allows us to set the properties of the dynamic effect:

Velocity:anim.velocity = @ (1000.);

FromValue:anim.fromValue = @ (0.0);

ToValue:anim.toValue = @ (1.0);

Bounciness:anim.springBounciness = 10;

Step 5: Move Up

To get the object moving, just add the things you created in step 3 to the view.

[Self.yourView.layer pop_addanimation:anim forkey:@ "Typeanameforyouranimationhere"];

This is a simple tutorial to create a pop action. You can look at examples to understand how to create a dynamic effect. Strive to become skilled.

Step 6: Test the effect

Pop has associated file extensions as a test. The way to install the test file is to use the terminal to enter the pop root directory, and then enter

Pod Install

You must ensure that the Cocoapods is installed

# dynamic Case

This action will reduce the button to half

[Self.button.layer pop_addanimation:scaleanimation forkey:@ "Scaleanim"];

This action will rotate the button

Popspringanimation *rotationanimation = [Popspringanimation animationwithpropertynamed:kpoplayerrotation];

Rotationanimation.begintime = cacurrentmediatime () + 0.2;

[Button.layer pop_addanimation:rotationanimation forkey:@ "Rotationanim"];

This changes the transparency:

* = [Popbasicanimation animationwithpropertynamed:kpoplayeropacity];

= @ (0.5);

[Animview.layer pop_addanimation:opacityanimation forkey:@ "Opacityanimation"];

#更多

Pop Github:https://github.com/facebook/pop

Popping-pop Case: https://github.com/schneiderandre/popping

Pop usage Tutorial: https://github.com/maxmyers/FacebookPop

Chinese tutorials

Pop usage guide (from Cocohina)

Replace Uiscrollview's deceleration animation (from Cocohina) with Facecebook's pop frame

Facebook POP Advanced Guide (from Cocohina)

iOS Development Facebook Pop Action Library tutorial