鏤空文字 類歌詞進度顯示文字

2021-08-19 10:32:05 字數 3836 閱讀 5185

demo詳見github:jxtmarklabel

- (void)drawsubtractedtext:(nsstring *)text inrect:(cgrect)rect incontext:(cgcontextref)context
該類的呼叫同系統的uilabel類似(該類是其子類),不過因為封裝的問題,初始化僅支援initwithframe一種,也就是不支援xib

再回到文章最開始的話題,因為有了鏤空文字,這個問題就很簡單了,只需要在這個label的底層新增乙個可滑動的顏色塊,漸變效果也就有了,效果如下:

如果看得足夠仔細,可以發現有幾個title之間存在很細的裂隙,那是因為我這裡的標題的label尺寸是根據文字長短動態計算的,用了boundingrectwithsize方法,實際發現,一旦title的內容是中文和數字或字母混合的,例如圖中的b站,就會產生計算誤差,雖然很小。。。

ios歌詞逐漸變色動畫

基於core animation的ktv歌詞檢視的平滑實現

因為沒有像歌詞進度顯示那樣有那麼多顧慮,我這裡使用了一種比較白痴的方法,這個方法原來是星級評價那裡使用的,星級評價就是滿5星,根據資料動態展示幾點幾星的那個問題,有的人是直接幾星貼幾張圖,半星就是半顆星的圖,但實際上用兩層view再加一層控制的view,一共三層,疊加起來,就很容易實現這個效果:

上圖中:底層是白色字型的那個label,也就是backgroundlabel,中間層,也就是現在標示的藍色的透明view,是clipview,最上層橙色文字的label,是foregroundlabel

三者的層級關係如下:

[self

addsubview:

self.backgroundlabel];

[self.clipview addsubview:

self.foregroundlabel];

[self

addsubview:

self.clipview];

foregroundlabelclipview的子檢視,_clipview.clipstobounds = yes需要設定,此時控制clipview的寬度,也就控制了foregroundlabel的文字顯示的進度(label的顯示寬度),backgroundlabelclipview是並列關係,後者在前者圖層的上層,也就展現了背景label隨著中間層clipview的動態寬度變化,從而動態渲染顏色的視覺假象。星級控制也是同樣的原理。

jxtprogresslabel的使用也同系統的uilabel類似,初始化也僅支援initwithframe一種,初始化時還需要設定前景和背景label的顏色:

_progresslabel.backgroundtextcolor = [uicolor whitecolor];

_progresslabel.foregroundtextcolor = [uicolor orangecolor];

控制顯示進度時,支援兩種方法,一種是直接控制clipview的寬度,也就是

_progresslabel.clipwidth,但這種方式比較侷限,推薦直接控制

_progresslabel2.dispprogressdispprogress0-1之間的小數。

jxtprogresslabel除了可以作為類似的歌詞進度顯示,還可以做進度指示器,具體用法看具體需求了。

還是回到最開始的問題,如果直接使用之前提到的jxtprogresslabel,很明顯是不能直接滿足需求的,因為title的顏色是變過之後,又要變回的,所以,上面的jxtprogresslabel的clipview的寬度應該是限定的或者說應該是隨著title長短動態改變的,而不是一直增大的。

如果只是限制clipview的寬度,位置水平移動,很明顯,其子檢視foregroundlabel也會跟著移動,那麼之前動態渲染的假象也就不復存在了,這裡解決的方法也比較取巧:foregroundlabelframebackgroundlabel一樣,但是其座標隨著固定寬度的clipview的移動,反方向退行,三者之間的圖層關係還是不變的。

具體的效果就是最開始的那個展示。

jxtslidecliplabeldemo中只是原理的封裝,沒有考慮具體情境而普適,demo中是根據title數量,動態建立了label,其實只使用乙個label應該也是可以的,只要保證三者的圖層關係就好。只是用乙個labelforegroundlabelbackgroundlabel的話,標題組應該拼接起來成乙個字串,具體沒有試,應該是行得通的。

這個的實現原理和jxtslidecliplabel一樣,可以移動的view中貼了一張大圖,但限於clipview尺寸,只能顯示一部分,這一部分根據移動的座標,也動態「退行」,就成了這個效果,好像一塊「***」,比較有意思,那個圓形的本來是想試著做成乙個放大鏡的,但是方法後的檢視的座標變換沒有處理好,暫時放棄了……

parallaxview的**同樣只是演示,滑動檢視的邊界沒有限定,可以自行處理。

ios 特種label:鏤空文字、類歌詞進度顯示文字

時尚的3D鏤空文字效果例項教程

今天剛好在網上看到了時尚的3d文字效果,於是動手模仿設計了一下。下面給大家分享一下俺的勞動成果吧 從效果圖可見,這文字的3d效果不僅僅是從陰影和渲染上下了點功夫,連字型上也同樣使用了sullivan三種鏤空效果的字型 例項中附有 下面就簡述一下整個製作過程吧!1 首先新建乙個1200 500尺寸的文...

清空文字內容truncate

all dat str 1213124123425 寫入資訊 with open 音訊資訊1111111111111 w as f print 寫入資訊的長度為 f.write all dat str 確認有資訊 with open 音訊資訊1111111111111 r as f print 確認...

關於SpannableString文字類詳解

textview txtinfo textview findviewbyid r.id.tv spannablestring 文字類,包含不可變的文字但可以用已有物件替換和分離。可變文字類參考spannablestringbuilder spannablestring ss new spannabl...