[IOS 开发] Facebook开源动画库 POP-POPBasicAnimation运用

POP: 一个流行的可扩展的动画引擎iOS,它支持spring和衰变动态动画,使其可用于构建现实,基于物理交互。Objective - C API允许快速集成, 对于所有的动画和过渡他是成熟的.

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

POPBasicAnimation //基本动画

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

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

POPCustomAnimation //自定义动画

一：POPBasicAnimation运用

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

- (void)viewDidLoad {    [super viewDidLoad];        self.view.backgroundColor=[UIColor whiteColor];        //1:初始化一个视图块    if (self.myView==nil) {        self.myView=[[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];        self.myView.backgroundColor=[UIColor redColor];        self.myView.alpha=0;        [self.view addSubview:self.myView];    }        //创建一个POPBasicAnimation动画    POPBasicAnimation *basicAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];    basicAnimation.fromValue=@(0);    basicAnimation.toValue=@(1);    basicAnimation.duration=5; //设置动画的间隔时间 默认是0.4秒    basicAnimation.repeatCount=HUGE_VALF; //重复次数 HUGE_VALF设置为无限次重复    [self.myView pop_addAnimation:basicAnimation forKey:@"myViewAnimation"];}

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

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

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

/** Common CALayer property names. */extern NSString * const kPOPLayerBackgroundColor;extern NSString * const kPOPLayerBounds;extern NSString * const kPOPLayerCornerRadius;extern NSString * const kPOPLayerBorderWidth;extern NSString * const kPOPLayerBorderColor;extern NSString * const kPOPLayerOpacity;extern NSString * const kPOPLayerPosition;extern NSString * const kPOPLayerPositionX;extern NSString * const kPOPLayerPositionY;extern NSString * const kPOPLayerRotation;extern NSString * const kPOPLayerRotationX;extern NSString * const kPOPLayerRotationY;extern NSString * const kPOPLayerScaleX;extern NSString * const kPOPLayerScaleXY;extern NSString * const kPOPLayerScaleY;extern NSString * const kPOPLayerSize;extern NSString * const kPOPLayerSubscaleXY;extern NSString * const kPOPLayerSubtranslationX;extern NSString * const kPOPLayerSubtranslationXY;extern NSString * const kPOPLayerSubtranslationY;extern NSString * const kPOPLayerSubtranslationZ;extern NSString * const kPOPLayerTranslationX;extern NSString * const kPOPLayerTranslationXY;extern NSString * const kPOPLayerTranslationY;extern NSString * const kPOPLayerTranslationZ;extern NSString * const kPOPLayerZPosition;extern NSString * const kPOPLayerShadowColor;extern NSString * const kPOPLayerShadowOffset;extern NSString * const kPOPLayerShadowOpacity;extern NSString * const kPOPLayerShadowRadius;/** Common CAShapeLayer property names. */extern NSString * const kPOPShapeLayerStrokeStart;extern NSString * const kPOPShapeLayerStrokeEnd;extern NSString * const kPOPShapeLayerStrokeColor;extern NSString * const kPOPShapeLayerFillColor;extern NSString * const kPOPShapeLayerLineWidth;extern NSString * const kPOPShapeLayerLineDashPhase;/** Common NSLayoutConstraint property names. */extern NSString * const kPOPLayoutConstraintConstant;#if TARGET_OS_IPHONE/** Common UIView property names. */extern NSString * const kPOPViewAlpha;extern NSString * const kPOPViewBackgroundColor;extern NSString * const kPOPViewBounds;extern NSString * const kPOPViewCenter;extern NSString * const kPOPViewFrame;extern NSString * const kPOPViewScaleX;extern NSString * const kPOPViewScaleXY;extern NSString * const kPOPViewScaleY;extern NSString * const kPOPViewSize;extern NSString * const kPOPViewTintColor;/** Common UIScrollView property names. */extern NSString * const kPOPScrollViewContentOffset;extern NSString * const kPOPScrollViewContentSize;extern NSString * const kPOPScrollViewZoomScale;extern NSString * const kPOPScrollViewContentInset;extern NSString * const kPOPScrollViewScrollIndicatorInsets;/** Common UITableView property names. */extern NSString * const kPOPTableViewContentOffset;extern NSString * const kPOPTableViewContentSize;/** Common UICollectionView property names. */extern NSString * const kPOPCollectionViewContentOffset;extern NSString * const kPOPCollectionViewContentSize;/** Common UINavigationBar property names. */extern NSString * const kPOPNavigationBarBarTintColor;/** Common UIToolbar property names. */extern NSString * const kPOPToolbarBarTintColor;/** Common UITabBar property names. */extern NSString * const kPOPTabBarBarTintColor;/** Common UILabel property names. */extern NSString * const kPOPLabelTextColor;#else/** Common NSView property names. */extern NSString * const kPOPViewFrame;extern NSString * const kPOPViewBounds;extern NSString * const kPOPViewAlphaValue;extern NSString * const kPOPViewFrameRotation;extern NSString * const kPOPViewFrameCenterRotation;extern NSString * const kPOPViewBoundsRotation;/** Common NSWindow property names. */extern NSString * const kPOPWindowFrame;extern NSString * const kPOPWindowAlphaValue;extern NSString * const kPOPWindowBackgroundColor;#endif

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

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

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

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

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

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

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

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

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

kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉

kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开

kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地

kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。

实例4：增加一个动画 类似心跳的效果，把动画封装在方法里面，方便进行递归调用；

@property(nonatomic)CALayer *myCriLayer;@property (nonatomic) BOOL animated;初始化代码：    //8:初始化一个CALayer层    if (self.myCriLayer==nil) {        self.myCriLayer=[CALayer layer];        [self.myCriLayer pop_removeAllAnimations];        self.myCriLayer.opacity = 1.0;        self.myCriLayer.transform = CATransform3DIdentity;        [self.myCriLayer setMasksToBounds:YES];        [self.myCriLayer setBackgroundColor:[UIColor colorWithRed:0.16 green:0.72 blue:1 alpha:1].CGColor];        [self.myCriLayer setCornerRadius:15.0f];        [self.myCriLayer setBounds:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)];        self.myCriLayer.position = CGPointMake(self.view.center.x, 380.0);        [self.view.layer addSublayer:self.myCriLayer];    }    //增加一个动画 类似心跳的效果    [self performAnimation];把动画封装在方法里面，方便进行递归调用；-(void)performAnimation{    [self.myCriLayer pop_removeAllAnimations];    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];        if (self.animated) {        anim.toValue = [NSValue valueWithCGPoint:CGPointMake(1.0, 1.0)];    }else{        anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)];    }        anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  //不同的类型 心跳会不一样        self.animated = !self.animated; //使每次都有区别        anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {        if (finished) {                        [self performAnimation];  //当动画结束后又递归调用，让它产生一种心跳的效果        }    };        [self.myCriLayer pop_addAnimation:anim forKey:@"Animation"];}

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

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

POPSpringAnimation *anim = [POPSpringAnimation animation];...[layer pop_addAnimation:anim forKey:@"myKey”];移除：[layer pop_removeAnimationForKey:@"myKey”];也可以删除这个上面所有的动画：[layer pop_removeAllAnimations];可以判断是否存在anim = [layer pop_animationForKey:@"myKey"];if (anim) {  /* update to value to new destination */  anim.toValue = @(42.0);} else {  /* create and start a new animation */  ....}

实例5:在很多金融类app中比较常见、支付宝中的余额包、京东金融余额、就类似这样

 // 初始化    POPBasicAnimation *anim = [POPBasicAnimation animation];    // 限时 1s. 2s.    anim.duration = 3.0;    POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count++" initializer:^(POPMutableAnimatableProperty *prop) {        prop.readBlock = ^(id obj, CGFloat values[]){ values[0] = [[obj description] floatValue]; };        prop.writeBlock = ^(id obj, const CGFloat values[])        {            [obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];        };        prop.threshold = 0.01;    }];    anim.property = prop;    anim.fromValue = @(0.0);    anim.toValue = @(1314.52);    [self.xt_countLabel pop_addAnimation:anim forKey:@"counting"];