原理

• 利用 UIBezierPath + CAShapeLayer 畫正弦線
• 利用 CADisplayLink 重復執行畫正弦線
• 下一次畫的正弦線較前一次次平移小段距離，不斷重復，就形成了波浪效果(動畫效果實現核心)

實現過程

• 先復習一下正弦函數

/*** *** 正弦波的基礎知識 ***** f(x) = Asin(ωx+φ)+k** A 為振幅, 波在上下振動時的最大偏移** φ/w 為在x方向平移距離** k y軸偏移，即波的振動中心線y坐標與x軸的偏移距離** 2π/ω 即為波長，若波長為屏幕寬度即， SCREEN_W = 2π/ω, ω = 2π/SCREEN_W*/

• 自定義一個UIView視圖，利用UIBezierPath + CAShapeLayer 畫正弦線

// 給視圖添加ShapeLayer -(void)starWave {// 設置正弦線的振幅self.waveAmplitude = 0.5 * self.wave_H;// 給視圖添加ShapeLayerself.shapeLayer = [CAShapeLayer layer];self.shapeLayer.borderWidth = 1; // 線寬self.shapeLayer.strokeColor = [UIColor redColor].CGColor; // 線的顏色[self.layer addSublayer:self.shapeLayer];[self setShapeLayerPath];} // 把正弦線加到視圖中 - (void)setShapeLayerPath {self.shapeLayer.path = [self sineBezierPath].CGPath;} // 畫正弦線 每次調用sinf函數都確定一個正弦線經過的點 - (UIBezierPath *)sineBezierPath {UIBezierPath *path = [UIBezierPath bezierPath];// 起點[path moveToPoint:CGPointMake(0, self.wave_H * 0.5)];CGFloat y = 0.0f;for (float x = 0.0f; x <= self.wave_W; x++) {// 振幅 A = self.waveAmplitude 為視圖的一半// 波長 2π/w = (2 * MP_PI / (2 * M_PI / 200)) = 200 波長為 200// y軸偏移 k = self.wave_H - self.waveAmplitude， 坐標軸起點為左上, k決定正弦線中心線的偏移，振幅變小時正弦線的一直貼著視圖最下邊y = self.waveAmplitude * sinf((2 * M_PI / 200) * x) + self.wave_H - self.waveAmplitude;[path addLineToPoint:CGPointMake(x, y)];}return path; }

效果如圖：

我們需要的是讓正弦圖像封閉起來，所以去了邊線顏色，加填充顏色, 起點要改為左下，終點改為右下

- (void)starWave {self.shapeLayer.fillColor = [UIColor blueColor].CGColor; // 填充色 } // 畫正弦線 - (UIBezierPath *)sineBezierPath { [path moveToPoint:CGPointMake(0, self.wave_H)]; // 起始點...[path addLineToPoint:CGPointMake(self.wave_W, self.wave_H)]; // 結束點[path closePath]; // 使封閉return path; }

效果如圖：

• 利用 CADisplayLink 重復執行畫正弦線，配合正弦線偏移讓正弦線動起來

-(void)starWave {...//【**波動畫關鍵**】 一秒執行60次（算是CADisplayLink特性），即每一秒執行 setShapeLayerPath 方法60次self.displaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(setShapeLayerPath)];[self.displaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes]; }- (void)setShapeLayerPath {self.offsetX += (self.wave_W / 60); // 正弦線偏移 , 每秒偏移 self.wave_W... } - (UIBezierPath *)sineBezierPath {y = self.waveAmplitude * sinf((2 * M_PI / 200) * (x + self.offsetX/*添加偏移*/))+ self.waveAmplitude; }

效果如圖:

• 結束動畫

- (void)stopWave {[self.displaylink invalidate];[self.shapeLayer removeFromSuperlayer]; }

相關demo下載:

https://github.com/Jae-sun/SJUserCenterHeader.git

轉載于:https://www.cnblogs.com/jaesun/p/zheng-xian-shui-bo-wen-bo-dong-hua--SJWaveView.html

總結

以上是生活随笔為你收集整理的正弦水波纹波动画 - SJWaveView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。