1566971015391.gif

前段时间我们的app加入了一些卡通游戏的元素，很多页面的背景图设计要求体现立体效果。一开始让UI设计师切了各种大小的背景图片，期间还使用了点9图片，结果还是达不到想要的效果（幸苦我们的UI了）。最后，还是决定使用代码来实现效果，以适应不同的视图大小。废话不多说，接下来给大家分享一下一些不同的视图效果。

一、阴影效果

实现阴影.png

【注意】*实际程序中考虑到有些时候我们的目标视图View的frame会动态改变（例：Xib中cell的长度随屏幕的大小改变，网络接口数据改变view内容进而改变view大小），而阴影效果的添加仅按照代码执行时的frame而渲染的，所以建议大家在页面出现时viewDidAppear方法中调用该方法。

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    [Tool getViewShadowWithView:self.firstView shadowValue:1.0 color:[UIColor lightGrayColor]];
}

二、双层立体背景

立体背景图.png

【注意】该方法的参数frame中x，y一定要为0，不然位置会错乱。具体使用可以参照下方：

- (UIView *)backView {//backView是目标视图
    if (!_backView) {
        _backView = [[UIView alloc] initWithFrame:CGRectMake(10, 279.0/375 * k_SCREEN_WIDTH - 75, SCREEN_WIDTH - 20, 150)];
        UIView *back = [Tool doubleViewWithFrame:CGRectMake(0, 0, _backView.width, _backView.height)];//此处的x，y一定要为0，不然位置会错乱。
        [_backView insertSubview:back atIndex:0];//将效果图添加在目标View的最底层
        self.doubleView = back;
    }
    return _backView;
}

三、立体时间轴线

实现时间轴.png

【注意】同样，使用时方法的参数frame中x，y一定要为0，将效果图添加在目标View的最底层。

四、立体骨牌背景 立体骨牌背景.png

【注意】使用注意事项同上。

五、渐变色背景

实现渐变色.png

相信我，代码做出来的视图效果远大于一张生硬的图片！