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;
}
网友评论