iOS 给视图设置渐变色,同时给边框设置渐变色

请添加图片描述

- (void)layoutSubviews
{
    [super layoutSubviews];
    //背景渐变
    CAGradientLayer *gl = self.gradientLayer;
    gl.frame = CGRectMake(0, 0, CGRectGetWidth(self.gradientView.frame), CGRectGetHeight(self.gradientView.frame));
    gl.startPoint = CGPointMake(0.52, 1);
    gl.endPoint = CGPointMake(0.52, 0);
    gl.colors = @[(__bridge id)[UIColor colorWithRed:255/255.0 green:241/255.0 blue:241/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor];
    gl.locations = @[@(0), @(1.0f)];
    //边框渐变
    CAGradientLayer *gradientLayer = self.gradientBorderLayer;
    gradientLayer.frame = CGRectMake(0, 0, CGRectGetWidth(self.gradientView.frame), CGRectGetHeight(self.gradientView.frame));
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithHexString:@"0xFBD5D5"].CGColor, (__bridge id)[UIColor colorWithHexString:@"0xFBD5D5"].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.lineWidth = 1;
    maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.gradientView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(8 * PLUS_SCALE, 8 * PLUS_SCALE)].CGPath;
    maskLayer.fillColor = UIColor.clearColor.CGColor;
    maskLayer.strokeColor = UIColor.redColor.CGColor;
    gradientLayer.mask = maskLayer;
}

#pragma mark - lazy load

- (UIView *)gradientView
{
    if (!_gradientView) {
        _gradientView = [[UIView alloc]  init];
        _gradientView.layer.masksToBounds = YES;
        _gradientView.layer.cornerRadius = 8 * PLUS_SCALE;
    }
    return _gradientView;
}

- (CAGradientLayer *)gradientLayer
{
    if (!_gradientLayer) {
        _gradientLayer = [[CAGradientLayer alloc] init];
    }
    return _gradientLayer;
}

- (CAGradientLayer *)gradientBorderLayer
{
    if (!_gradientBorderLayer) {
        _gradientBorderLayer = [[CAGradientLayer alloc] init];
    }
    return _gradientBorderLayer;
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、波纹动画主要依赖于CAShapeLayer的绘制,使用帧动画实现;需要使用多个CAShapeLayer通过y值变换组成(这里我只是用了2个CAShapeLayer)。 2、渐变由CAGradientLayer完成。 ``` - (void)changeFirstWaveLayerPath { CGMutablePathRef path = CGPathCreateMutable(); CGFloat y = _wavePointY; CGPathMoveToPoint(path, nil, 0, y); for (float x = 0.0f; x <= _waveWidth; x ) { y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 270) _wavePointY; CGPathAddLineToPoint(path, nil, x, y); } CGPathAddLineToPoint(path, nil, _waveWidth, 0); CGPathAddLineToPoint(path, nil, 0, 0); CGPathCloseSubpath(path); _shapeLayer1.path = path; CGPathRelease(path); } - (void)changeSecondWaveLayerPath { CGMutablePathRef path = CGPathCreateMutable(); CGFloat y = _wavePointY; CGPathMoveToPoint(path, nil, 0, y); for (float x = 0.0f; x <= _waveWidth; x ) { y = _waveAmplitude * 1.6 * sin((250 / _waveWidth) * (x * M_PI / 180) - _waveOffsetX * M_PI / 180) _wavePointY; CGPathAddLineToPoint(path, nil, x, y); } CGPathAddLineToPoint(path, nil, _waveWidth, 0); CGPathAddLineToPoint(path, nil, 0, 0); CGPathCloseSubpath(path); _shapeLayer2.path = path; CGPathRelease(path); } ``` 方法调用: ``` _waveOffsetX = _waveSpeed; [self changeFirstWaveLayerPath]; [self changeSecondWaveLayerPath]; [self.layer addSublayer:self.gradientLayer1]; self.gradientLayer1.mask = _shapeLayer1; [self.layer addSublayer:self.gradientLayer2]; self.gradientLayer2.mask = _shapeLayer2; ```
UniApp是一个基于Vue.js开发的跨平台应用框架,它可以帮助开发者构建多个平台的应用程序,包括iOS、Android、H5、以及小程序等。 关于设置行内渐变,这通常是指在文本或其他元素内部创建渐变效果。这可以通过CSS(级联样式表)来实现。以下是一个基本的例子: ```html <template> <view class="container"> <text class="gradient-text" :style="gradientStyle">这是一个带有渐变的文本</text> </view> </template> <style> .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .gradient-text { width: 100%; height: 100%; font-size: 24px; color: #fff; } .gradient-text.text-gradient { background: linear-gradient(to right, red, orange); border-radius: 10px; } </style> ``` 在这个例子中,`.gradient-text` 类的元素设置了背景渐变,从红渐变到橙。这个渐变的效果会应用在文本的内部,形成一种行内渐变的效果。需要注意的是,这里使用的线性渐变是从左到右的,但你可以根据需要调整渐变的开始和结束颜,以及其方向。 你还可以通过调整`border-radius`属性来改变渐变的方向和形状。例如,如果你想要一个圆形渐变,你可以将`border-radius`设置为`50%`。如果你想要一个更复杂的渐变效果,你可能需要使用更高级的CSS技术,如`background-clip`属性。 在UniApp中,你可以使用以上方式在Vue组件的样式中设置行内渐变。记得在开发过程中保持样式和内容的一致性,并进行充分的测试,以确保效果符合你的预期。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值