Facebook开源动画库 POP-POPBasicAnimation运用

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

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[email protected](0);
    basicAnimation.toValue[email protected](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都有一些相应的常量，比如在UIView中就有我们上面实例中出现的kPOPViewAlpha；因为POP动画是针对对象的，所以很多的控件都可以做出相应的动画效果；CALayer、CAShapeLayer、UIView中相关的常量大部分控件都可以使用；

实例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动画 视图中心以kCAMediaTimingFunctionEaseInEaseOut直线运行到中心点为200,64

    //5:初始化一个视图块
    if (self.mytimingFunctionEaseInEaseOutView==nil) {
        self.mytimingFunctionEaseInEaseOutView=[[UIView alloc]initWithFrame:CGRectMake(100, 300, 50, 50)];
        self.mytimingFunctionEaseInEaseOutView.backgroundColor=[UIColor grayColor];
        [self.view addSubview:self.mytimingFunctionEaseInEaseOutView];
    }

    //创建一个POPBasicAnimation动画 视图中心以kCAMediaTimingFunctionEaseInEaseOut直线运行到中心点为200,64
    POPBasicAnimation *anEaseInEaseOutBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
    anEaseInEaseOutBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 64)];
    anEaseInEaseOutBasic.duration=5;
    anEaseInEaseOutBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.mytimingFunctionEaseInEaseOutView pop_addAnimation:anEaseInEaseOutBasic forKey:@"mytimingFunctionEaseInEaseOutView”];

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

实例6：创建一个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”];

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

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

    //7:初始化一个Label
    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"];

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

POPSpringAnimation *anim = [POPSpringAnimation animation];
...
[layer pop_addAnimation:anim forKey:@"myKey”];

移除：

[layer pop_removeAnimationForKey:@"myKey”];

可以判断是否存在
anim = [layer pop_animationForKey:@"myKey"];
if (anim) {
  /* update to value to new destination */
  anim.toValue = @(42.0);
} else {
  /* create and start a new animation */
  ....
}
时间： 2024-08-13 18:33:30

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

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

1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatomic,strong)CADisplayLink *displayLink; @property (nonatomic)      NSInteger     count; @end - (void)viewDidLoad { [superviewDidLoad]; self.displayLink

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

1. POP 动画基于底部刷新原理,是基于CADisplayLink,1秒钟执行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatomic,strong)CADisplayLink *displayLink; @property (nonatomic)      NSInteger     count; @end - (void)viewDidLoad { [superviewDidLoad]; self.displayLink

Facebook开源动画库 POP-POPSpringAnimation运用

POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果:实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest POPSpringAnimation可配置的属性与默认值为 springBounciness:4.0    //[0-20] 弹力 越大则震动幅度越大 springSpeed     :12.0   //[0-20] 速度 越大则动画结束越快 dynamicsTens

Facebook开源动画库 POP-小实例

实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] init]; [gesture addTarget:self action:@selector(changeSize:)]; [self.view addGestureRecognizer:gesture]; } - (vo

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

iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 Pop 比其实不大合适,虽然两者都自称「动画库」,但是「库」这个词的含义有所区别.本质上 Canvas 是一个「动画合集」而 Pop 是一个「动画引擎」. 先说 Canvas.Canvas 的目的是「Animate in Xcode Without Code」.开发者可以通过在 Storyboar

让动画不再僵硬：Facebook Rebound Android动画库介绍

introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reboundRebound是facebook推出的一个弹性动画库,可以让动画看起来真实自然,像真实世界的物理运动,带有力的效果,使用的参数则是facebook的origami中使用的.官网上有一个简单的JS版本来做demo,如果说到evernote.LinkedIn.flow等应用也在使用这个动画库,是

Facebook Rebound 弹性动画库 源码分析

Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的,这里提供一个demo apk. 今天看到了tumblr发布了基于rebound的Backboard,本想直接分析一下Backboard对rebound做了些什么,不过考虑到rebound还没有仔细分析过,所以这里做一下源码分析. 对外部来说,首先接触的就是SpringSystem了,但在说它之前,先

Rebound-Android的弹簧动画库

简介 官方网站 github Rebound是facebook出品的一个弹簧动画库,与之对应的iOS版本有一个pop动画库,也是非常的强大给力.Facebook真是互联网企业中的楷模,开源了很多的实用开源库,大赞一个!!! 讲解Rebound之前,先看看我们根据Rebound高仿的新浪微博弹出菜单,看效果图: 话说回来,facebook为啥推出这个库呢?主要就是现有的动画离真实物理世界差别比较明显,为了让动画看起来真实自然,带有力量的效果,Rebound应运而生.两个比较重要的参数,一个是拉力T

NineoldAndroids动画库源码分析

简介 做Android开发的同学很多都知道或者使用过一个动画库,那就是NineOldAndroids,它的作者及其牛X,好几个著名的开源库都是他的作品,具体大家可以看他的JakeWharton.简单来说,NineOldAndroids是一个向下兼容的动画库,主要是使低于API 11的系统也能够使用View的属性动画.以下是个其官网的简述 : Android library for using the Honeycomb (Android 3.0) animation API on all ver