IOS POP动画

作者: HYY | 来源:发表于2017-01-13 14:30 被阅读1752次

    参考链接一:基础知识
    参考链接二:很详细的讲解

    参考链接二:演示代码

    参考链接三:POPAnimation 源码仓库

    pop与coreanimation不同之处, 在于pop可以支持任何NSObeject对象,而coreanimation只支持CALayer

    • 增删改查示例:
    // 添加动画
    POPSpringAnimation *anim = [POPSpringAnimation animation]; 
    ....
    [layer pop_addAnimation:anim forKey:@"myKey"]; 
    
    // 删除动画
    [layer pop_removeAnimationForKey:@"myKey"];
    
    // 查询&修改动画
    anim = [layer animationForKey:@"myKey"];
    if (anim){
    anim.toValue = @(42.0);
    }else{
    ....
    }
    

    一. 类型

    Pop动画总共有4种类型,如下:

    (一). Spring 弹性动画

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

    (二). Decay 衰减动画

    POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anim.velocity = [NSValue valueWithCGPoint:CGPointMake(3,3)]; // 速度
    [layer pop_addAnimation:anim forKey:@"slide"];
    

    (三). Basic 基础动画

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

    (四). Custom 自定义动画

    // 占位
    

    二. Properties 属性设置

    通过POPAnimatableProperty来设置具体属性值

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

    除了系统已经提供的properties外,我们还可以定制自己的property

    prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop){
    // get
    prop.readBlock = ^(id obj, CGFloat values[]){
    values[0] = [obj volume];
    }
    
    // set
    prop.writeBlock = ^(id obj, const CGFloat values[]){
    [obj setVolume:values[0]];
    
    // dynamics threshold 动画开始
    prop.threshold = 0.01; 
    }
    }];
    
    anim.property = prop;
    

    三. 五步创建POPAnimation

    (一). 选择类型:POPBasicAnimtaion , POPSpringAnimation, POPDecayAnimation

    1. POPBasicAnimation

    POPSpringAnimaton *anim = [POPSpringAnimation animaton];
    basicAnimation.timingFunciton = [CAMediaTimingFunciton functionWithName:kCAMediaTimingFunctionLinear];
    

    kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseIn
    kCAMediaTimingFunctionEaseOut kCAMediaTimingFunctionEaseInEaseOut

    2. POPSpringAnimation

    POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
    springAnimation.velocity = @(1000); // 速率
    sprngAnimation.springBounciness = 14; // 弹簧弹力:晃动的幅度,[0-20, 默认为4]
    springAnimation.springSpeed = 3; // 弹簧速度 [0-20,默认为12] 
    springAnimation.dynamicsMass = 3; // 弹簧质量
    springAnimation.dynamicsTension = 7;  // 弹簧张力
    springAnimation.dynamicsFriction = 700; // 弹簧摩擦
    
    

    3. POPDecayAnimation

    POPDecayAniamtion *decayAnimation = [POPDecayAnimation animation];
    decayAnimation.velocity = @(233);
    decayAnimation.deceleration = 0.833;  [0-1] // 减速
    

    (二). 属性设置: properties

    • View: kPOPViewAlpha, kPOPViewBackgroundColor, kPOPViewBounds,
      kPOPViewCenter, kPOPViewFrame, kPOPViewScaleXY, kPOPViewSizer

    • Layer: kPOPLayerBackgroundColor, kPOPLayerBounds, kPOPLayerScaleXY,
      kPOPLayerSize, kPOPLayerOpacity, kPOPLayerPositionX, kPOPLayerPositionY, kPopLayerRotation

    anim.property = [POPAnimationProperty propertyWithName:kPOPViewFrame];
    

    (三). 设置改变值: toValue

    • anim.toValue = @(1.0); // alpha, opacity, positionX, positionY,rotation(M_PI/4)
    • anim.toValue = [UIColor redColor]; // color
    • anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200,200)]; center,position
    • anim.toValue = [NSValue valueWithCGRect:CGRectMake(0,0,400,400)];
    • anim.toValue = [NSValue valueWithCGSize:CGSizeMake(40,40)]; // size,bounds,frame,scaleXY
    anim.toValue  = [NSValue valueWithCRGectMake(0,0,90,100)];
    

    (四). 命名&回调

    anim.name = @"PopFrameAnim";
    anim.completionBlock = ^(POPAnimation *anim, BOOL finished){
    
    };
    
    // 或者代理: <POPAnimatorDelegate>
    - (void)pop_animationDidStart:(POPAnimation *)anim; 
    - (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
    - (void)pop_animationDidReachToValue:(POPAnimation *)anim;
    

    (五). 添加

    [view pop_addAnimation: anim forKey:@"PopFrameAnim"];
    

    相关文章

      网友评论

        本文标题:IOS POP动画

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