2020-11-28|閱讀時間 ‧ 約 3 分鐘

漸層背景的製作和mask功能,基礎功再升級!

    目的:

    1. 做出漸層的背景。
    2. mask遮罩。

    做出漸層的背景

    amp-img-attr

    運用CAGradientLayer()建立實現漸層功能的實例。

    然後UIView建立一個確切位置的框框。

    根據.colors 的array可設定由哪兩個顏色形成漸層。

    gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

    也可以藉由設定startPoint和endPoint去決定漸層方向。

    這裡有研究一下bounds和frame的差別:

    bounds:相對於自己的父圖片的位置。

    frame: 在整張圖中的絕對位置。

    最後記得.addsublayer將圖片加在我們事先設定好的框框中才會出現我們所設定的漸層。(若圖片設定完沒跑出來可以注意這一點!!!)

    mask功能

    這裡要注意,因為mask功能只有在UIimageview中有,所以必須將圖片轉換成UIimageview的形式才行。

    另外圖片必須在asset中設為3x,因為圖片可能跑掉所以顯示不出在projecy中,接著可以運用.frame去調整圖片的位置讓他顯示出來。

    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.