POP框架初探

作者: HolyCat_猫 | 来源:发表于2014-11-06 18:05 被阅读2890次

    合适的动画效果是提高用户体验最直观的方式,我们项目中的动画应用也不少,主要是使用的UIKit的动画扩展,还有少量用CoreAnimation实现。现在Facebook开源了POP,我们又多了一种强大好用的选择。与CoreAnimation相比,api用法相似,POP提供了更多方便生动的动画效果,主要是弹簧(SpringAnimation)和衰减(DecayAnimation)效果。

    使用方法

    POP的使用跟CoreAnimation比较相似,基本的步骤如下:

    • 选择一种动画效果
      1.POPBasicAnimation 基本的动画效果,我们常用的EaseInOut、Linenear的动画效果都可以用这种方式实现
      <pre><code>
      POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
      basicAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
      // kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseIn kCAMediaTimingFunctionEaseOut kCAMediaTimingFunctionEaseInEaseOut
      </code></pre>
      2.POPSpringAnimation 弹簧效果,如下图
    pop.gif

    <pre><code>
    POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
    springAnimation.springBounciness=14; // 弹簧弹力 取值范围为[0, 20],默认值为4
    springAnimation.springSpeed=3; // 弹簧速度,速度越快,动画时间越短 [0, 20],默认为12,和springBounciness一起决定着弹簧动画的效果
    // 还有:dynamicsTension 弹簧的张力 dynamicsFriction 弹簧摩擦 dynamicsMass 质量 。张力,摩擦,质量这三者可以从更细的粒度上替代springBounciness和springSpeed控制弹簧动画的效果
    </code></pre>
    3.POPDecayAnimation 衰减效果,参考UIScrollView滑动松手后的减速
    <pre><code>
    POPDecayAnimation *decayAnimation=[POPDecayAnimation animation];
    decayAnimation.velocity=@(233); //值的变化速率
    </code></pre>

    • 选择生成动画的Property
      View Properties,包含以下定义
      kPOPViewAlpha kPOPViewBackgroundColor kPOPViewBounds kPOPViewCenter kPOPViewFrame kPOPViewScaleXY kPOPViewSize

    Layer Properties
    kPOPLayerBackgroundColor kPOPLayerBounds kPOPLayerScaleXY kPOPLayerSize kPOPLayerOpacity kPOPLayerPosition kPOPLayerPositionX kPOPLayerPositionY kPOPLayerRotation kPOPLayerBackgroundColor

    • 设置对应的.toValue
      例如
      <pre><code>
      // 设置alpha
      POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];
      basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewAlpha];
      basicAnimation.toValue= @(0);
      // 设置BackgroundColor
      POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
      basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor];
      basicAnimation.toValue= [UIColor redColor];
      </code></pre>

    • 为动画设置name和delegate
      <pre><code>
      basicAnimation.name=@"POPAnimation";
      basicAnimation.delegate=self;
      </code></pre>
      delegate方法如下

    <pre><code>

    • (void)pop_animationDidStart:(POPAnimation *)anim;
    • (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
    • (void)pop_animationDidReachToValue:(POPAnimation *)anim;

    </code></pre>

    • 将animation添加到对象上
      <pre><code>
      [self.tableView pop_addAnimation:basicAnimation forKey:@"POPAnimation"];
      </code></pre>

    完整例子

    <pre><code>
    POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];
    basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];
    basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];
    basicAnimation.name=@"SomeAnimationNameYouChoose";
    basicAnimation.delegate=self;
    [self.tableView pop_addAnimation:basicAnimation forKey:@"POPAnimation"];
    </code></pre>

    相关文章

      网友评论

      • 空转风:导入pop但是没法用,后来加了-lc++可以用了但是编译的时候说找不到XCTest/XCTest.h,请问怎么回事

      本文标题:POP框架初探

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