转 脸书pop动画的五个步骤

http://blog.youkuaiyun.com/u013741809/article/details/38511741

 

 

 

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 决定你要用视图属性或者是层的属性,此处选择了一个视图属性并且选择了 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 三种设置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)来添加,而不是层(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值的范围是0~20 默认为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 

对所有的层或者是任何继承UIView的子类像UIToolbar巴拉巴拉...

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 缩放的范围0~1 

Color - kPOPViewBackgroundColor

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation]; basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor]; 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)animatorWillAnimate:(POPAnimator *)animator;将要执行动画的方法 

- (void)animatorDidAnimate:(POPAnimator *)animator;执行完动画的方法 

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 给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=@"hiiidd"; basicAnimation.delegate=self; [self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

也不算是翻译,就是贴一个官方的例子,理解起来容易一点.如有不对之处,请指出,及时改正.

转载于:https://www.cnblogs.com/willbin/p/4350565.html