Facebook 开源动画库 pop

• 官网：https://github.com/facebook/pop
• Demo: https://github.com/callmeed/pop-playground

一：pop的基本构成：

• POPPropertyAnimation 属性动画

• POPSpringAnimation 弹簧效果动画

• POPBasicAnimation 基于动画

• POPDecayAnimation 延迟衰减动画

• POPCustomAnimation 自定义动画

二：其中属性动画的类型：

#pragma mark - Static

NSString * const kPOPLayerBackgroundColor = @"backgroundColor";
NSString * const kPOPLayerBounds = @"bounds";
NSString * const kPOPLayerOpacity = @"opacity";
NSString * const kPOPLayerPosition = @"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";
NSString * const kPOPLayerScaleY = @"scaleY";
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";
NSString * const kPOPLayerTranslationXY = @"translationXY";
NSString * const kPOPLayerTranslationY = @"translationY";
NSString * const kPOPLayerTranslationZ = @"translationZ";
NSString * const kPOPLayerZPosition = @"zPosition";

NSString * const kPOPViewAlpha = @"view.alpha";
NSString * const kPOPViewBackgroundColor = @"view.backgroundColor";
NSString * const kPOPViewBounds = kPOPLayerBounds;
NSString * const kPOPViewCenter = @"view.center";
NSString * const kPOPViewFrame = @"view.frame";
NSString * const kPOPViewScaleX = @"view.scaleX";
NSString * const kPOPViewScaleXY = @"view.scaleXY";
NSString * const kPOPViewScaleY = @"view.scaleY";
NSString * const kPOPViewSize = kPOPLayerSize;

NSString * const kPOPTableViewContentOffset = @"tableView.contentOffset";
NSString * const kPOPTableViewContentSize = @"tableView.contentSize";

使用：

    POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerSize];

三：

示例1：演示图片放大效果动画

@interface PPPictureConstraintViewController ()
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *widthConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *heightConstraint;

@end

@implementation PPPictureConstraintViewController

- (void)performFullScreenAnimation
{
    //先去除所有的动画
    [self.widthConstraint pop_removeAllAnimations];
    [self.heightConstraint pop_removeAllAnimations];
    
    //创建弹簧动画1
    POPSpringAnimation *heightAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayoutConstraintConstant];
    heightAnimation.springBounciness = 8;
    
    //创建弹簧动画2
    POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayoutConstraintConstant];
    animation.springBounciness = 8;
    
    if (!_isInFullscreen)
    {
        animation.toValue = @(320.);
        heightAnimation.toValue = @(208.);
    }
    else
    {
        animation.toValue = @(182.);
        heightAnimation.toValue = @(118.);
    }
    
    //加载动画
    [self.heightConstraint pop_addAnimation:heightAnimation forKey:@"fullscreen"];
    [self.widthConstraint pop_addAnimation:animation forKey:@"fullscreen"];
    
}

@end

示例2：创建一个旋转及点击放大 + 号 动画

- (IBAction)bigBounceButtonWasPressed:(UIButton *)sender
{
    _buttonToggle = !_buttonToggle;
    
    CALayer *layer = sender.layer;
    
    [layer pop_removeAllAnimations];
    POPSpringAnimation  *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerSize];
    POPSpringAnimation *rotation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];

    if (_buttonToggle)
    {
        anim.toValue = [NSValue valueWithCGSize:CGSizeMake(44, 44)];
        rotation.toValue = @(M_PI_4);
        sender.tintColor = [UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0];
    }
    else
    {
        anim.toValue = [NSValue valueWithCGSize:CGSizeMake(34, 34)];
        rotation.toValue = @(0);
        sender.tintColor = [UIColor redColor];
    }
    
    anim.springBounciness = 20;
    anim.springSpeed = 16;
    
    anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
        NSLog(@"Animation has completed.");
    };
    [layer pop_addAnimation:anim forKey:@"size"];
    [layer pop_addAnimation:rotation forKey:@"rotation"];
}

 

四：参考：

• https://github.com/callmeed/pop-playground
• https://github.com/jxd001/POPdemo
• http://codeplease.io/