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
【注意】使用注意事项同上。
五、渐变色背景
实现渐变色.png
相信我，代码做出来的视图效果远大于一张生硬的图片！
