动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习;本文主要针对的是POPBasicAnimation运用;实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest

Pop Github : https://github.com/facebook/pop

Pop比较全的实例:https://github.com/kevinzhow/pop-handapp

Popping -Pop案例 : https://github.com/schneiderandre/popping

心跳案例POP:https://github.com/hanzhen/MiniMatch-iOS

POP使用教程: https://github.com/maxmyers/FacebookPop

POP默认支持三种动画 但同时也支持自定义动画

POPBasicAnimation //基本动画

POPSpringAnimation //类似弹簧一般的动画效果

POPDecayAnimation //过阻尼效果,衰减效果

POPCustomAnimation //自定义动画

一:POPBasicAnimation运用

实例1:创建一个动画效果,关于视图透明度的变化,从全透明经过五秒的时间变成alpha为1的不透明效果;此处运用到的POPBasicAnimation类;

  1. - (void)viewDidLoad {
  2. [super viewDidLoad];
  3.  
  4. self.view.backgroundColor=[UIColor whiteColor];
  5.  
  6. //1:初始化一个视图块
  7. if (self.myView==nil) {
  8. self.myView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  9. self.myView.backgroundColor=[UIColor redColor];
  10. self.myView.alpha=;
  11. [self.view addSubview:self.myView];
  12. }
  13.  
  14. //创建一个POPBasicAnimation动画
  15. POPBasicAnimation *basicAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
  16. basicAnimation.fromValue=@();
  17. basicAnimation.toValue=@();
  18. basicAnimation.duration=; //设置动画的间隔时间 默认是0.4秒
  19. basicAnimation.repeatCount=HUGE_VALF; //重复次数 HUGE_VALF设置为无限次重复
  20. [self.myView pop_addAnimation:basicAnimation forKey:@"myViewAnimation"];
  21. }

其实POP创建动画的步骤分为三步,a:创建相应的动画类 b:增加相应的属性 c:附加到相应的对象上;

上面实例中kPOPViewAlpha是POP为我们封装好的一个关于透明度的动画效果;加上属性就满足我们的要求;从而也引出POP中一个很关键的类POPAnimatableProperty,里面定义的一些常量在今后的运用中非常关键;

我们可以简单看一下POPAnimatableProperty里面定义的一些常量,因为主要针对IOS方面,所以就选出IOS相关的内容:

  1. /**
  2. Common CALayer property names.
  3. */
  4. extern NSString * const kPOPLayerBackgroundColor;
  5. extern NSString * const kPOPLayerBounds;
  6. extern NSString * const kPOPLayerCornerRadius;
  7. extern NSString * const kPOPLayerBorderWidth;
  8. extern NSString * const kPOPLayerBorderColor;
  9. extern NSString * const kPOPLayerOpacity;
  10. extern NSString * const kPOPLayerPosition;
  11. extern NSString * const kPOPLayerPositionX;
  12. extern NSString * const kPOPLayerPositionY;
  13. extern NSString * const kPOPLayerRotation;
  14. extern NSString * const kPOPLayerRotationX;
  15. extern NSString * const kPOPLayerRotationY;
  16. extern NSString * const kPOPLayerScaleX;
  17. extern NSString * const kPOPLayerScaleXY;
  18. extern NSString * const kPOPLayerScaleY;
  19. extern NSString * const kPOPLayerSize;
  20. extern NSString * const kPOPLayerSubscaleXY;
  21. extern NSString * const kPOPLayerSubtranslationX;
  22. extern NSString * const kPOPLayerSubtranslationXY;
  23. extern NSString * const kPOPLayerSubtranslationY;
  24. extern NSString * const kPOPLayerSubtranslationZ;
  25. extern NSString * const kPOPLayerTranslationX;
  26. extern NSString * const kPOPLayerTranslationXY;
  27. extern NSString * const kPOPLayerTranslationY;
  28. extern NSString * const kPOPLayerTranslationZ;
  29. extern NSString * const kPOPLayerZPosition;
  30. extern NSString * const kPOPLayerShadowColor;
  31. extern NSString * const kPOPLayerShadowOffset;
  32. extern NSString * const kPOPLayerShadowOpacity;
  33. extern NSString * const kPOPLayerShadowRadius;
  34.  
  35. /**
  36. Common CAShapeLayer property names.
  37. */
  38. extern NSString * const kPOPShapeLayerStrokeStart;
  39. extern NSString * const kPOPShapeLayerStrokeEnd;
  40. extern NSString * const kPOPShapeLayerStrokeColor;
  41. extern NSString * const kPOPShapeLayerFillColor;
  42. extern NSString * const kPOPShapeLayerLineWidth;
  43. extern NSString * const kPOPShapeLayerLineDashPhase;
  44.  
  45. /**
  46. Common NSLayoutConstraint property names.
  47. */
  48. extern NSString * const kPOPLayoutConstraintConstant;
  49.  
  50. #if TARGET_OS_IPHONE
  51.  
  52. /**
  53. Common UIView property names.
  54. */
  55. extern NSString * const kPOPViewAlpha;
  56. extern NSString * const kPOPViewBackgroundColor;
  57. extern NSString * const kPOPViewBounds;
  58. extern NSString * const kPOPViewCenter;
  59. extern NSString * const kPOPViewFrame;
  60. extern NSString * const kPOPViewScaleX;
  61. extern NSString * const kPOPViewScaleXY;
  62. extern NSString * const kPOPViewScaleY;
  63. extern NSString * const kPOPViewSize;
  64. extern NSString * const kPOPViewTintColor;
  65.  
  66. /**
  67. Common UIScrollView property names.
  68. */
  69. extern NSString * const kPOPScrollViewContentOffset;
  70. extern NSString * const kPOPScrollViewContentSize;
  71. extern NSString * const kPOPScrollViewZoomScale;
  72. extern NSString * const kPOPScrollViewContentInset;
  73. extern NSString * const kPOPScrollViewScrollIndicatorInsets;
  74.  
  75. /**
  76. Common UITableView property names.
  77. */
  78. extern NSString * const kPOPTableViewContentOffset;
  79. extern NSString * const kPOPTableViewContentSize;
  80.  
  81. /**
  82. Common UICollectionView property names.
  83. */
  84. extern NSString * const kPOPCollectionViewContentOffset;
  85. extern NSString * const kPOPCollectionViewContentSize;
  86.  
  87. /**
  88. Common UINavigationBar property names.
  89. */
  90. extern NSString * const kPOPNavigationBarBarTintColor;
  91.  
  92. /**
  93. Common UIToolbar property names.
  94. */
  95. extern NSString * const kPOPToolbarBarTintColor;
  96.  
  97. /**
  98. Common UITabBar property names.
  99. */
  100. extern NSString * const kPOPTabBarBarTintColor;
  101.  
  102. /**
  103. Common UILabel property names.
  104. */
  105. extern NSString * const kPOPLabelTextColor;
  106.  
  107. #else
  108.  
  109. /**
  110. Common NSView property names.
  111. */
  112. extern NSString * const kPOPViewFrame;
  113. extern NSString * const kPOPViewBounds;
  114. extern NSString * const kPOPViewAlphaValue;
  115. extern NSString * const kPOPViewFrameRotation;
  116. extern NSString * const kPOPViewFrameCenterRotation;
  117. extern NSString * const kPOPViewBoundsRotation;
  118.  
  119. /**
  120. Common NSWindow property names.
  121. */
  122. extern NSString * const kPOPWindowFrame;
  123. extern NSString * const kPOPWindowAlphaValue;
  124. extern NSString * const kPOPWindowBackgroundColor;
  125.  
  126. #endif

其实常量对应到其每个UIKIT的一个属性上,下面把部分列出来,就可以了解到动画效果是针对什么属性进行

  1. NSString * const kPOPLayerBackgroundColor = @"backgroundColor"; //背景色
  2. NSString * const kPOPLayerBounds = @"bounds"; //坐标
  3. NSString * const kPOPLayerCornerRadius = @"cornerRadius"; //圆形 值越大,角就越圆
  4. NSString * const kPOPLayerBorderWidth = @"borderWidth"; //边框宽度
  5. NSString * const kPOPLayerBorderColor = @"borderColor"; //边框色
  6. NSString * const kPOPLayerOpacity = @"opacity"; //透明度
  7. NSString * const kPOPLayerPosition = @"position"; //位置 position是相对于屏幕的
  8. NSString * const kPOPLayerPositionX = @"positionX";
  9. NSString * const kPOPLayerPositionY = @"positionY";
  10. NSString * const kPOPLayerRotation = @"rotation"; //旋转
  11. NSString * const kPOPLayerRotationX = @"rotationX";
  12. NSString * const kPOPLayerRotationY = @"rotationY";
  13. NSString * const kPOPLayerScaleX = @"scaleX"; //缩放系数
  14. NSString * const kPOPLayerScaleXY = @"scaleXY"; //XY缩放系数
  15. NSString * const kPOPLayerScaleY = @"scaleY"; //Y缩放系数
  16. NSString * const kPOPLayerSize = @"size"; //大小
  17. NSString * const kPOPLayerSubscaleXY = @"subscaleXY";
  18. NSString * const kPOPLayerSubtranslationX = @"subtranslationX";
  19. NSString * const kPOPLayerSubtranslationXY = @"subtranslationXY";
  20. NSString * const kPOPLayerSubtranslationY = @"subtranslationY";
  21. NSString * const kPOPLayerSubtranslationZ = @"subtranslationZ";
  22. NSString * const kPOPLayerTranslationX = @"translationX"; //X轴平移量
  23. NSString * const kPOPLayerTranslationXY = @"translationXY"; //XY轴平移量
  24. NSString * const kPOPLayerTranslationY = @"translationY"; //Y轴平移量
  25. NSString * const kPOPLayerTranslationZ = @"translationZ"; //Z轴平移量
  26. NSString * const kPOPLayerZPosition = @"zPosition"; //遮挡属性
  27. NSString * const kPOPLayerShadowColor = @"shadowColor"; //设置阴影
  28. NSString * const kPOPLayerShadowOffset = @"shadowOffset"; //阴影偏移
  29. NSString * const kPOPLayerShadowOpacity = @"shadowOpacity"; //阴影透明度
  30. NSString * const kPOPLayerShadowRadius = @"shadowRadius"; //阴影半径
  31.  
  32. // CAShapeLayer
  33. NSString * const kPOPShapeLayerStrokeStart = @"shapeLayer.strokeStart";//strokeStart 动画的fromValue = 0,toValue = 1 表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失 strokeStart 动画的fromValue = 1,toValue = 0 表示从路径的1位置画到0 怎么画是按照清除开始的位置也就是1 这样开始的路径是空的(即都被清除掉了)一直清除到0 效果就是一条路径被反方向画出来
  34. NSString * const kPOPShapeLayerStrokeEnd = @"shapeLayer.strokeEnd";// strokeEnd 动画的fromValue = 0,toValue = 1 表示 这里我们分3个点说明动画的顺序 strokeEnd从结尾开始清除 首先整条路径先清除后2/3,接着清除1/3 效果就是正方向画出路径 strokeEnd 动画的fromValue = 1,toValue = 0 效果就是反方向路径慢慢消失
  35. NSString * const kPOPShapeLayerStrokeColor = @"shapeLayer.strokeColor"; //画笔的色
  36. NSString * const kPOPShapeLayerFillColor = @"shapeLayer.fillColor";
  37. NSString * const kPOPShapeLayerLineWidth = @"shapeLayer.lineWidth"; //线的宽度
  38. NSString * const kPOPShapeLayerLineDashPhase = @"shapeLayer.lineDashPhase";

从上面的源代码不难发现,其实针对不同的UIKit都有一些相应的常量,比如在UIView中就有我们上面实例中出现的kPOPViewAlpha;因为POP动画是针对对象的,所以很多的控件都可以做出相应的动画效果;CALayer、CAShapeLayer、UIView中相关的常量大部分控件都可以使用;注意像常量kPOPLayerRotation它是作用在层上,所以我们在使用时要把它加载到相应视图的layer上面;

实例2:创建一个动画效果,实现一个视图在延迟2s后经过5秒的时间X轴从50移到300位置的动画效果;

  1. //2:初始化一个视图块
  2. if (self.myXView==nil) {
  3. self.myXView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  4. self.myXView.backgroundColor=[UIColor blueColor];
  5. [self.view addSubview:self.myXView];
  6. }
  7.  
  8. //创建一个POPBasicAnimation动画 X轴的变化 从50移到300位置
  9. POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
  10. anBasic.toValue = @();
  11. anBasic.beginTime = CACurrentMediaTime() + 2.0f; //可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
  12. anBasic.duration=;//设置动画的间隔时间 默认是0.4秒
  13. [self.myXView pop_addAnimation:anBasic forKey:@"myBackColorViewAnimation”];

实例3:创建一个动画效果,实现视图的背影色经过5秒后从黑色变成黄色的动画效果;

  1. //3:初始化一个视图块
  2. if (self.myBackColorView==nil) {
  3. self.myBackColorView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  4. self.myBackColorView.backgroundColor=[UIColor blackColor];
  5. [self.view addSubview:self.myBackColorView];
  6. }
  7.  
  8. //创建一个POPBasicAnimation动画 视图的背影色从黑色经过5秒后渐进变成黄色
  9. POPBasicAnimation *anBackGroundBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
  10. anBackGroundBasic.toValue=[UIColor yellowColor];
  11. anBackGroundBasic.duration=;
  12. [self.myBackColorView pop_addAnimation:anBackGroundBasic forKey:@"myBackColorViewAnimation”];

从上面三个实例可以发现,其实toValue或FormValue的值都是根据动画属性类型来定义,因为它们都是id型;这也决定它们可以是任何类型的值,只要符合我们要求就行;

除了上面那些常用的属性外,还有一个运行CAMediaTimingFunction:速度控制函数属性;四种如下:

kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉

kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开

kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地

kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。

实例4:创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionLinear直线运行到中心点为100,64

  1. //4:初始化一个视图块
  2. if (self.mytimingFunctionLinearView==nil) {
  3. self.mytimingFunctionLinearView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  4. self.mytimingFunctionLinearView.backgroundColor=[UIColor greenColor];
  5. [self.view addSubview:self.mytimingFunctionLinearView];
  6. }
  7.  
  8. //创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionLinear直线运行到中心点为100,64
  9. POPBasicAnimation *anLinearBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
  10. anLinearBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(, )];
  11. anLinearBasic.duration=;
  12. anLinearBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  13. [self.mytimingFunctionLinearView pop_addAnimation:anLinearBasic forKey:@"myLinearBasic"];

实例5:创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionEaseInEaseOut直线运行到中心点为200,64

  1. //5:初始化一个视图块
  2. if (self.mytimingFunctionEaseInEaseOutView==nil) {
  3. self.mytimingFunctionEaseInEaseOutView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  4. self.mytimingFunctionEaseInEaseOutView.backgroundColor=[UIColor grayColor];
  5. [self.view addSubview:self.mytimingFunctionEaseInEaseOutView];
  6. }
  7.  
  8. //创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionEaseInEaseOut直线运行到中心点为200,64
  9. POPBasicAnimation *anEaseInEaseOutBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
  10. anEaseInEaseOutBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(, )];
  11. anEaseInEaseOutBasic.duration=;
  12. anEaseInEaseOutBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  13. [self.mytimingFunctionEaseInEaseOutView pop_addAnimation:anEaseInEaseOutBasic forKey:@"mytimingFunctionEaseInEaseOutView”];

POP比较好的一点是保留了动画结束后的状态,通过block回调。如下面的实例视图块的大小会被变成100*100

实例6:创建一个POPBasicAnimation动画 让视图块的大小从50*50 慢慢变到100*100

  1. //6:初始化一个视图块
  2. if (self.mySizeView==nil) {
  3. self.mySizeView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
  4. self.mySizeView.backgroundColor=[UIColor redColor];
  5. [self.view addSubview:self.mySizeView];
  6. }
  7.  
  8. //创建一个POPBasicAnimation动画 让视图块的大小从50*50 慢慢变到100*100
  9. POPBasicAnimation *ansizeBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
  10. ansizeBasic.toValue=[NSValue valueWithCGSize:CGSizeMake(, )];
  11. ansizeBasic.duration=;
  12. ansizeBasic.repeatCount=HUGE_VALF;
  13. [self.mySizeView pop_addAnimation:ansizeBasic forKey:@"mySizeView”];

setCompletionBlock可以在动画完成后做一些其它的操作;

实例7:创建一个POPBasicAnimation动画 让视图块的大小从60*30 慢慢变到100*100  动画完成后又有一个动画变成60*30

  1. //7:初始化一个Label
  2. if (self.myLabel==nil) {
  3. self.myLabel=[[UILabel alloc]initWithFrame:CGRectMake(, , , )];
  4. self.myLabel.backgroundColor=[UIColor redColor];
  5. self.myLabel.textAlignment=NSTextAlignmentCenter;
  6. self.myLabel.textColor=[UIColor whiteColor];
  7. self.myLabel.alpha=;
  8. self.myLabel.text=@"Label";
  9. [self.view addSubview:self.myLabel];
  10. }
  11.  
  12. //创建一个POPBasicAnimation动画 让视图块的大小从60*30 慢慢变到100*100 动画完成后又有一个动画变成60*30
  13. POPBasicAnimation* anLabelBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
  14. anLabelBasic.duration=3.0;
  15. anLabelBasic.toValue = [NSValue valueWithCGSize:CGSizeMake(, )];
  16. anLabelBasic.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  17. [anLabelBasic setCompletionBlock:^(POPAnimation *ani, BOOL fin) {
  18. if (fin) {
  19. NSLog(@"self.myLabel.frame=%@",NSStringFromCGRect(self.myLabel.frame));
  20.  
  21. POPBasicAnimation *newLabelAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
  22. newLabelAnimation.duration=3.0;
  23. newLabelAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(, )];
  24. newLabelAnimation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  25. [self.myLabel pop_addAnimation:newLabelAnimation forKey:@"newMyLabelAnimation"];
  26. }
  27. }];
  28. [self.myLabel pop_addAnimation:anLabelBasic forKey:@"myLabelAnimation"];

实例8:增加一个动画 类似心跳的效果,把动画封装在方法里面,方便进行递归调用;

  1. @property(nonatomic)CALayer *myCriLayer;
  2. @property (nonatomic) BOOL animated;
  3.  
  4. 初始化代码:
  5.  
  6. //8:初始化一个CALayer层
  7. if (self.myCriLayer==nil) {
  8. self.myCriLayer=[CALayer layer];
  9. [self.myCriLayer pop_removeAllAnimations];
  10. self.myCriLayer.opacity = 1.0;
  11. self.myCriLayer.transform = CATransform3DIdentity;
  12. [self.myCriLayer setMasksToBounds:YES];
  13. [self.myCriLayer setBackgroundColor:[UIColor colorWithRed:0.16 green:0.72 blue: alpha:].CGColor];
  14. [self.myCriLayer setCornerRadius:15.0f];
  15. [self.myCriLayer setBounds:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)];
  16. self.myCriLayer.position = CGPointMake(self.view.center.x, 380.0);
  17. [self.view.layer addSublayer:self.myCriLayer];
  18. }
  19.  
  20. //增加一个动画 类似心跳的效果
  21. [self performAnimation];
  22.  
  23. 把动画封装在方法里面,方便进行递归调用;
  24.  
  25. -(void)performAnimation
  26. {
  27. [self.myCriLayer pop_removeAllAnimations];
  28. POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
  29.  
  30. if (self.animated) {
  31. anim.toValue = [NSValue valueWithCGPoint:CGPointMake(1.0, 1.0)];
  32. }else{
  33. anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)];
  34. }
  35.  
  36. anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //不同的类型 心跳会不一样
  37.  
  38. self.animated = !self.animated; //使每次都有区别
  39.  
  40. anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
  41. if (finished) {
  42.  
  43. [self performAnimation]; //当动画结束后又递归调用,让它产生一种心跳的效果
  44. }
  45. };
  46.  
  47. [self.myCriLayer pop_addAnimation:anim forKey:@"Animation"];
  48. }

这样的方式可以在今后很多重复的动画中进行递归运用;

对于forKey是为了可以管理相应的动画,比如移除动画之类的,可以简单了解一下官方的实例

  1. POPSpringAnimation *anim = [POPSpringAnimation animation];
  2. ...
  3. [layer pop_addAnimation:anim forKey:@"myKey”];
  4.  
  5. 移除:
  6.  
  7. [layer pop_removeAnimationForKey:@"myKey”];
  8.  
  9. 也可以删除这个上面所有的动画:
  10.  
  11. [layer pop_removeAllAnimations];
  12.  
  13. 可以判断是否存在
  14. anim = [layer pop_animationForKey:@"myKey"];
  15. if (anim) {
  16. /* update to value to new destination */
  17. anim.toValue = @(42.0);
  18. } else {
  19. /* create and start a new animation */
  20. ....
  21. }

当添加类似[myView pop_addAnimation:animation forKey:@"myKey"];的动画时,如果你用相同的key添加其他动画,那么新添加的动画将会取代先前的动画。

二:Pop Animation相比于Core Animation的优点

Pop Animation应用于CALayer时,在动画运行的任何时刻,layer和其presentationLayer的相关属性值始终保持一致,而Core Animation做不到。

Pop Animation可以应用任何NSObject的对象,而Core Aniamtion必须是CALayer。

三:相关属性的值

  1. 一:View Properties
  2.  
  3. 1Alpha - kPOPViewAlpha
  4.  
  5. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  6. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewAlpha];
  7. basicAnimation.toValue= @(); // scale from 0 to 1

  8. 2Color - kPOPViewBackgroundColor
  9.  
  10. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  11. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPViewBackgroundColor];
  12. basicAnimation.toValue= [UIColor redColor];

  13. 3Size - kPOPViewBounds
  14.  
  15. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  16. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewBounds];
  17. basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(, , , )]; //first 2 values dont matter

  18. 4Center - kPOPViewCenter
  19.  
  20. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  21. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewCenter];
  22. basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(, )];

  23. 5Location & Size - kPOPViewFrame
  24.  
  25. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  26. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
  27. basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(, , , )];

  28. 6Size - kPOPViewScaleXY
  29.  
  30. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  31. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];
  32. basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(, )];

  33. 7Size(Scale) - kPOPViewSize
  34.  
  35. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  36. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewSize];
  37. basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(, )];

  38. 二:Layer Properties
  39.  
  40. 1Color - kPOPLayerBackgroundColor
  41.  
  42. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  43. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor];
  44. basicAnimation.toValue= [UIColor redColor];

  45. 2Size - kPOPLayerBounds
  46.  
  47. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  48. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBounds];
  49. basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(, , , )]; //first 2 values dont matter

  50. 3Size - kPOPLayerScaleXY
  51.  
  52. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  53. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerScaleXY];
  54. basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(, )];//increases width and height scales

  55. 4Size - kPOPLayerSize
  56.  
  57. POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
  58. basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];
  59. basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(, )];

  60. 5Opacity - kPOPLayerOpacity
  61.  
  62. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  63. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerOpacity];
  64. basicAnimation.toValue = @();

  65. 6Position - kPOPLayerPosition
  66.  
  67. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  68. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPosition];
  69. basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(, , , )];//last 2 values dont matter

  70. 7X Position - kPOPLayerPositionX
  71.  
  72. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  73. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPositionX];
  74. basicAnimation.toValue= @();

  75. 8Y Position - kPOPLayerPositionY
  76.  
  77. POPSpringAnimation *anim = [POPSpringAnimation animation];
  78. anim.property=[POPAnimatableProperty propertyWithName:kPOPLayerPositionY];
  79. anim.toValue = @();

  80. 9Rotation - kPOPLayerRotation
  81.  
  82. POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
  83. basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];
  84. basicAnimation.toValue= @(M_PI/); //2 M_PI is an entire rotation

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

Facebook开源动画库 POP-POPBasicAnimation运用的更多相关文章

  1. Facebook 开源动画库 pop

    官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...

  2. 使用 Facebook开源动画库 POP 实现真实衰减动画

    1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatom ...

  3. Facebook开源动画库 POP-小实例

    实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...

  4. Facebook开源动画库 POP-POPSpringAnimation运用

    POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/ ...

  5. Facebook开源动画库 POP-POPDecayAnimation运用

    关于POPDecayAnimation的介绍先引用别人写的一些内容,基本上把它的一些注意点都说明了: Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果 ...

  6. rebound是facebook的开源动画库

    网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...

  7. 第三方开源动画库EasyAnimation中一个小bug的修复

    看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...

  8. [转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

    iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 ...

  9. Lottie安卓开源动画库使用

    碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...

随机推荐

  1. 第19/24周 锁升级(Lock Escalations)

    大家好,欢迎回到性能调优培训.上2个星期我们已经讨论了SQLServer里的悲观和乐观锁.今天我想谈下SQL Server里对于锁的一个特殊现象:所谓的锁升级(Lock Escalations).在我 ...

  2. 可显示Android设备选择列表,并进入指定Android设备Console的Shell脚本

    如果PC上连接多部Android设备(包括Android模拟器),在进入Console时还需要使用adb -s deviceid shell.比较麻烦,本文为此编写了一个Shell脚本文件(需要在Li ...

  3. 相同版本的CDH集群间迁移hdfs以及hbase

    前言 由于项目数据安全的需要,这段时间看了下hadoop的distcp的命令使用,不断的纠结的问度娘,度娘告诉我的结果也让我很纠结,都是抄来抄去, 还好在牺牲大量的时间的基础上还终于搞出来了,顺便写这 ...

  4. php面向对象常见的专业术语

    类 − 定义了一件事物的抽象特点.类的定义包含了数据的形式以及对数据的操作. 对象 − 是类的实例. 成员变量 − 定义在类内部的变量.该变量的值对外是不可见的,但是可以通过成员函数访问,在类被实例化 ...

  5. GETOBJECTOPTIONS

    /// <summary> /// 获取对象的选项 /// </summary> public enum GETOBJECTOPTIONS { /// <summary& ...

  6. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  7. 【C#进阶系列】16 数组

    首先提一下,个人在项目中已经很少用到数组了,更多的时候使用List<>. 数组大小固定,如果只是用来存放数据,专门用来读取,更改当然方便.但是更多的时候我们需要进行增删改,这个时候用Lis ...

  8. 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数

    [源码下载] 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数 作者:webabcd 介绍速战速决 之 PHP 函数基础 函数参数 函 ...

  9. 不可或缺 Windows Native (15) - C++: 命名空间

    [源码下载] 不可或缺 Windows Native (15) - C++: 命名空间 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 命名空间 示例CppNamespa ...

  10. GET DIAGNOSTICS Syntax

    http://dev.mysql.com/doc/refman/5.7/en/get-diagnostics.html GET [CURRENT | STACKED] DIAGNOSTICS { st ...