ios switch外观_iOS 那些年好看的UISwitch控件的效果

最新推荐文章于 2022-07-09 17:12:00 发布

别说你也难过

最新推荐文章于 2022-07-09 17:12:00 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

文章标签： ios switch外观

本文链接：https://blog.youkuaiyun.com/weixin_28813357/article/details/114507969

这篇博客介绍了如何自定义iOS中的UISwitch控件，实现一个美观的开关动画效果。作者通过继承UISwitch类，并在valueChanged事件中触发扩散和收缩动画。文章详细讲解了动画实现的步骤，包括计算小圆点的坐标、扩散动画的制作以及在动画结束后修改背景颜色。还提到了使用代理方法来配合动画改变文字颜色，提供了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

距离上次更新又过了好久(懒懒懒😪)

今天来写一篇关于UISwitch(开关控件)个人觉得不错的交互动画

先上图，这是在别的地方看到的效果，拿来实现以下~

0f436230e240

UISwitch_示例.gif

本文直接讲如何实现这个效果，代码上没有做太多的优化，直接继承类UISwitch

所以可能会出现类似

sender.subviews[0].subviews.lastObject.frame

这种蛋疼的代码(见谅见谅~)，所以你要先理解系统自己的UISwitch控件的层级关系，后文虽然会指出我用的是哪个View，但自己先去Debug view hierarchy里面看看会更便于理解。(这里先上一张图便于简单的理解)

0f436230e240

Tip.png

这个被我改成黑色背景的View就是上文那段蛋疼的代码sender.subviews[0].subviews.lastObject

其实说白了就是UISwitch的那个小圆点

接下来讲解如何实现gif的效果

1.获取小圆点的坐标(考虑到用户体验和交互友好性，动画扩散和收缩的起始位置应该用小圆点作为参考中心)

2.扩散动画

3.动画结束后修改真实背景色

#import

@interface AnimationSwitch : UISwitch

@end

为了达到点击反馈的效果(注意这里用到的是UIControlEventValueChanged)

- (instancetype)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

[self addTarget:self action:@selector(animationSwitchValueChanged:) forControlEvents:UIControlEventValueChanged];

}

return self;

}

animationSwitchValueChanged:

- (void)animationSwitchValueChanged:(AnimationSwitch *)sender {

if (sender.on) {

[self circleOpen:[sender.subviews[0] convertRect:sender.subviews[0].subviews.lastObject.frame toView:self.superview]];

}

else {

[self circleClose:[sender.subviews[0] convertRect:sender.subviews[0].subviews.lastObject.frame toView:self.superview]];

}

这里说到convertRect: toView:函数，如果不明白就去搜一下，这个方法的作用就是拿到小圆点在父View的坐标，然后调用动画的方法。

分割线，划重点了！！！

这个动画放大的圆要放多大？(接下来是数学题。。。别问我为什么，我也是在模模糊糊的记忆力翻出来的 emmmmmm)

0f436230e240

Math_Tip.png

所以。。计算这个radius

CGFloat radius = sqrtf(powf((startFrame.origin.x+startFrame.size.width/2.f), 2)+powf((startFrame.origin.y+startFrame.size.height/2.f), 2));

动画部分代码注释都写在代码里不明白可以留言问我~

- (void)circleOpen:(CGRect)startFrame {

//@Protocol 在这个Demo中的作用是在改变背景颜色的时候，改变文字颜色，避免颜色相近导致看不清的问题

if ([self.switchDelegate respondsToSelector:@selector(willBeginAnimte)]) {

[self.switchDelegate willBeginAnimte];

}

//用于给动画CAShapeLayer作为载体的View

self.presentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.superview.bounds.size.width, self.superview.bounds.size.height)];

self.presentView.backgroundColor = self.onTintColor;

[self.superview insertSubview:self.presentView atIndex:0];

//通过传入的frame计算UIBezierPath的起始位置

UIBezierPath *maskStartBP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(startFrame.origin.x+startFrame.size.width/2.f, startFrame.origin.y+startFrame.size.height/2.f, 0, 0)];

CGFloat radius = sqrtf(powf((startFrame.origin.x+startFrame.size.width/2.f), 2)+powf((startFrame.origin.y+startFrame.size.height/2.f), 2));

//通过radius计算UIBezierPath的结束位置关于CGRectInset的作用不明白的可以自行搜索简书

UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(startFrame, -radius, -radius)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.path = maskFinalBP.CGPath;

maskLayer.backgroundColor = (__bridge CGColorRef)([UIColor whiteColor]);

self.presentView.layer.mask = maskLayer;

//动画

CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

maskLayerAnimation.fromValue = (__bridge id)(maskStartBP.CGPath);

maskLayerAnimation.toValue = (__bridge id)((maskFinalBP.CGPath));

maskLayerAnimation.duration = 0.3f;

maskLayerAnimation.delegate = self;

maskLayerAnimation.repeatCount = 1;

maskLayerAnimation.removedOnCompletion = NO;

maskLayerAnimation.fillMode = kCAFillModeForwards;

[maskLayer addAnimation:maskLayerAnimation forKey:@"path"];

}

- (void)circleClose:(CGRect)startFrame {

if ([self.switchDelegate respondsToSelector:@selector(willEndAnimte)]) {

[self.switchDelegate willEndAnimte];

}

self.presentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.superview.bounds.size.width, self.superview.bounds.size.height)];

self.presentView.backgroundColor = self.onTintColor;

[self.superview insertSubview:self.presentView atIndex:0];

self.superview.backgroundColor = [UIColor whiteColor];

UIBezierPath *maskStartBP = [UIBezierPath bezierPathWithOvalInRect:startFrame];

CGFloat radius = sqrtf(powf((startFrame.origin.x+startFrame.size.width/2.f), 2)+powf((startFrame.origin.y+startFrame.size.height/2.f), 2));

UIBezierPath *maskFinalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(startFrame, -radius, -radius)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.path = maskFinalBP.CGPath;

maskLayer.backgroundColor = (__bridge CGColorRef)([UIColor whiteColor]);

self.presentView.layer.mask = maskLayer;

CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

maskLayerAnimation.fromValue = (__bridge id)(maskFinalBP.CGPath);

maskLayerAnimation.toValue = (__bridge id)((maskStartBP.CGPath));

maskLayerAnimation.duration = 0.3f;

maskLayerAnimation.delegate = self;

maskLayerAnimation.repeatCount = 1;

maskLayerAnimation.removedOnCompletion = NO;

maskLayerAnimation.fillMode = kCAFillModeForwards;

[maskLayer addAnimation:maskLayerAnimation forKey:@"path"];

}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag

{

self.presentView.layer.mask = nil;

[self.presentView removeFromSuperview];

if (self.on) {

self.superview.backgroundColor = self.onTintColor;

}

遵循Protocol完成修改字的颜色

- (void)willBeginAnimte {

self.titleLabel.textColor = [UIColor whiteColor];

}

- (void)willEndAnimte {

self.titleLabel.textColor = RGB(36, 173, 251);

}

到此基本就完成了

附上Demo链接

里面有各种各样奇奇怪怪的东西。。都是自己在网上看到自己觉得好看的效果乱写的Demo~，如果有需要一片文章来讲解的也可以留言告诉我。

就酱。

最后附上我自己做的效果图

0f436230e240

效果图_UISwitch.gif