代码实现弥散阴影按钮

最近流行一种设计叫弥散阴影,在用久了扁平之后找不到设计快感,又都开始尝试微阴影的效果;所以必须要有个靓骚的通透的阴影来表现一些质感,下面我用最简单的方式来玩玩弥散阴影。


代码实现弥散阴影按钮_第1张图片
btn.png
代码实现弥散阴影按钮_第2张图片
QQ20160704-3.png

这就是最简单的方式了,我这个设计小白也只会这个(囧); 当然更靓骚的方式还可以调整色阶、亮度、曲线,加上模糊等效果。
但这不是重点,重点是怎么用代码实现这个效果呢?模拟器中有一个是图片,猜哪个是代码实现的:

代码实现弥散阴影按钮_第3张图片
QQ20160704-5.png

上面一个是代码,下面是图片。
实现代码:

#define kShadowRadius 20

@implementation MyShadowButton

- (instancetype)initWithCoder:(NSCoder *)coder {
    self = [super initWithCoder:coder];
    if (self) {
        [self initCommon];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self initCommon];
    }
    return self;
}

- (void)initCommon {
    UIColor *clr = [UIColor colorWithRed:81.0/255.0 green:224.0/255.0 blue:172.0/255.0 alpha:1.0];
    self.backgroundColor = clr;
    self.layer.shadowColor = clr.CGColor;
    self.layer.cornerRadius = 5;
    self.layer.shadowOffset = CGSizeMake(0,0);
    self.layer.shadowOpacity = 1.0;
    self.layer.shadowRadius = kShadowRadius;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.layer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(kShadowRadius, self.bounds.size.height/2, self.bounds.size.width-(2*kShadowRadius), self.bounds.size.height/2)].CGPath;
}

@end

如果阴影位置不一样只要调一下shadowPath 就好了。

你可能感兴趣的:(代码实现弥散阴影按钮)