动画效果-05利用POP实现有放大缩小弹簧效果的点击按钮

效果图

1.gif
github地址:https://github.com/changanli/PopButton

框架简单介绍

• POP是facebook的一个用于动画效果的第三方框架。https://github.com/facebook/pop.git

• POPSpringAnimation介绍

• 在POP中提供了POPSpringAnimation的类，专门用户实现弹簧效果的动画。

• POPSpringAnimation的几个常见参数：

• springBounciness:弹簧弹力，取值范围[0,20],默认值是4，值越大，则弹簧的振幅越大，也就是弹簧的范围越大。

• springSpeed:弹簧速度，速度越快，动画的时间会越短，默认是12
• dynamicsTension 弹簧的张力
• dynamicsFriction 弹簧的摩擦力
• dynamicsMass 质量。
  注意:POPStringAnimation是没有动画时长的，动画的时间长短由这几个参数一起决定。

代码实现:

• 自定义了PopButton,在PopButton中实现了缩放的动画效果，同时取消了按钮的高亮状态。

//PopButton.h文件
#import <UIKit/UIKit.h>

@interface PopButton : UIButton

//传递点击button只有要做的事情
@property (nonatomic,copy) void (^completionBlock)(BOOL finished);
@end

//PopButton的.m实现文件
#import "PopButton.h"
#import <pop/POP.h>

@implementation PopButton

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
         [self addTarget:self action:@selector(scaleAnimation) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return  self;
}
- (instancetype)init{

    if (self = [super init]) {
        
          [self addTarget:self action:@selector(scaleAnimation) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return self;
}

//重写点击按钮高亮的方法，点击按钮时不再出现高亮状态
- (void)setHighlighted:(BOOL)highlighted{}

//在.h文件中定义block属性，用来存放要执行的事件
- (void)setCompletionBlock:(void (^)(BOOL))completionBlock{

    _completionBlock = completionBlock;
}
//实现缩放动画
- (void) scaleAnimation {
//动画过程中取消用户的交互，防止用户重复点击
    self.userInteractionEnabled = NO;
    POPSpringAnimation* springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    //它会先缩小到(0.5,0.5),然后再去放大到(1.0,1.0)
    springAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0.5, 0.5)];
    springAnimation.toValue =[NSValue valueWithCGPoint:CGPointMake(1.0, 1.0)];
    springAnimation.springBounciness = 20;
    //动画结束之后的回调方法
    [springAnimation setCompletionBlock:^(POPAnimation * animation, BOOL flag) {
        
        self.userInteractionEnabled = true;
        if (_completionBlock) {
            _completionBlock(true);
        }
    }];
    [self.layer pop_addAnimation:springAnimation forKey:@"SpringAnimation"];
    
}