Facebook 动画库POP使用

XINNYU

2015-09-20

iOS, 第三方库

POP是Facebook公司的一个开源项目，它是一个完全不同于Core Animation的动画引擎；它在基本的静态动画的基础上增加的弹簧动画与衰减动画使之能创造出更真实更具物理性的交互动画 POP的API可以快速的与现有的ObjC代码集成并可以作用于任意对象的任意属性，POP是个相当成熟且久经考验的框架，Facebook出品的令人惊叹的Paper应用中的所有动画和效果即出自POP。

使用方式：

POP默认支持三种动画但同时也支持自定义动画

POPBasicAnimation
POPSpringAnimation
POPDecayAnimation
POPCustomAnimation //自定义动画

这里我们只讨论前三种，因为自定义动画还没用过；

代码示例：

BasicAnimation

let rotation = POPBasicAnimation(propertyNamed: kPOPLayerRotation[^POP动画的参数])
rotation.toValue = M_PI * 2
rotation.duration = 10
rotation.repeatForever = true
rotation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        
self.layer.pop_addAnimation(rotation, forKey: "旋转")

POPBasicAnimation提供四种时间曲线,这个和Core Animation中的是一样的：

kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut

POPSpringAnimation
弹性动画

//实例化POP
let scale = POPSpringAnimation(propertyNamed:kPOPViewScaleXY)
//设置结束值
scale.toValue = NSValue(CGPointMake(2,2))
//振幅，范围0-20
scale.springBounciness = 20
//振动速度,范围0-20
scale.springSpeed = 1
view.layer.pop_addAnimatiom(scale,foKey:"scale")

弹性动画可配置的属性有：

springBounciness:4.0 //[0-20] 弹力越大则震动幅度越大

springSpeed :12.0 //[0-20] 速度越大则动画结束越快

dynamicsTension :0 //拉力下面这三个都跟物理力学模拟相关数值调整起来很费时，建议就用默认值

dynamicsFriction:0 //摩擦同上

dynamicsMass :0 //质量同上

POPDecayAnimation
阻尼动画

POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anDecay.velocity = @(600);
anDecay.beginTime = CACurrentMediaTime() + 1.0f;
[self.square pop_addAnimation:anDecay forKey:@"position"];

注意:这里对POPDecayAnimation设置toValue是没有意义的会被忽略(因为目的状态是动态计算得到的)

POPDecayAnimation可配置的属性与默认值有:
deceleration:0.998 //衰减系数(越小则衰减得越快)

注意:POPDecayAnimation也是没有duration字段的其动画持续时间由velocity与deceleration决定

POP默认支持的动画属性：

/**
 Common CALayer property names.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;
/**
 Common CAShapeLayer property names.
 */
extern NSString * const kPOPShapeLayerStrokeStart;
extern NSString * const kPOPShapeLayerStrokeEnd;
extern NSString * const kPOPShapeLayerStrokeColor;
extern NSString * const kPOPShapeLayerFillColor;
/**
 Common NSLayoutConstraint property names.
 */
extern NSString * const kPOPLayoutConstraintConstant;
#if TARGET_OS_IPHONE
/**
 Common UIView property names.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;
/**
 Common UIScrollView property names.
 */
extern NSString * const kPOPScrollViewContentOffset;
extern NSString * const kPOPScrollViewContentSize;
extern NSString * const kPOPScrollViewZoomScale;
extern NSString * const kPOPScrollViewContentInset;
/**
 Common UITableView property names.
 */
extern NSString * const kPOPTableViewContentOffset;
extern NSString * const kPOPTableViewContentSize;
/**
 Common UICollectionView property names.
 */
extern NSString * const kPOPCollectionViewContentOffset;
extern NSString * const kPOPCollectionViewContentSize;
/**
 Common UINavigationBar property names.
 */
extern NSString * const kPOPNavigationBarBarTintColor;
/**
 Common UIToolbar property names.
 */
extern NSString * const kPOPToolbarBarTintColor;
/**
 Common UITabBar property names.
 */
extern NSString * const kPOPTabBarBarTintColor;
/**
 Common UILabel property names.
 */
extern NSString * const kPOPLabelTextColor;

自定义属性：

POP默认支持的三种动画都继承自POPPropertyAnimation POPPropertyAnimation中定义了一个叫property的属性( 之前没有用到它是因为POP根据不同的默认动画属性帮你生成了默认的property) 而这个property则是用来驱动POP的动画效果中的重要一环。

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

其组成就是一个readBlock一个writeBlock和一个threashold

readBlock告诉POP当前的属性值
writeBlock中修改变化后的属性值
threashold决定了动画变化间隔的阈值值越大writeBlock的调用次数越少
POPAnimatableProperty其实是POP中一个比较重要的东西,像上面提到的POP自带的动画属性查看源代码可以看到也只是POP自动帮你设置好了POPAnimatableProperty而已,其作用就是当动画的某个时间片被触发时,告诉系统如何根据当前时间片做出变化.

下面是一个秒表动画，是利用自定义属性的POP做出来的：

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countdown" initializer:^(POPMutableAnimatableProperty *prop) {
        
        prop.writeBlock = ^(id obj, const CGFloat values[]) {
            UILabel *lable = (UILabel*)obj;
            label.text = [NSString stringWithFormat:@"%02d:%02d:%02d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100];
        };
        
//        prop.threshold = 0.01f;
    }];
    
    POPBasicAnimation *anBasic = [POPBasicAnimation linearAnimation];   //秒表当然必须是线性的时间函数
    anBasic.property = prop;    //自定义属性
    anBasic.fromValue = @(0);   //从0开始
    anBasic.toValue = @(3*60);  //180秒
    anBasic.duration = 3*60;    //持续3分钟
    anBasic.beginTime = CACurrentMediaTime() + 1.0f;    //延迟1秒开始
    [label pop_addAnimation:anBasic forKey:@"countdown"];

出处：http://adad184.com/2015/03/11/intro-to-pop/