注册 登录
主题 : 请问这种文字根据滑动部分变色的效果怎么实现的
级别: 骑士

状态: 连续签到 - [89天]
UID: 495897
精华: 1
发帖: 366
可可豆: 1250 CB
威望: 1064 点
在线时间: 893(时)
注册时间: 2015-08-08
最后登录: 2019-01-07
0 楼:  发表于: 2019-01-02 18:07    发自: Web Page
来源于 一般提问 分类

请问这种文字根据滑动部分变色的效果怎么实现的   

想实现这个样子分段控制器,但是不知道这个文字根据滑块 mask 变色的效果怎么做的,请大佬指点一下 或者给个网址我研究一下,谢谢
网上没有找到类似效果的文章


图片:3D1077B3-43B1-460A-9229-F9A58F6887CE.png
级别: 骑士
UID: 311833
精华: 0
发帖: 309
可可豆: 557 CB
威望: 536 点
在线时间: 3588(时)
注册时间: 2014-04-29
最后登录: 2019-01-08
1 楼:  发表于: 2019-01-02 19:03    发自: Web Page
两层 view

两层视图

下边黑色文字

上边白色文字灰背景

在上边做个 遮罩  就可以了



不过像我这种眼瞎的,不知细看,根本看不出来那个过度效果
级别: 骑士

状态: 连续签到 - [89天]
UID: 495897
精华: 1
发帖: 366
可可豆: 1250 CB
威望: 1064 点
在线时间: 893(时)
注册时间: 2015-08-08
最后登录: 2019-01-07
2 楼:  发表于: 2019-01-03 08:48    发自: Web Page
回 1楼(西门诺) 的帖子
哦,我明白你的意思的了,我之前一直都是想着通过 添加渐变layer的方法去实现 ,谢谢大佬,一会我试着实现下
级别: 侠客

状态: 连续签到 - [89天]
UID: 544261
精华: 0
发帖: 132
可可豆: 578 CB
威望: 400 点
在线时间: 192(时)
注册时间: 2016-02-23
最后登录: 2019-01-07
3 楼:  发表于: 2019-01-03 09:32    发自: Web Page
厉害厉害!
级别: 新手上路
状态: 连续签到 - [2天]
UID: 327120
精华: 0
发帖: 42
可可豆: 74 CB
威望: 76 点
在线时间: 356(时)
注册时间: 2014-06-16
最后登录: 2019-01-08
4 楼:  发表于: 2019-01-03 10:54    发自: Web Page
叫大哥吧
{
    CGFloat firstIndex;
    CGFloat wight;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray *array=@[@"动态",@"附近"];
    UIView *view=[[UIView alloc]initWithFrame:CGRectMake(100, 50,200,30)];
    view.backgroundColor=[UIColor groupTableViewBackgroundColor];
    wight=view.frame.size.width/2;
    for (int i=0;i<array.count; i++) {
        UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame=CGRectMake(wight*i,0,wight,30);
        [btn setTitle:array forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
        btn.tag=i;
        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:btn];
    }
    UIView *gView=[[UIView alloc]initWithFrame:CGRectMake(0,0,wight,30)];
    gView.backgroundColor=[UIColor blueColor];
    gView.layer.masksToBounds=YES;
    gView.layer.cornerRadius=15;
    gView.clipsToBounds=YES;
    gView.tag=100;
    for (int i=0;i<array.count; i++) {
        UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame=CGRectMake(wight*i,0,wight,30);
        [btn setTitle:array forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        btn.tag=i;
        [gView addSubview:btn];
    }
    [view addSubview:gView];
    [self.view addSubview:view];
    
    // Do any additional setup after loading the view, typically from a nib.
}
- (void)btnClick:(UIButton *)btn
{
    NSInteger index=btn.tag-firstIndex;
    if (index!=0) {
        [UIView animateWithDuration:1 animations:^{
            CGRect superFrame=[btn.superview viewWithTag:100].frame;
            superFrame.origin.x=superFrame.origin.x+self->wight*index;
            [btn.superview viewWithTag:100].frame=superFrame;
            for (UIView *view in [btn.superview viewWithTag:100].subviews) {
                CGRect viewFrame=view.frame;
                viewFrame.origin.x=viewFrame.origin.x-self->wight*index;
                view.frame=viewFrame;
            }
        } completion:^(BOOL finished) {
            self->firstIndex=btn.tag;
        }];
    }
}

级别: 骑士

状态: 连续签到 - [89天]
UID: 495897
精华: 1
发帖: 366
可可豆: 1250 CB
威望: 1064 点
在线时间: 893(时)
注册时间: 2015-08-08
最后登录: 2019-01-07
5 楼:  发表于: 2019-01-03 11:37    发自: Web Page
回 4楼(lllym456) 的帖子
我主要是想知道那个文字根据滑块位置变颜色的效果是怎么实现的,已经按照2楼的思路实现了,其实就是设置一个 maskView 就可以了

,不过是还是感谢你 : 大哥
级别: 新手上路
状态: 连续签到 - [3天]
UID: 465164
精华: 0
发帖: 71
可可豆: 121 CB
威望: 118 点
在线时间: 368(时)
注册时间: 2015-04-22
最后登录: 2019-01-08
6 楼:  发表于: 2019-01-04 09:44    发自: Web Page
override func draw(_ rect: CGRect) {
        super.draw(rect)
        self.fillColor?.set()
        var newRect:CGRect = rect
        newRect.size.width = rect.size.width * self.progress
        UIRectFillUsingBlendMode(newRect, CGBlendMode.sourceIn)
    }
级别: 侠客
状态: 连续签到 - [91天]
UID: 537578
精华: 0
发帖: 156
可可豆: 665 CB
威望: 501 点
在线时间: 963(时)
注册时间: 2016-01-10
最后登录: 2019-01-08
7 楼:  发表于: 2019-01-07 14:56    发自: Web Page
回 4楼(lllym456) 的帖子
快速连点,它会多位移距离

bt365官网社区转载内容已尽可能注明出处,如未能核实来源或转发内容图片有权利瑕疵的,请及时联系社区进行修改或删除【联系方式QQ : 3442093904 邮箱:support@cocoachina.com】文章内容为作者独立观点,不代表bt365官网社区立场。版权归原作者所有,如申请授权请联系作者,因文章侵权bt365官网社区不承担任何法律及连带责任。

描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部