這篇文章主要為大家展示了“iOS如何實(shí)現(xiàn)水波紋動(dòng)畫效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“iOS如何實(shí)現(xiàn)水波紋動(dòng)畫效果”這篇文章吧。

成都創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元漢南做網(wǎng)站,已為上家服務(wù),為漢南各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

，首先要知道以下幾點(diǎn)知識(shí)：

1.正弦函數(shù)：y = Asin(wx +b) + c。相信大家都比較熟悉。

2.CAShapeLayer的簡(jiǎn)單實(shí)用，相信看一下，就是知道其大概的用途了，形狀Layer層。和用戶顯示圖形的Layer，繼承于layer，好了，廢話不多說，直接上圖吧。

上面的知識(shí)點(diǎn)，我會(huì)以代碼的方式，梳理上面的知識(shí)點(diǎn)，不過首先我還是上傳效果圖吧，有圖有真相，才是事實(shí)嘛。

1.效果圖：

下面開始上代碼。

2.創(chuàng)建變量

//這里的lazy：是懶加載 就是OC中重寫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)的注釋，我就不再做解釋了。

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,不說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)檫@樣的話，可以才像水的波紋不是？，這里還有個(gè)要說的是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)建都是通過for循環(huán)創(chuàng)建路徑，其路徑是通過正弦函數(shù)，記得不錯(cuò)的話，是在初中的時(shí)候?qū)W的，哈哈。同時(shí)，創(chuàng)建好路徑后，要給layer，這樣的話，shapeLayer才能知道要繪制什么樣的路徑和圖形。同時(shí)這兩個(gè)要有個(gè)角度的差值，這樣的話，才能產(chǎn)生相應(yīng)的效果。

以上是“iOS如何實(shí)現(xiàn)水波紋動(dòng)畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：iOS如何實(shí)現(xiàn)水波紋動(dòng)畫效果
URL網(wǎng)址：http://www.chinadenli.net/article36/iijipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)