FaceBook POP动画的几个示例

最新推荐文章于 2019-01-26 12:07:04 发布

原创最新推荐文章于 2019-01-26 12:07:04 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何通过安装POP动画框架实现Spring和Decay动画效果，以创建真实的物理交互体验。文中展示了如何使用POPLayerPositionY进行视图动画，并提供了手势识别来控制视图移动，当手势结束时应用衰减动画，确保视图平滑停止。同时，还包含了动画结束时的处理逻辑，确保视图返回到初始位置。

pod ‘pop’,’~>1.0’ 安装pop动画框架

Pop是一个动画引擎，支持弹簧动画效果与衰减动画效果，可以用Pop构建出真实的物理交互效果。可以满足大多数的动画效果

动画类型

POPBasicAnimation 基本动画

POPSpringAnimation 弹簧动画

POPDecayAnimation 减速动画

POPCustomAnimation 自定义动画

平移动画

kPOPLayerPositionY Y 坐标改变，，点击去可知它是calayer 使用的，需要calayer 对象添加这个动画

fromValue 和 toValue 规定了 view 的Y坐标的移动位置，，

   UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 50, 50)];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor redColor];
    // 设置对Y进行平移操作
    POPBasicAnimation* spring = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
/// 延时2秒执行防止控制器push动画的影响
    spring.beginTime = CACurrentMediaTime()+2;
/// 动画时长为1s
    spring.duration = 1.0f;
/// Y位置的起始位置
    spring.fromValue = @(0.f);
/// Y位置的结束位置，，view的添加的位置
    spring.toValue = @(CGRectGetMinY(view.frame));
/// 动画结束的时候
    [spring setCompletionBlock:^(POPAnimation * ani, BOOL fin) {
/// 可以再接一个动画
    }];

/// 添加动画

[view.layer pop_addAnimation:spring forKey:@"spring”];

颜色渐变动画

kPOPViewBackgroundColor 背景颜色变化 UIview 对象使用

// 1.初始化
    POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
    // 2.设置初始值
    basic.fromValue = [UIColor blackColor];
    basic.toValue = [UIColor redColor];
    // 动画的时长
    basic.duration = 4.0;
    // 动画类型系统预设的类型有以下5种：
    //    kCAMediaTimingFunctionLinear            线性,即匀速
    //    kCAMediaTimingFunctionEaseIn            先慢后快
    //    kCAMediaTimingFunctionEaseOut           先快后慢
    //    kCAMediaTimingFunctionEaseInEaseOut     先慢后快再慢
    //    kCAMediaTimingFunctionDefault           实际效果是动画中间比较快
    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    basic.beginTime = CACurrentMediaTime() + 1.f;
    // 3.添加到view上
    [view pop_addAnimation:basic forKey:@"colorAnimation"];

视图旋转动画

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 50, 50)];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor redColor];
    POPBasicAnimation* basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerRotation];
    basic.beginTime = CACurrentMediaTime()+2;
    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

/// 逆时针旋转pi/4
basic.toValue = [NSNumber numberWithFloat:-M_PI_4];
basic.duration = 1.4f;

[view.layer pop_addAnimation:basic forKey:@"basic"];

回弹动画动画带回弹效果

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 50, 50)];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor redColor];
// 设置弹簧动画的路径为Y变化
    POPSpringAnimation* spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
// 设置开始时间
    spring.beginTime = CACurrentMediaTime()+2;
// Y的起始值
    spring.fromValue = @(10.f);

// Y的结束值
spring.toValue = @(CGRectGetMinY(view.frame));

// 质量质量越大动画速度越慢，，振幅幅度越大，，结束的越慢
spring.dynamicsMass = 10;

// 振幅设置 0-20 默认4
spring.springBounciness = 20.f;

// 速度 0-20
    spring.springSpeed = 2.f;
    [spring setCompletionBlock:^(POPAnimation * ani, BOOL fin) {

    }];

/// 添加动画

[view.layer pop_addAnimation:spring forKey:@"spring”];

带回弹的视图放大动画

kPOPViewScaleXY 视图宽高的变化 tovalue 决定了视图放大二倍 UIview 对象使用再用calayer 对象去添加会崩溃

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 50, 50)];
[self.view addSubview:view];
view.backgroundColor = [UIColor redColor];

   // 1.初始化
    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
    // 2.设置变化后的值放大二倍
    anim.toValue = [NSValue valueWithCGSize:CGSizeMake(2, 2)];
    // 速度可以设置的范围是0-20，默认为12.值越大速度越快，结束的越快
    anim.springSpeed = 2.f;
    // 振幅可以设置的范围是0-20，默认为4。值越大振动的幅度越大
    anim.springBounciness = 10.f;
    anim.dynamicsMass = 10;
    anim.beginTime = CACurrentMediaTime() + 1.f;

anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {
// 动画结束后进行相关操作可以再写个动画
};

[view pop_addAnimation:anim forKey:@"ScaleXY"];

减速动画拖拽一个视图结束的时候会有的惯性减速效果

self.showView = [[UIView alloc]initWithFrame:CGRectMake(20, 100, 100, 100)];