zoukankan      html  css  js  c++  java
  • 走进 Facebook POP 的世界

    POP: 一个流行的可扩展的动画引擎iOS,它支持spring和衰变动态动画,使其可用于构建现实,基于物理交互。Objective - C API允许快速集成, 对于所有的动画和过渡他是成熟的.

    解释:

    1.1 POP 使用 Objective-C++ 编写,Objective-C++ 是对 C++ 的扩展,就像 Objective-C 是 C 的扩展。而至于为什么他们用 Objective-C++ 而不是纯粹的 Objective-C. 可能是偏爱。-.O

    1.2 POP 目前由四部分组成:1. Animations;2. Engine;3. Utility;4. WebCore。下图有助于你更好的理解它的架构

    1.它支持CocoaPods 你可以这样

    pod 'pop', '~> 1.0.8'

    2.或者这样点击下载拉入工程 https://github.com/facebook/pop

    3.我使用的Cocoapods 所以使用之前你需要这样

    #import <POP.h>

    动图

    E1:

    - (void)clickPopAction

    {

        // kPOPLayerPositionY 向下

        // kPOPLayerPositionX 向右

        POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];

        // 移动距离

        anim.toValue = [[NSNumber alloc] initWithFloat:_btnPop.center.y + 200];

        // 从当前 + 1s后开始

        anim.beginTime = CACurrentMediaTime() + 1.0f;

        // 弹力--晃动的幅度 (springSpeed速度)

        anim.springBounciness = 15.0f;

        [_btnPop pop_addAnimation:anim forKey:@"position"];

        POPSpringAnimation *anim1 = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

        anim1.toValue = [NSValue valueWithCGRect:CGRectMake(100, 100, 99, 99)];

        [_btnPop pop_addAnimation:anim1 forKey:@"size"];

    }

    动图

    E2:在很多金融类app中比较常见、支付宝中的余额包、京东金融余额、就类似这样

    // 初始化

        POPBasicAnimation *anim = [POPBasicAnimation animation];

        // 限时 1s

        anim.duration = 3.0;

        POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count++" initializer:^(POPMutableAnimatableProperty *prop) {

            prop.readBlock = ^(id obj, CGFloat values[]){ values[0] = [[obj description] floatValue]; };

            prop.writeBlock = ^(id obj, const CGFloat values[])

            {

                [obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];

            };

            prop.threshold = 0.01;

        }];

        anim.property = prop;

        anim.fromValue = @(0.0);

        anim.toValue = @(1314.52);

        [self.xt_countLabel pop_addAnimation:anim forKey:@"counting"];

    动图

    E3

    CALayer *layer0 = [CALayer layer];

        layer0.opacity = 1.0;

        layer0.transform = CATransform3DIdentity;

        [layer0 setMasksToBounds:YES];

        [layer0 setBackgroundColor:[UIColor colorWithRed:0.5448 green:0.6836 blue:0.9986 alpha:1.0].CGColor];

        [layer0 setCornerRadius:12.5];

        [layer0 setBounds:CGRectMake(0, 0, 25, 25)];

        [self.view.layer addSublayer:layer0];

        layer0.position = CGPointMake(self.view.center.x, 266);

        [self performAnimation:layer0];

    - (void)performAnimation:(CALayer *)layer

    {

        [layer pop_removeAllAnimations];

        POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

        static BOOL ani = YES;

        if (ani) {

            anim.toValue = [NSValue valueWithCGPoint:CGPointMake(1.0, 1.0)];

        }else{

            anim.toValue = [NSValue valueWithCGPoint:CGPointMake(1.5, 1.5)];

        }

        ani = !ani;

        anim.completionBlock = ^(POPAnimation *anim, BOOL finished) {

            if (finished) { [self performAnimation:layer]; }

        };

        [layer pop_addAnimation:anim forKey:@"Animation"];

    }

  • 相关阅读:
    vue中的组件传值
    Object中defineProperty数据描述
    promiseall的使用场景
    babel安装及使用
    checkbox属性checked="checked"已有,但却不显示打勾的解决办法
    【转载】表单验证<AngularJs>
    CSS3 :nth-child()伪类选择器
    【转载】浏览器加载和渲染html的顺序
    css制作的61种图像
    网站链接样式设置
  • 原文地址:https://www.cnblogs.com/fengmin/p/5599531.html
Copyright © 2011-2022 走看看