转 脸书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"];
也不算是翻译,就是贴一个官方的例子,理解起来容易一点.如有不对之处,请指出,及时改正.
时间: 2024-10-15 04:56:55

转 脸书pop动画的五个步骤的相关文章

Github项目解析(九)--&gt;实现Activity跳转动画的五种方式

转载请标明出处:一片枫叶的专栏 上一篇文章中我们讲解了在Activity启动过程中获取组件宽高的五种方式.在Activity的启动过程中如果我们直接在生命周期方法中通过view.getWidth()或者是view.getHeight()方法获取组件的宽度和高度其结果都是0,为什么会出现这个问题呢? 其实看过我以前写过的Activity启动流程  Activity布局加载流程  Activity布局绘制流程  的同学应该对Activity的启动流程和其布局加载绘制流程不陌生,Activity的启动

POP动画引擎中Layer与CALayer的一点区别

POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲一下POP动画引擎中Layer与CALayer的区别: 这里, 代码做的都是同一个效果: 执行位移动画3秒, 然后在1秒后移除所有动画 使用POP效果图: 使用CALayer效果图: 可以看到, POP执行的动画当动画被移除之后, 被执行对象保留了被停止时的状态 而CALayer执行的动画当动画被移

POP动画[2]

POP动画[2] 1:定制控制器间的转场动画. 源码有点多-_-!! // // RootViewController.h // Animation // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.h // // RootViewContro

自定义UINavigationController push和pop动画

http://segmentfault.com/q/1010000000143983 默认的UINavigationController push和pop的默认动画都是左右滑动推出,我的应用要求这种界面切换的动画效果复杂一点,大概有这么几个: 更快的左右推出,默认是0.3秒,我需要快一倍 带抖动的左右推出 水平翻转 纸张翻页效果 但是这些切换都要放在NavigationController里做管理,怎么实现,求个思路 ios 链接 评论 更多 默认排序时间排序 3 个回答 答案对人有帮助,有参考

POP动画[1]

POP动画[1] pop动画是facebook扩展CoreAnimation的,使用及其方便:) 1:Spring系列的弹簧效果(两个动画kPOPLayerBounds与kPOPLayerCornerRadius同时运行) #import "RootViewController.h" #import "YXEasing.h" #import "POP.h" #import "YXGCD.h" @interface RootVi

swift详解之二十七------------自定义UINavigationController的push和pop动画

自定义UINavigationController的push和pop动画 我们这里先创建一个简单的工程 , 在storyboard 中拖一个导航控制器 , rootViewController 改成我们的ViewController . 为了实现自定义动画切换 , 我们需要实现两个协议 . UIViewControllerAnimatedTransitioning,UINavigationControllerDelegate UIViewControllerAnimatedTransitioni

Facebook POP动画简单使用

简单实用POP动画 发现POP比较好的一点是保留了动画结束后的状态,通过block回调.使用POPAnimatableProperty 可以快速添加基本动画,也可以自定义属性动画. 弹性动画 - (void)spring{ POPSpringAnimation* framePOP = [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor]; framePOP.springSpeed = 10.f; frame

POP动画[3]

这一节主要讲解POP动画的自定义动画属性. POP动画中有一个参数,叫timingFunction,与CoreAnimation中的一个参数CAMediaTimingFunction基本一样,下图表示的是kCAMediaTimingFunctionEaseInEaseOut的曲线图. 下图是Spring动画效果: 我们可以使用自定义的属性来实现POP的库中没有提供的动画. 实现的效果: 源码: // // RootViewController.m // YXPOP // // Copyright

写作的五个步骤

非小说.情感直诉文字的常用写作步骤可以是: 1.搭建框架 以章为单位精确到最细的一级目录.每个目录下先写出两三句话说明这一段的主要内容和核心观点,保证章节的整体思路通畅. 2.填充文字 把自己平常积累的文字剪切到符合主题的小节中,补写缺少的内容.不考虑文字细节,把想说的都写出来,保证速度,利用零散的时间来完成. 3.理顺逻辑 按顺序通读文章,重点关注段落.句子间的逻辑通畅.主要是调整段落.句子的位置,增加过渡句,删除废话. 4.调整风格 关注语言的一致性,增加例子,对话.增删图标,简化内容,添加