iOS 水波紋動(dòng)畫(huà)的實(shí)現(xiàn)效果
本人最近在研究iOS動(dòng)畫(huà),至于原理,我不在這里說(shuō)了。畢竟這里的標(biāo)題:水波紋的實(shí)現(xiàn)。
在這里,要學(xué)習(xí)水波紋的實(shí)現(xiàn),首先要知道以下幾點(diǎn)知識(shí):
1.正弦函數(shù):y = Asin(wx +b) + c。相信大家都比較熟悉。
2.CAShapeLayer的簡(jiǎn)單實(shí)用,相信看一下,就是知道其大概的用途了,形狀Layer層。和用戶(hù)顯示圖形的Layer,繼承于layer,好了,廢話(huà)不多說(shuō),直接上圖吧。
上面的知識(shí)點(diǎn),我會(huì)以代碼的方式,梳理上面的知識(shí)點(diǎn),不過(guò)首先我還是上傳效果圖吧,有圖有真相,才是事實(shí)嘛。
1.效果圖:
下面開(kāi)始上代碼。
2.創(chuàng)建變量
//這里的lazy:是懶加載 就是OC中重寫(xiě)get,set方法 lazy var waveDisplaylink = CADisplayLink()//相比NSTimer下,這里用CADisplayLink主要是精確點(diǎn),其頻率:1/60 lazy var firstWaveLayer = CAShapeLayer() lazy var secondWaveLayer = CAShapeLayer() /// 基礎(chǔ)描述 正弦函數(shù) /// y=Asin(ωx+φ)+ b /// A : wavaA /// w : 1/waveW /// φ : offsetφ /// b : b private var waveA: CGFloat = 0 private var waveW: CGFloat = 0 private var offsetX: CGFloat = 0 private var b : CGFloat = 0 //水紋的移動(dòng)的速度 var waveSpeed : CGFloat = 0
上面的變量的,都有相關(guān)的注釋?zhuān)揖筒辉僮鼋忉屃恕?br />
3.數(shù)據(jù)的初始化
//MARK: - 數(shù)據(jù)的初始化 private func initData(){ waveSpeed = 0.05 waveA = 8 // 設(shè)置周期 :( 2* M_PI)/waveW = bounds.size.width 。因?yàn)樯婕暗氖莑ayer,所以只談bounds,不說(shuō)frame waveW = 2 * CGFloat(M_PI) / bounds.size.width b = bounds.size.height / 2 }
4.UI的初始化
private func configUI(){ firstWaveLayer.fillColor = UIColor.init(colorLiteralRed: 69/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.5).cgColor secondWaveLayer.fillColor = UIColor.init(colorLiteralRed: 69/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.5).cgColor layer.addSublayer(firstWaveLayer) layer.addSublayer(secondWaveLayer) waveDisplaylink = CADisplayLink(target: self, selector: #selector(getCurrentWave)) waveDisplaylink.add(to: RunLoop.current, forMode: .commonModes) }
這里創(chuàng)建兩個(gè)shapeLayer,因?yàn)檫@樣的話(huà),可以才像水的波紋不是?,這里還有個(gè)要說(shuō)的是CADisplayLink,主要是他比NSTimer更精準(zhǔn),屏幕刷新頻率(FPS)是60,,iOS設(shè)備的刷新頻率是固定的,正常情況下回再每次刷新結(jié)束后都調(diào)用,也就是60次/s.所以選擇CADisplayLink。
5.下面的關(guān)鍵部分,代碼如下:
@objc private func getCurrentWave() { offsetX += waveSpeed setCurrentStatusWavePath() } //MARK: - 關(guān)鍵部分 private func setCurrentStatusWavePath() { // 創(chuàng)建一個(gè)路徑 let firstPath = CGMutablePath() var firstY = bounds.size.width/2 firstPath.move(to: CGPoint(x: 0, y: firstY)) for i in 0...Int(bounds.size.width) { firstY = waveA * sin(waveW * CGFloat(i) + offsetX) + b firstPath.addLine(to: CGPoint(x: CGFloat(i), y: firstY)) } firstPath.addLine(to: CGPoint(x: bounds.size.width, y: bounds.size.height)) firstPath.addLine(to: CGPoint(x: 0, y: bounds.size.height)) firstPath.closeSubpath() firstWaveLayer.path = firstPath // 創(chuàng)建一個(gè)路徑 let secondPath = CGMutablePath() var secondY = bounds.size.width/2 secondPath.move(to: CGPoint(x: 0, y: secondY)) for i in 0...Int(bounds.size.width) { secondY = waveA * sin(waveW * CGFloat(i) + offsetX - bounds.size.width/2 ) + b secondPath.addLine(to: CGPoint(x: CGFloat(i), y: secondY)) } secondPath.addLine(to: CGPoint(x: bounds.size.width, y: bounds.size.height)) secondPath.addLine(to: CGPoint(x: 0, y: bounds.size.height)) secondPath.closeSubpath() secondWaveLayer.path = secondPath }
這里創(chuàng)建都是通過(guò)for循環(huán)創(chuàng)建路徑,其路徑是通過(guò)正弦函數(shù),記得不錯(cuò)的話(huà),是在初中的時(shí)候?qū)W的,哈哈。同時(shí),創(chuàng)建好路徑后,要給layer,這樣的話(huà),shapeLayer才能知道要繪制什么樣的路徑和圖形。同時(shí)這兩個(gè)要有個(gè)角度的差值,這樣的話(huà),才能產(chǎn)生相應(yīng)的效果。
總結(jié):
看到這里同學(xué)是不是感覺(jué)很簡(jiǎn)單呀,好了,就說(shuō)到這里,其下載的地址我這邊會(huì)稍后上傳的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS開(kāi)發(fā)之topLayoutGuide和bottomLayoutGuide的使用小技巧分享
這篇文章主要給大家介紹了關(guān)于iOS開(kāi)發(fā)之topLayoutGuide和bottomLayoutGuide使用的一些小技巧,需要的朋友可以參考下2017-11-11詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法
這篇文章主要介紹了詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法,網(wǎng)絡(luò)狀態(tài)是非常重要的知識(shí),感興趣的同學(xué),必須要看一下2021-04-04Unity移動(dòng)端的復(fù)制要這么寫(xiě)示例代碼
這篇文章主要給大家介紹了關(guān)于Unity移動(dòng)端的復(fù)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08簡(jiǎn)單介紹iOS開(kāi)發(fā)中關(guān)于category的應(yīng)用
這篇文章主要介紹了iOS開(kāi)發(fā)中關(guān)于category的應(yīng)用,代碼仍然基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-09-09iOS開(kāi)發(fā)APP跳轉(zhuǎn)到設(shè)置或系統(tǒng)頁(yè)面詳解
這篇文章主要為大家介紹了iOS開(kāi)發(fā)APP跳轉(zhuǎn)到設(shè)置或系統(tǒng)頁(yè)面詳解,<BR>有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06ios實(shí)現(xiàn)簡(jiǎn)單隨便移動(dòng)的AR功能
這篇文章主要為大家詳細(xì)介紹了ios實(shí)現(xiàn)簡(jiǎn)單隨便走的AR功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02