代码实现弥散阴影按钮

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

btn.png

QQ20160704-3.png

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

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 就好了。

代码实现弥散阴影按钮

推荐阅读更多精彩内容