POP 动画－牛刀小试

作者: David_Cap | 来源:发表于2015-12-25 17:23 被阅读948次

在iOS开发中，动画可以说是美化App，提高App的交互效果的利器。So，POP是FaceBook开源的一款动画的第三方。近日稍微看了一下，介绍一下简单的入门级内容。

POP－进入你的项目

使用CocoaPod就十分简单了。

pod 'pop', '~> 1.0'

POP－使用

POP有默认的三种动画，和支持自定义动画。

POPBasicAnimation 基础动画
POPSpringAnimation 弹性动画
POPDecayAnimation 阻尼动画
POPCustomAnimation 自定义动画

下面我们通过一步步的讲解，一步步的学习POP

POPBasicAnimation

POPBasicAnimation使用最广泛提供固定时间间隔的动画(如淡入淡出效果)

入门级效果的解析，效果如下：

BaseAnimation

    POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anBasic.fromValue = @(0);
    anBasic.toValue = @(view.frame.origin.x + 200);
    anBasic.beginTime = CACurrentMediaTime() + 1.0f;
    anBasic.duration = 0.4f;
    anBasic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [view.layer pop_addAnimation:anBasic forKey:@"position"];

熟悉POP的中有几个概念。

PropertyNamed ---> kPOPLayerPositionX 表示这个动画负责监听或者说动态变化的值

fromValue 表示这个动画监听值的起始值

toValue 表示这个动画监听值的结束值

beginTime 表示动画的起始时间，＋1.0f表示向后延时 1s

duration 表示动画的持续时间

timingFunction 表示动画的效果淡入淡出等

timingFunction 包括

kCAMediaTimingFunctionLinear －－－线性动画

kCAMediaTimingFunctionEaseIn －－－淡入

kCAMediaTimingFunctionEaseOut －－－淡出

kCAMediaTimingFunctionEaseInEaseOut －－－先淡入再淡出

了解了上面的东西基本上就能看懂那段代码了。

大体意思就是我，我定义了一个监听LayerX值的动画。然后设置一下X的起始位置，结束位置，开始时间，持续时间，动画效果。然后我这个动画基本就定义好了。

接下来，我吧这个动画添加到View的Layer上。并给他一个Key（随意）。

经过这个，你大体能够理解POP该怎么写动画效果了。简单方便，实用经济。

POPSpringAnimation

弹性动画，是很多人选择POP的原因了吧。因为他有一些像弹簧一样的效果。

先上效果：

SpringAnimation

    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anim.toValue = @(view.frame.origin.x + 200);
    anim.beginTime = CACurrentMediaTime() + 1.0f;
    anim.springBounciness = 15.0f;
    [view.layer pop_addAnimation:anim forKey:@"position"];

说一些SpringAnimation特有的属性吧。

    springBounciness:4.0    //[0-20] 弹力 越大则震动幅度越大
    springSpeed     :12.0   //[0-20] 速度 越大则动画结束越快
    dynamicsTension :0      //拉力  接下来这三个都跟物理力学模拟相关 数值调整起来也很费时 没事不建议使用哈
    dynamicsFriction:0      //摩擦 同上
    dynamicsMass    :0      //质量 同上

POPDecayAnimation

阻尼动画，顾名思义，动画就像公交慢慢踩刹车一样，慢慢减速的动画。

    POPDecayAnimation *anDecay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anDecay.velocity = @(view.frame.origin.x + 200);
    anDecay.beginTime = CACurrentMediaTime();
    anDecay.deceleration = 0.998;
    [view.layer pop_addAnimation:anDecay forKey:@"position"];

效果自己可以试试，这里有一个注意点。toValue,Duration设置将没有什么意义。这个时候的运动值是根据 velocity,deceleration计算出来的。

deceleration:0.998  //衰减系数(越小则衰减得越快)

POPAnimatablePropery

这个Propery就是监听的属性值。

下面提供一个监听属性表

/**
 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;

具体每一个属性监听的代码设置可以参考Git上面的例子。

POP Git Link

自定义POPAnimatableProperty

有些时候既有的Property可能满足不了我们的需求，这个时候我们可以自定义Property。

通过一个例子我们来讲解一下。先上效果：

LabelAnimation

    UILabel *label = [[UILabel alloc]init];
    label.frame = CGRectMake(100, 200, 100, 50);
    label.textColor = [UIColor blackColor];
    [self.view addSubview:label];
    
    POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"countdown" initializer:^(POPMutableAnimatableProperty *prop) {
        prop.writeBlock = ^(id obj, const CGFloat values[]) {
            UILabel *lable = 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 = 180;    //持续3分钟
    anBasic.beginTime = CACurrentMediaTime() + 1;    //延迟1秒开始
    [label pop_addAnimation:anBasic forKey:@"countdown"];

这个时候，有些东西可以特殊解释一下。

prop.writeBlock 这个是Animation中Value每次的变化都会调用这个回调，然后就可以在这个Block里面做一些事情，效果。

values数组表示的是什么呢。在这个中Value是一个数值，就是Values[0].

然后如果Value是一个CGRect，那么values[0]，values[1]，values[2]，values[3] 就分别对应 CGRectMake(0, 0, 20.0, 20.0) 的 0, 0, 20.0, 20.0

总结

POP动画基础入门就是这样，想要深入可以看Git的官方文档。

POP的文档还是十分完备的。

网友评论

andyoung:这个不是和UIDynamicAnimator差不多吗？
David_Cap:@ba18649c7510 可能功能差不多，但是在内部实现上，不知道 facebook有没有优化。。。。。
罗同学_:不错，顺便问下你在项目里用到pop的机会多吗
David_Cap:@单手两万行无bug 用的几率不大，但是万一碰到那种要求酷炫动画的需求就能比较得心应手。
罗同学_:@David_Cap 我也感觉以后我用到的几率应该不大，但没事学习学习也是可以的
David_Cap:@单手两万行无bug 老实说比较少，一般用UIView animation 就够了。
曾樑:
David_Cap:@曾樑谢谢鼓励。😌😌

POP 动画－牛刀小试

POP－进入你的项目

POP－使用

POPBasicAnimation

POPSpringAnimation

POPDecayAnimation

POPAnimatablePropery

自定义POPAnimatableProperty

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

梦想者

iOS开发

程序员的故事

程序员

IOS动画专题

iOS 开发