FaceBook pop 动画开源框架使用教程说明

本文介绍如何利用Pop框架为iOS应用创建各种动态交互动画,包括弹性动画、基本动画、衰减动画和自定义动画。通过简单的代码示例,展示了如何使用Pop框架实现视图大小和位置的变化动画,以及在实际应用中实现弹出菜单和窗口跳动效果。此外,还提供了一个易于集成的框架,使得开发者能够快速地在项目中应用这些动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

https://github.com/facebook/pop

 

 

pop

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.

Build Status

 

 

POPdemo

A simple demo for facebook's pop framework.

pop一共有四个大类

POPSpringAnimation  有弹性效果的动画类(个人比较喜欢这个)
POPBasicAnimation 基本动画类
POPDecayAnimation 衰减动画类
POPCustomAnimation 可以自定义动画的类

导入pop

很简单,直接把pop文件夹拖到项目里,然后导入pop.h即可。

#import "POP.h"

下面的代码示例用POPSpringAnimation做一个弹性放大-缩小的效果

- (void)viewDidLoad
{
   [super viewDidLoad];
   // Do any additional setup after loading the view from its nib.

//添加手势
    UITapGestureRecognizer *gestureForSpring = [[UITapGestureRecognizer alloc] init];
    [gestureForSpring addTarget:self action:@selector(changeSize:)];
    [_springView addGestureRecognizer:gestureForSpring];

}



- (void)changeSize:(UITapGestureRecognizer*)tap{
- 
    //用POPSpringAnimation 让viewBlue实现弹性放大缩小的效果
    POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerSize];

    CGRect rect = _springView.frame;
    if (rect.size.width==100) {
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(300, 300)];
    }
    else{
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    }

    //弹性值
    springAnimation.springBounciness = 20.0;
    //弹性速度
    springAnimation.springSpeed = 20.0;

    [_springView.layer pop_addAnimation:springAnimation forKey:@"changesize"];

}

效果如下

image

上面的代码是改变view的size,下面示例改变position

 POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];

    CGPoint point = _springView.center;

    if (point.y==240) {
        springAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(point.x, -230)];
    }
    else{
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(point.x, 240)];
    }

    //弹性值
    springAnimation.springBounciness = 20.0;
    //弹性速度
    springAnimation.springSpeed = 20.0;

    [_springView pop_addAnimation:springAnimation forKey:@"changeposition"];

效果:

image
这个效果可以做一个弹出框从上往下跳出来,我之前做过这个效果,用了N多代码,用pop只用几句代码就实现了。

一个比较实用的效果,弹出菜单:

image
代码如下:

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"+" style:UIBarButtonItemStyleDone target:self action:@selector(showPop)];

- (void)showPop{

    if (_isOpened) {
        [self hidePop];
        return;
    }
    _isOpened = YES;

    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
    positionAnimation.fromValue = [NSValue valueWithCGRect:_hidePosition];
    positionAnimation.toValue = [NSValue valueWithCGRect:_showPosition];
    positionAnimation.springBounciness = 15.0f;
    positionAnimation.springSpeed = 20.0f;
    [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"];
}

- (void)hidePop{

    POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewFrame];
    positionAnimation.fromValue = [NSValue valueWithCGRect:_showPosition];
    positionAnimation.toValue = [NSValue valueWithCGRect:_hidePosition];
    //key一样就会用后面的动画覆盖之前的
    [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"];

    _isOpened = NO;
}

来源:http://www.cnblogs.com/lingzhao/p/3747503.html
详情参考:http://blog.youkuaiyun.com/liuqqwwe/article/details/26714541


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值