faceBook POP

5 Steps For Using Facebook Pop


// 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(选择一种动画类别)

1,

POPBasicAnimation     (基本)动效可以在给定时间的运动中插入数值调整运动节奏

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

// kCAMediaTimingFunctionLinear  kCAMediaTimingFunctionEaseIn  kCAMediaTimingFunctionEaseOut  kCAMediaTimingFunctionEaseInEaseOut

2,

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

3,

POPDecayAnimation    (衰减) 动效可以用来逐渐减慢物体的速度至停止

Step 2 Decide if you will animate a view property or layer property (步骤2决定是否将动画视图属性或图层属性)


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


Step 3 Find your property below then add and set .toValue  (步骤3找到下面你的财产,然后添加和设置。价值)


View Properties (View 属性)

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(Layer 属性)(同上)

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 (别忘了代理)


三个代理方法

- (void)pop_animationDidStart:(POPAnimation *)anim;

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

- (void)pop_animationDidReachToValue:(POPAnimation *)aim;

例子:

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(把动画加到View上面)


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


完整的例子:

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

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"];

你可能感兴趣的:(faceBook POP)