动画在App开发中经常使用，以下是针对Facebook开源动画库POP进行介绍。
实例源码：github地址
POP默认支持三种动画 同时也支持自定义动画
POPBasicAnimation // 基本动画
POPSpringAnimation // 类似弹簧效果的动画效果
POPDecayAnimation // 过阻尼效果，衰减效果
POPCustomAnimation // 自定义动画
一、 POPBasicAnimation 运用
实例1： 创建一个动画效果，关于视图透明度的变化
//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创建动画的步骤分为三步： 1. 创建相应的动画类 2.增加相应的属性 3.附加到相应的对象上
POP中一个很关键的类POPAnimationProperty, 里面定义了一些常量，代表着有哪些属性我们可以做动画
/**
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"; //阴影半径
// CAShapeLayer
NSString * 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：创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionLinear直线运行到中心点为100,64
//4:初始化一个视图块
if (self.mytimingFunctionLinearView==nil) {
self.mytimingFunctionLinearView=[[UIView alloc]initWithFrame:CGRectMake(0, 300, 50, 50)];
self.mytimingFunctionLinearView.backgroundColor=[UIColor greenColor];
[self.view addSubview:self.mytimingFunctionLinearView];
}
//创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionLinear直线运行到中心点为100,64
POPBasicAnimation *anLinearBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
anLinearBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(100, 64)];
anLinearBasic.duration=5;
anLinearBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[self.mytimingFunctionLinearView pop_addAnimation:anLinearBasic forKey:@"myLinearBasic"];
实例5：创建一个POPBasicAnimation动画 让视图块的大小从50 ·50 慢慢变到100 ·100
//6:初始化一个视图块
if (self.mySizeView==nil) {
self.mySizeView=[[UIView alloc]initWithFrame:CGRectMake(250, 300, 50, 50)];
self.mySizeView.backgroundColor=[UIColor redColor];
[self.view addSubview:self.mySizeView];
}
//创建一个POPBasicAnimation动画 让视图块的大小从50*50 慢慢变到100*100
POPBasicAnimation *ansizeBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
ansizeBasic.toValue=[NSValue valueWithCGSize:CGSizeMake(100, 100)];
ansizeBasic.duration=5;
ansizeBasic.repeatCount=HUGE_VALF;
[self.mySizeView pop_addAnimation:ansizeBasic forKey:@"mySizeView”];
POP比较好的一点是保留了动画结束后的状态，通过block回调
实例6：创建一个POPBasicAnimation动画 让视图块的大小从60·30 慢慢变到100·100 动画完成后又有一个动画变成60·30
if (self.myLabel==nil) {
self.myLabel=[[UILabel alloc]initWithFrame:CGRectMake(50, 300, 60, 30)];
self.myLabel.backgroundColor=[UIColor redColor];
self.myLabel.textAlignment=NSTextAlignmentCenter;
self.myLabel.textColor=[UIColor whiteColor];
self.myLabel.alpha=1;
self.myLabel.text=@"Label";
[self.view addSubview:self.myLabel];
}
//创建一个POPBasicAnimation动画 让视图块的大小从60*30 慢慢变到100*100 动画完成后又有一个动画变成60*30
POPBasicAnimation* anLabelBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
anLabelBasic.duration=3.0;
anLabelBasic.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
anLabelBasic.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[anLabelBasic setCompletionBlock:^(POPAnimation *ani, BOOL fin) {
if (fin) {
NSLog(@"self.myLabel.frame=%@",NSStringFromCGRect(self.myLabel.frame));
POPBasicAnimation *newLabelAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
newLabelAnimation.duration=3.0;
newLabelAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(60, 30)];
newLabelAnimation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.myLabel pop_addAnimation:newLabelAnimation forKey:@"newMyLabelAnimation"];
}
}];
[self.myLabel pop_addAnimation:anLabelBasic forKey:@"myLabelAnimation"];
实例7：增加一个动画 类似心跳的效果，把动画封装在方法里面，方便进行递归调用；
@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 */
....
}
当添加类似[myView pop_addAnimation:animation forKey:@"myKey"];的动画时，如果你用相同的key添加其他动画，那么新添加的动画将会取代先前的动画。
二：Pop Animation相比于Core Animation的优点
-
Pop Animation应用于CALayer时，在动画运行的任何时刻，layer和其presentationLayer的相关属性值始终保持一致，而Core Animation做不到。
-
Pop Animation可以应用任何NSObject的对象，而Core Aniamtion必须是CALayer。
三：相关属性的值
一：View Properties
1：Alpha - kPOPViewAlpha
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewAlpha];
basicAnimation.toValue= @(0); // scale from 0 to 1
2：Color - kPOPViewBackgroundColor
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPViewBackgroundColor];
basicAnimation.toValue= [UIColor redColor];
3：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
4：Center - kPOPViewCenter
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewCenter];
basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
5：Location & Size - kPOPViewFrame
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(140, 140, 140, 140)];
6：Size - kPOPViewScaleXY
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];
basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(3, 2)];
7：Size(Scale) - kPOPViewSize
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewSize];
basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(30, 200)];
二：Layer Properties
1：Color - kPOPLayerBackgroundColor
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor];
basicAnimation.toValue= [UIColor redColor];
2：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
3：Size - kPOPLayerScaleXY
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerScaleXY];
basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(2, 1)];//increases width and height scales
4：Size - kPOPLayerSize
POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];
basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(200, 200)];
5：Opacity - kPOPLayerOpacity
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerOpacity];
basicAnimation.toValue = @(0);
6：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
7：X Position - kPOPLayerPositionX
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPositionX];
basicAnimation.toValue= @(240);
8：Y Position - kPOPLayerPositionY
POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property=[POPAnimatableProperty propertyWithName:kPOPLayerPositionY];
anim.toValue = @(320);
9：Rotation - kPOPLayerRotation
POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];
basicAnimation.toValue= @(M_PI/4); //2 M_PI is an entire rotation
网友评论