[IOS 开发] Facebook开源动画库 POP-POPBasicAnimation运用
2017-10-30 15:24
369 查看
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" 4000 ; //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:增加一个动画 类似心跳的效果,把动画封装在方法里面,方便进行递归调用;
@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"];
相关文章推荐
- Facebook开源动画库 POP-POPBasicAnimation运用
- Facebook开源动画库 POP-POPDecayAnimation运用
- Facebook开源动画库 POP-POPSpringAnimation运用
- ios facebook 开源动画 pop 常用动画
- Pop - Facebook 开源 iOS & OS X 动画库
- iOS中Facebook开源动画库POP的简单使用
- IOS facebook 开源动画引擎 pop
- ios开发学习--动画(Animation)效果源码分享--系列教程2
- Facebook将神奇动画引擎Pop开源了
- 优秀开源项目:Facebook Paper动画引擎--Pop
- iOS开发基础知识:Core Animation(核心动画)
- ios开发学习--动画(Animation)效果源码分享
- ios开发学习--动画(Animation)效果源码分享--系列教程
- iOS开发之Core Animation动画
- iOS Facebook pop动画进阶
- FaceBook pop 动画开源框架使用教程说明
- iOS开发动画(Animation)图片360度不停旋转
- iOS开发-组合动画CAAnimationGroup
- FaceBook pop 动画开源框架使用说明
- iOS Animation开发简单动画