美文网首页Android启动性能ios
Facebook Pop动画框架详细解析(一) —— 基本概览

Facebook Pop动画框架详细解析(一) —— 基本概览

作者: 刀客传奇 | 来源:发表于2017-12-16 23:32 被阅读113次

    版本记录

    版本号 时间
    V1.0 2017.12.16

    前言

    POP框架是Facebook开发的一个框架,是一个在iOS与OS X上通用的极具扩展性的动画引擎。它在基本的静态动画的基础上增加的弹簧动画与衰减动画,使之能创造出更真实更具物理性的交互动画。POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性。

    Overview

    Pop是iOS,tvOS和OS X的可扩展动画引擎。除了基本的静态动画之外,它还支持弹簧和衰变动态动画,使其可用于构建逼真的基于物理的交互。 该API允许与现有的Objective-C或Swift代码库快速集成,并可以在任何对象上动画任何属性。 这是一个成熟且经过充分测试的框架,可以驱动Paper中所有的动画和转换。


    Installation - 安装

    1. 自动安装

    对于CocoaPods,可以通过下面方式加入到项目中。

    pod 'pop', '~> 1.0'
    

    Bugs首先在master中修复,然后通过指定的版本发布。 您也可以使用以下Podfile条目的Master的Pop。

    pod 'pop', :git => 'https://github.com/facebook/pop.git'
    

    2. 手动安装

    Framework (manual)

    通过将项目添加到项目中,并将pop.embedded框架添加到应用程序目标的“常规”选项卡上的“嵌入式二进制文件Embedded Binaries”部分,您可以在几秒钟内设置pop! 这也可以在头文件模块中使用@import pop语法。

    注意:由于Xcode的一些尴尬限制,嵌入式二进制文件必须与模块共享相同的名称,并且必须以.framework作为扩展名。 这意味着在添加嵌入式二进制文件(一个用于OS X,一个用于tvOS,另一个用于iOS)时,您会看到三个pop.frameworks。 你需要确保添加正确的; 它们在列表中出现的相同,但注意列表是按目标顺序填充的。 你可以用<configuration> - <platform>(例如Debug-iphoneos)的格式检查列出框架旁边的路径来验证正确的路径。

    注意:这个方法当前不能和工作区很好的兼容。 由于目标target只能依赖和嵌入来自其他目标的产品在同一个项目中,所以只有在将pop.xcodeproj作为子项目添加到当前目标项目时才能起作用。 否则,您需要在scheme中手动设置构建顺序和在产品中的备份。

    Static Library (manual)

    还有另外一种方案,您可以将项目添加到工作区,并采用提供的配置文件或手动将pop子目录下的文件复制到项目中。 如果手动安装,通过在项目链接器标志中包含-lc ++链接以确保C ++标准库被链接。


    Usage - 使用

    Pop采用Core Animation显式动画编程模型。 通过下面的引入使用:

    Objective-C

    #import <pop/POP.h>
    

    或者,如果你使用嵌入式框架

    @import pop;
    

    Swift

    import pop
    

    1. Start, Stop & Update - 开始、结束和更新

    要开始一个动画,将其添加到您想要动画的对象:

    Objective-C

    POPSpringAnimation *anim = [POPSpringAnimation animation];
    ...
    [layer pop_addAnimation:anim forKey:@"myKey"];
    

    Swift

    let anim = POPSpringAnimation()
    ...
    layer.pop_add(anim, forKey: "myKey")
    

    要停止动画,请将其从引用在start上指定的键的对象中移除:

    Objective-C

    [layer pop_removeAnimationForKey:@"myKey"];
    

    Swift

    layer.pop_removeAnimation(forKey: "myKey")
    

    该键也可以用来查询动画的存在。 更新正在运行的动画的toValue可以提供最无缝的方法来更改路线:

    Objective-C

    anim = [layer pop_animationForKey:@"myKey"];
    if (anim) {
      /* update to value to new destination */
      anim.toValue = @(42.0);
    } else {
      /* create and start a new animation */
      ....
    }
    

    Swift

    if let anim = layer.pop_animation(forKey: "myKey") as? POPSpringAnimation {
        /* update to value to new destination */
        anim.toValue = 42.0
    } else {
        /* create and start a new animation */
        ....
    }
    

    在上面的例子中使用了一个图层,而Pop接口是作为NSObject上的类别添加实现的。 任何NSObject或子类可以动画。

    2. Types - 类型

    有四种具体的动画类型:spring, decay, basic 和 custom

    Spring动画可以用来给对象一个愉快的反弹。 在这个例子中,我们使用弹簧动画来将图层的边界从其当前值设置为(0,0,400,400)

    Objective-C

    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];
    [layer pop_addAnimation:anim forKey:@"size"];
    

    Swift

    if let anim = POPSpringAnimation(propertyNamed: kPOPLayerBounds) {
        anim.toValue = NSValue(cgRect: CGRect(x: 0, y: 0, width: 400, height: 400))
        layer.pop_add(anim, forKey: "size")
    }
    

    Decay动画可以用来逐渐减缓对象的停顿。 在这个例子中,我们从一个图层的当前值和速度每秒1000pts衰减一个图层的positionX

    Objective-C

    POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anim.velocity = @(1000.);
    [layer pop_addAnimation:anim forKey:@"slide"];
    

    Swift

    if let anim = POPDecayAnimation(propertyNamed: kPOPLayerPositionX) {
        anim.velocity = 1000.0
        layer.pop_add(anim, forKey: "slide")
    }
    

    Basic基本动画可用于在指定的时间段内插值。 要使用缓入式缓出动画在默认持续时间内将视图的Alpha从0.0增加到1.0,请执行以下操作:

    Objective-C

    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.fromValue = @(0.0);
    anim.toValue = @(1.0);
    [view pop_addAnimation:anim forKey:@"fade"];
    

    Swift

    if let anim = POPBasicAnimation(propertyNamed: kPOPViewAlpha) {
        anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        anim.fromValue = 0.0
        anim.toValue = 1.0
        view.pop_add(anim, forKey: "fade")
    }
    

    POPCustomAnimation通过处理CADisplayLink和相关的时间步进管理,使创建自定义动画和转换变得更容易。

    3. Properties - 属性

    动画属性由POPAnimatableProperty类指定。 在这个例子中,我们创建了一个spring动画,并明确设置了与[CALayer bounds]对应的动画属性:

    Objective-C

    POPSpringAnimation *anim = [POPSpringAnimation animation];
    anim.property = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];
    

    Swift

    let anim = POPSpringAnimation()
    if let property = POPAnimatableProperty.property(withName: kPOPLayerBounds) as? POPAnimatableProperty {
        anim.property = property
    }
    

    该框架提供了许多常用的图层,并且可以查看动画的属性。 您可以通过创建类的新实例来为自定义属性设置动画。 在这个例子中,我们声明了一个自定义volume属性:

    Objective-C

    prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop) {
      // read value
      prop.readBlock = ^(id obj, CGFloat values[]) {
        values[0] = [obj volume];
      };
      // write value
      prop.writeBlock = ^(id obj, const CGFloat values[]) {
        [obj setVolume:values[0]];
      };
      // dynamics threshold
      prop.threshold = 0.01;
    }];
    

    Swift

    if let prop = POPAnimatableProperty.property(withName: "com.foo.radio.volume", initializer: { prop in
        guard let prop = prop else {
            return
        }
        // read value
        prop.readBlock = { obj, values in
            guard let obj = obj as? Volumeable, let values = values else {
                return
            }
    
            values[0] = obj.volume
        }
        // write value
        prop.writeBlock = { obj, values in
            guard var obj = obj as? Volumeable, let values = values else {
                return
            }
    
            obj.volume = values[0]
        }
        // dynamics threshold
        prop.threshold = 0.01
    }) as? POPAnimatableProperty {
        anim.property = prop
    }
    

    有关提供的动画属性的完整列表,以及有关声明自定义属性的更多信息,请参阅POPAnimatableProperty.h

    4. Debugging - 调试

    以下是调试时的一些提示。 Pop服从模拟器的切换慢动画Simulator's Toggle Slow Animations设置。 尝试启用它减慢动画,更容易观察交互。

    考虑命名你的动画。 这将允许您在引用它们时通过日志记录或在调试器中更容易地识别它们:

    Objective-C

    anim.name = @"springOpen";
    

    Swift

    anim.name = "springOpen"
    

    每个动画都附带一个关联的跟踪器tracer。 跟踪器允许您以快速有效的方式记录所有动画相关事件,允许您在动画完成后查询和分析它们。 以下示例启动跟踪器并将其配置为记录动画完成的所有事件:

    Objective-C

    POPAnimationTracer *tracer = anim.tracer;
    tracer.shouldLogAndResetOnCompletion = YES;
    [tracer start];
    

    Swift

    if let tracer = anim.tracer {
        tracer.shouldLogAndResetOnCompletion = true
        tracer.start()
    }
    

    更多可参阅POPAnimationTracer.h


    Testing - 测试

    Pop有广泛的单元测试覆盖。 要安装测试依赖关系,请导航到根目录pop目录并输入:

    pod install
    

    假设安装了CocoaPods,这将包括对单元测试目标的必要的OCMock依赖。


    SceneKit

    由于SceneKit需要iOS 8和OS X 10.9,因此不提供POP的SceneKit扩展。 不幸的是,由于Xcode 6.1发行说明中提到的问题,不能使用弱链接weakly linked frameworks的框架。

    为了解决这个问题,您可以轻松选择使用SceneKit! 只需将其添加到Xcode项目的“预处理器宏”Preprocessor Macros部分即可:

    POP_USE_SCENEKIT=1
    

    Resources - 资源

    一系列可能证明有价值的外部资源的链接:

    后记

    未完,待续~~~

    相关文章

      网友评论

        本文标题:Facebook Pop动画框架详细解析(一) —— 基本概览

        本文链接:https://www.haomeiwen.com/subject/zbyewxtx.html