POP的按钮动画

POP按钮动画

ps：长按按钮显示底层图片，松开隐藏

---

一、总结

通过实现pop动画代理 设置view的透明度。一次方程函数实现从0.9到1的计算。

二、实现效果

二、界面布局

布局包含以下控件：

    1、原始图片

    2、毛玻璃化图片

    3、中心按钮

    4、进度Label

    5、中间线动画layer

@property(nonatomic,strong) UIImageView    *normalImageView;

@property(nonatomic,strong) UIImageView    *blurImageView;

@property(nonatomic,strong) UIButton        *centerButton;

@property(nonatomic,strong) UILabel        *centerLabel;

@property(nonatomic,strong) CAShapeLayer    *circle1;

//一元一次函数。。后续会介绍用处

@property(nonatomic,strong) Math            *math;

界面初始化：

//一元一次方程 按钮缩放由1~0.9，则计算对应的x值

self.math = [Math mathOnceLinearEquationWithPointA:MATHPointMake(0, 1) PointB:MATHPointMake(1, 0.9)];

//UIImageView

UIImage *image =[UIImage imageNamed:@"5"];

self.normalImageView = [[UIImageView alloc] initWithImage:image];

self.normalImageView.frame = self.view.bounds;

self.normalImageView.contentMode = UIViewContentModeScaleAspectFill;

[self.view addSubview:self.normalImageView];

self.blurImageView = [[UIImageView alloc] initWithFrame:self.normalImageView.frame];

self.blurImageView.image = [image blurImage];

[self.view addSubview:self.blurImageView];

//中心按钮

self.centerButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

self.centerButton.backgroundColor = [UIColor whiteColor];

self.centerButton.center = self.view.center;

self.centerButton.layer.cornerRadius = 50;

[self.view addSubview:self.centerButton];

//中心Label

self.centerLabel = [[UILabel alloc] initWithFrame:self.centerButton.bounds];

[self.centerButton addSubview:self.centerLabel];

self.centerLabel.textAlignment = NSTextAlignmentCenter;

self.centerLabel.font = [UIFont HeitiSCWithFontSize:30];

self.centerLabel.text = @"0%";

//按钮事件

//按住Button

[self.centerButton addTarget:self action:@selector(scaleToSmall) forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];

//松开Button

[self.centerButton addTarget:self action:@selector(scaleToNormal) forControlEvents:UIControlEventTouchUpInside];

//圆环图层

{

    self.circle1 = [CAShapeLayer layer];

    self.circle1.strokeEnd = 0;

    CGFloat lineWidth = .5;

    CGFloat radius = 50;

    self.circle1.bounds = CGRectMake(0, 0, (radius + lineWidth)*2, (radius +     lineWidth)*2);

    self.circle1.lineWidth = lineWidth;

    self.circle1.position = self.centerButton.center;

    UIBezierPath *circlePath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius+lineWidth, radius+lineWidth) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];

    self.circle1.path = circlePath1.CGPath;

    self.circle1.strokeColor = [UIColor whiteColor].CGColor;

    self.circle1.fillColor = [UIColor clearColor].CGColor;

    [self.view.layer addSublayer:self.circle1];

}

//缩小事件

-(void)scaleToSmall{

//删除在中心按钮的所有动画

[self.centerButton.layer pop_removeAllAnimations];

//缩小

POPBasicAnimation *scaleAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

scaleAnim.toValue = [NSValue valueWithCGSize:CGSizeMake(.9, .9)];

scaleAnim.delegate = self;

scaleAnim.duration = .8;

[self.centerButton.layer pop_addAnimation:scaleAnim forKey:@"scale"];

//更改颜色

POPSpringAnimation *springAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];

springAnim.toValue = (id)[UIColor blackColor].CGColor;

[self.centerButton.layer pop_addAnimation:springAnim forKey:@"bgColor" ];

}

//还原事件

-(void)scaleToNormal{

[self.centerButton.layer pop_removeAllAnimations];

POPBasicAnimation *scaleAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

scaleAnim.toValue = [NSValue valueWithCGSize:CGSizeMake(1, 1)];

scaleAnim.delegate = self;

[self.centerButton.layer pop_addAnimation:scaleAnim forKey:@"scale"];

POPSpringAnimation *springAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBackgroundColor];

springAnim.toValue = (id)[UIColor whiteColor].CGColor;

[self.centerButton.layer pop_addAnimation:springAnim forKey:@"bgcolor"];

}

//动画delegate

- (void)pop_animationDidApply:(POPAnimation *)anim {

//获取当前值

NSValue *value = [anim valueForKeyPath:@"currentValue"];

CGSize size = [value CGSizeValue];

//动画事务

[CATransaction setDisableActions:YES];

//通过一次函数 计算当前x值百分比

CGFloat percent = (size.height - self.math.b)/self.math.k;

self.circle1.strokeEnd = percent;

[CATransaction setDisableActions:NO];

//设置进度文字

self.centerLabel.text = [NSString stringWithFormat:@"%.f%%",fabs(percent*100)];

self.centerLabel.textColor =[UIColor colorWithRed:percent green:percent blue:percent alpha:1];

//设置玻璃view的透明度

self.blurImageView.alpha = 1 - percent;

}