1566971015391.gif

前段時(shí)間我們的app加入了一些卡通游戲的元素，很多頁面的背景圖設(shè)計(jì)要求體現(xiàn)立體效果。一開始讓UI設(shè)計(jì)師切了各種大小的背景圖片，期間還使用了點(diǎn)9圖片，結(jié)果還是達(dá)不到想要的效果（幸苦我們的UI了）。最后，還是決定使用代碼來實(shí)現(xiàn)效果，以適應(yīng)不同的視圖大小。廢話不多說，接下來給大家分享一下一些不同的視圖效果。

一、陰影效果

實(shí)現(xiàn)陰影.png

【注意】*實(shí)際程序中考慮到有些時(shí)候我們的目標(biāo)視圖View的frame會(huì)動(dòng)態(tài)改變（例：Xib中cell的長度隨屏幕的大小改變，網(wǎng)絡(luò)接口數(shù)據(jù)改變view內(nèi)容進(jìn)而改變view大?。?，而陰影效果的添加僅按照代碼執(zhí)行時(shí)的frame而渲染的，所以建議大家在頁面出現(xiàn)時(shí)viewDidAppear方法中調(diào)用該方法。

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

二、雙層立體背景

立體背景圖.png

【注意】該方法的參數(shù)frame中x，y一定要為0，不然位置會(huì)錯(cuò)亂。具體使用可以參照下方：

- (UIView *)backView {//backView是目標(biāo)視圖
    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，不然位置會(huì)錯(cuò)亂。
        [_backView insertSubview:back atIndex:0];//將效果圖添加在目標(biāo)View的最底層
        self.doubleView = back;
    }
    return _backView;
}

三、立體時(shí)間軸線

實(shí)現(xiàn)時(shí)間軸.png

【注意】同樣，使用時(shí)方法的參數(shù)frame中x，y一定要為0，將效果圖添加在目標(biāo)View的最底層。

四、立體骨牌背景

立體骨牌背景.png

【注意】使用注意事項(xiàng)同上。

五、漸變色背景

實(shí)現(xiàn)漸變色.png

相信我，代碼做出來的視圖效果遠(yuǎn)大于一張生硬的圖片！