Facebook POP 动效引擎

贾实

2023-12-01

使用CocoaPods安装POP，只需要在Podfile中加入这么一行：

pod 'pop'

或者如果想要手动添加，那么参考POP Github中的描述：

除此之外，你还可以将工程添加到工作区里面，然后采用提供的配制文件。或者手动复制POP子目录下的文件，复制到工程里面。如果选择手动安装，确保C++标准库链入其中，只需要在项目链接标记中包含 -lc++即可。

Facebook POP动效库:https://github.com/facebook/pop

步骤2: 将POP加入到工程中

在工程开头添加如下：

#import <POP/POP.h>

步骤 3:创建动效

使用POP可以创建4类动效：: spring, decay, basic and custom.

Spring （弹性）动效可以赋予物体愉悦的弹性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay （衰减) 动效可以用来逐渐减慢物体的速度至停止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic（基本）动效可以在给定时间的运动中插入数值调整运动节奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

Custom（自定义）动效可以让设计值创建自定义动效，只需简单处理CADisplayLink，并联系时间-运动关系

在这片简短教程中将不涵盖自定义动效，大家可以看看POP的Github来获取更多进阶知识https://github.com/facebook/pop

步骤4: 给动效添加属性

Pop 让我们可以这样设置动效的属性:

velocity : anim.velocity = @(1000.);

fromValue: anim.fromValue = @(0.0);

toValue: anim.toValue = @(1.0);

bounciness: anim.springBounciness = 10;

步骤5 :动起来

若想让物体动起来，只需要添加步骤3所创建的东西到视图。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

# 动效案例

弹性动画
- (void)spring{
    POPSpringAnimation* framePOP = [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
    framePOP.springSpeed = 10.f;
    framePOP.springBounciness = 4.f;
    framePOP.toValue =  [UIColor greenColor];
    [framePOP setCompletionBlock:^(POPAnimation * anim , BOOL finsih) {
        if (finsih) {
            NSLog(@"view.frame = %@",NSStringFromCGRect(view.frame));
        }
    }];
    [view pop_addAnimation:framePOP forKey:@"go"];
}

减缓动画
- (void)Decay{
    POPDecayAnimation* decay = [POPDecayAnimation animationWithPropertyNamed:kPOPViewFrame];
//    decay.toValue = [NSValue valueWithCGRect:CGRectMake(200, 400, 100, 100)];
    decay.velocity = [NSValue valueWithCGRect:CGRectMake(200, 300, 100, 100)];
    [view pop_addAnimation:decay forKey:@"go"];
}

基本动画
-(void)basic{
    POPBasicAnimation* basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerCornerRadius];
    basicAnimation.toValue = [NSNumber numberWithFloat:CGRectGetHeight(view.frame)/2.];
    basicAnimation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//    basicAnimation.duration = 3.f;
    [basicAnimation setCompletionBlock:^(POPAnimation * ani, BOOL fin) {
        if (fin) {
            NSLog(@"view.frame = %@",NSStringFromCGRect(view.frame));
//            POPBasicAnimation* newBasic = [POPBasicAnimation easeInEaseOutAnimation];
//            newBasic.property = [POPAnimatableProperty propertyWithName:kPOPLayerCornerRadius];
//            newBasic.toValue = [NSNumber numberWithFloat:0];
//            [view.layer pop_addAnimation:newBasic forKey:@"go"];
        }
    }];

    [view.layer pop_addAnimation:basicAnimation forKey:@"frameChange"];
}


组合动画
-(void)group
{
    view.transform = CGAffineTransformMakeRotation(M_PI_2/3);
    POPBasicAnimation* spring = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    spring.beginTime = CACurrentMediaTime();
    spring.duration = .4f;
    spring.fromValue = [NSNumber numberWithFloat:-100.f];
    spring.toValue = [NSNumber numberWithFloat:CGRectGetMinY(view.frame) + 80];
    [spring setCompletionBlock:^(POPAnimation * ani, BOOL fin) {
    }];

    POPBasicAnimation* basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerRotation];
    basic.beginTime = CACurrentMediaTime();
    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    basic.toValue = [NSNumber numberWithFloat:-M_PI_4];
    basic.duration = .4f;

    POPBasicAnimation* rotation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerRotation];
    rotation.beginTime = CACurrentMediaTime() + .4f;
    rotation.toValue = [NSNumber numberWithFloat:0.f];
    rotation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    rotation.duration = .25f;

    POPBasicAnimation* donw = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    donw.beginTime = CACurrentMediaTime() + 0.4f;
    donw.toValue = [NSNumber numberWithFloat:CGRectGetMinY(view.frame)];
    donw.duration = .25f;
    donw.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [view.layer pop_addAnimation:spring forKey:@"spring"];
    [view.layer pop_addAnimation:basic forKey:@"basic"];
    [view.layer pop_addAnimation:donw forKey:@"down"];
    [view.layer pop_addAnimation:rotation forKey:@"rotation"];
}