項目地址:https://github.com/kciter/GlitchLabel
效果很酷炫,就是盯久了有點眼暈。
使用:
GlitchLabel
繼承自 UILabel
,源碼就一個文件妄迁。直接作為 UILabel 使用就有了默認(rèn)效果滓走。
實現(xiàn)機(jī)制?
init 的時候創(chuàng)建了一個 Timer姑躲,以 30Hz 的頻率觸發(fā) GlitchLabel.tick
在里面配置 Glitch 階段,并 setNeedsDisplay
:
@objc fileprivate func tick() {
phase += phaseStep
if phase > 1 {
phase = 0
channel = (channel == 2) ? 0 : channel + 1
amplitude = amplitudeBase + (amplitudeRange * random())
}
setNeedsDisplay()
}
這里面用到的都是 Double 類型的“magic number”盟蚣,又沒有注釋黍析,乍一看確實不太知道這幾個變量是干嘛的。大致看了一下屎开,channel
是用來生成紅綠藍(lán)三通道Glitch效果的阐枣,amplitude
是實時振幅,通過正弦函數(shù)使得 label 的偏移效果以原本位置為起點進(jìn)行往復(fù)奄抽,phase
是以 phaseStep
步進(jìn)的蔼两,與隨機(jī)生成的振幅一起用在 ChannelsImage
的生成上。
另外還有一個變量在 drawText
里:globalAlpha
, 也是一個隨機(jī)數(shù)逞度,實現(xiàn) ChannelsImage 的 Alpha 通道的隨機(jī)化额划。
視覺效果的配置在 drawText(in rect: CGRect)
里, 效果配置的核心函數(shù)是fileprivate func getChannelsImage(_ x1: CGFloat, x2: CGFloat, x3: CGFloat) -> UIImage
和 fileprivate func getScanlineImage(_ channelsImage: UIImage) -> UIImage
, 一個實現(xiàn)偏振效果,一個實現(xiàn)掃描線效果(大概是這么譯档泽?)
總的來說俊戳,整個 GlitchLabel 依賴于隨機(jī)之美,效果很棒馆匿。