wujunyang/facebookPopTest wujunyang/facebookPopTest

  • Stars
    star
    103
  • Rank 333,046 (Top 7 %)
  • Language
    Objective-C
  • Created over 8 years ago
  • Updated almost 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
wujunyang/facebookPopTest
github

wujunyang

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

动画实现的一些常见功能及实现方式，不断更新中....

facebookPopTest

关于facebook开源动画库Pop的练习实例

运行效果图

一：关于Poping一些使用知识点

5 使用Poping只要简单五步就可以实现

  // 1. Pick a Kind Of Animation //  POPBasicAnimation  POPSpringAnimation POPDecayAnimation
  POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

  // 2. Decide weather you will animate a view property or layer property, Lets pick a View Property and pick kPOPViewFrame
  // View Properties - kPOPViewAlpha kPOPViewBackgroundColor kPOPViewBounds kPOPViewCenter kPOPViewFrame kPOPViewScaleXY kPOPViewSize
  // Layer Properties - kPOPLayerBackgroundColor kPOPLayerBounds kPOPLayerScaleXY kPOPLayerSize kPOPLayerOpacity kPOPLayerPosition kPOPLayerPositionX kPOPLayerPositionY kPOPLayerRotation kPOPLayerBackgroundColor
  basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];

  // 3. Figure Out which of 3 ways to set toValue
   //  anim.toValue = @(1.0);
  //  anim.toValue =  [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
  //  anim.toValue =  [NSValue valueWithCGSize:CGSizeMake(40, 40)];
  basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];

  // 4. Create Name For Animation & Set Delegate
   basicAnimation.name=@"AnyAnimationNameYouWant";
   basicAnimation.delegate=self

  // 5. Add animation to View or Layer, we picked View so self.tableView and not layer which would have been self.tableView.layer
  [self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

Step 1 Pick Kind of Animation

POPBasicAnimation

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
// kCAMediaTimingFunctionLinear  kCAMediaTimingFunctionEaseIn  kCAMediaTimingFunctionEaseOut  kCAMediaTimingFunctionEaseInEaseOut

POPSpringAnimation

POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
springAnimation.velocity=@(1000);       // change of value units per second
springAnimation.springBounciness=14;    // value between 0-20 default at 4
springAnimation.springSpeed=3;     // value between 0-20 default at 4

POPDecayAnimation

POPDecayAnimation *decayAnimation=[POPDecayAnimation animation];
decayAnimation.velocity=@(233); //change of value units per second
decayAnimation.deceleration=.833; //range of 0 to 1

Example

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

Step 2 Decide if you will animate a view property or layer property

View Properties

Alpha - kPOPViewAlpha
Color - kPOPViewBackgroundColor
Size - kPOPViewBounds
Center - kPOPViewCenter
Location & Size - kPOPViewFrame
Size - kPOPViewScaleXY
Size(Scale) - kPOPViewSize

Layer Properties

Color - kPOPLayerBackgroundColor
Size - kPOPLayerBounds
Size - kPOPLayerScaleXY
Size - kPOPLayerSize
Opacity - kPOPLayerOpacity
Position - kPOPLayerPosition
X Position - kPOPLayerPositionX
Y Position - kPOPLayerPositionY
Rotation - kPOPLayerRotation
Color - kPOPLayerBackgroundColor

Example

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

Note: Works on any Layer property or any object that inherits from UIView such as UIToolbar | UIPickerView | UIDatePicker | UIScrollView | UITextView | UIImageView | UITableViewCell | UIStepper | UIProgressView | UIActivityIndicatorView | UISwitch | UISlider | UITextField | UISegmentedControl | UIButton | UIView | UITableView

Step 3 Find your property below then add and set .toValue

View Properties

Alpha - kPOPViewAlpha
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewAlpha];
basicAnimation.toValue= @(0); // scale from 0 to 1
Color - kPOPViewBackgroundColor
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPViewBackgroundColor];
basicAnimation.toValue= [UIColor redColor];
Size - kPOPViewBounds
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewBounds];
basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)]; //first 2 values dont matter
Center - kPOPViewCenter
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewCenter];
basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
Location & Size - kPOPViewFrame
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(140, 140, 140, 140)];
Size - kPOPViewScaleXY
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];
basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(3, 2)];
Size(Scale) - kPOPViewSize
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewSize];
basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(30, 200)];

Layer Properties

Color - kPOPLayerBackgroundColor
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor];
basicAnimation.toValue= [UIColor redColor];
Size - kPOPLayerBounds
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBounds];
basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(0, 0, 90, 90)]; //first 2 values dont matter
Size - kPOPLayerScaleXY
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerScaleXY];
basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(2, 1)];//increases width and height scales
Size - kPOPLayerSize
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];
basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(200, 200)];
Opacity - kPOPLayerOpacity
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerOpacity];
basicAnimation.toValue = @(0);
Position - kPOPLayerPosition
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPosition];
basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(130, 130, 0, 0)];//last 2 values dont matter
X Position - kPOPLayerPositionX
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPositionX];
basicAnimation.toValue= @(240);
Y Position - kPOPLayerPositionY
POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property=[POPAnimatableProperty propertyWithName:kPOPLayerPositionY];
anim.toValue = @(320);
Rotation - kPOPLayerRotation
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];
basicAnimation.toValue= @(M_PI/4); //2 M_PI is an entire rotation

Note: Property Changes work for all 3 animation types - POPBasicAnimation POPSpringAnimation POPDecayAnimation

Example

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];
basicAnimation.toValue= @(M_PI/4); //2 M_PI is an entire rotation

Step 4 Create Name & Delegate For Animation

basicAnimation.name=@"WhatEverAnimationNameYouWant";
basicAnimation.delegate=self;
Declare Delegate Protocol <POPAnimatorDelegate>

Delegate Methods

<POPAnimatorDelegate>

- (void)pop_animationDidStart:(POPAnimation *)anim;
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;

Example

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];
basicAnimation.name=@"WhatEverAnimationNameYouWant";
basicAnimation.delegate=self;

Step 5 Add animation to View

 [self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

Example

  POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
  basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];
  basicAnimation.name=@"SomeAnimationNameYouChoose";
  basicAnimation.delegate=self;
  [self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

二：关于Poping一些注意点

1：组动画的效果实现，同时写就会同时进行，就有组的效果

    POPSpringAnimation *Annimation1 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
    Annimation1.springSpeed = 40.0f;
    Annimation1.springBounciness = 30.0f;
    Annimation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0.3, 0.3)];
    Annimation1.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)];
    POPSpringAnimation *Annimation2 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
    Annimation2.springSpeed = 40.0f;
    Annimation1.springBounciness = 30.0f;
    Annimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    [_Subview pop_addAnimation:Annimation1 forKey:@"Scale"];
    [_Subview pop_addAnimation:Annimation2 forKey:@"Move"];

2：关于连续动画的效果

 anim.completionBlock = ^(POPAnimation *anim, BOOL finished) { 
  if (finished) {
     NSLog(@"Animation finished!");
     //加入新的动画
     }};

3：可以实现委托POPAnimatorDelegate关于动画前后的一些操作处理

- (void)pop_animationDidStart:(POPAnimation *)anim;
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;

4：POPBasicAnimation提供四种timingfunction(很熟悉，对不对? 就是Core Animation中那些)

kCAMediaTimingFunctionLinear

kCAMediaTimingFunctionEaseIn

kCAMediaTimingFunctionEaseOut

kCAMediaTimingFunctionEaseInEaseOut

订阅号

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入数字：5 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；

More Repositories

1

MobileProject

一个基于MVC的项目框架，并集成一些常用的功能(不断更新中)
Objective-C
2,036
star
2

jiaModuleDemo

一个针对iOS模块化开发的解决方案(不断完善优化中)
Objective-C
715
star
3

MVVMReactiveCocoaDemo

ReactiveCocoa的知识点及MVVM模式运用（不断更新中....）
Objective-C
262
star
4

JiaCordova

在Cordova及插件的基础上封装一些常用的功能，不断更新中
Objective-C
33
star
5

iCloudProject

一个关于iCloud功能实例，实现登录一次后，删除APP再安装后默认登录
Objective-C
18
star
6

WJScrollMenu

滚动菜单插件
Objective-C
5
star
7

JenkinsProject

关于利用Jenkins进行自动打包
Objective-C
5
star
8

jiaCordovaDemo

一个关于Cordova的小实例
Objective-C
2
star
9

testCocoaPod

测试提交到官网Pod
Ruby
2
star
10

swiftProject

Swift基础知识学习及实例代码
Swift
2
star
11

MobileSwiftProject

Swift
2
star
12

WjySpecs

公共类存放Specs
Ruby
1
star
13

SiteManagement

一个基于微信小程序开发的项目
JavaScript
1
star
14

jiaGTSDK

包括个推的SDK
Objective-C
1
star