转 脸书pop动画的五个步骤
http://blog.csdn.net/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"];
也不算是翻译,就是贴一个官方的例子,理解起来容易一点.如有不对之处,请指出,及时改正.
