前言:
在多次地方我看到一個非常好看的線條動畫-波浪。給人很舒服的趕腳,并且也很實用在項目中,比如:下載文件進度,清理緩存,量表等等。。為此,我也寫了一片文章來去講述該波浪動畫如何去實現的,并在此基礎上拓展。
先上個y=Asin(ωx+φ)+h各參數變化的效果圖:
通過上面的效果可以看出,影響波浪的高度只有一個參數h,影響波浪的速度只有一個參數φ,影響波浪的波長有兩個參數ω和A。
具體代碼github
分析:
? ? 看著波浪動畫,形狀能想到就是正弦或余弦函數。
要如何去實現這樣一個正弦曲線呢。用貝塞爾畫曲線?這是不可能的,所以,能想到的就是通過x坐標來一一算出對應的y,然后連起來,就是個正弦曲線。
我們知道了要用到正弦函數的知識,那么再思考下,到底是怎么才能達到波浪形態呢?。。下面我給個圖,大家可以通過這個圖來腦補下。
要形成波浪,應該就是ω系數隨著計時器不斷累加
在這里我就不再講解了,來點實用的。
效果圖:
波浪如何去實現,我就不多講了,主要說的是如何填充這個圓,在這里我采取的是CoreGraphics知識去實現的,不太清楚CoreGraphics框架知識的可以先去了解下
之后,我采取CADisplayLink來實現定時器,用NSTimer可能會使得動畫不夠流暢。(我比較懶得去自己設置時間罷了,CADisplayLink每秒刷60幀完全夠了)。