在網(wǎng)易新聞和其他的APP中，大家可能都觀察到了在個(gè)人中心里面，有一個(gè)水波紋一樣的動(dòng)畫效果，這個(gè)功能還是非常的有用的，在實(shí)際開(kāi)發(fā)中就可以用上。
看到這個(gè)動(dòng)畫效果，我心里第一個(gè)想到就是正余弦函數(shù)，但是公式已經(jīng)忘記了上網(wǎng)查了以后給出詳細(xì)的說(shuō)明：正弦型函數(shù)解析式：y=Asin（ωx+φ）+h
各常數(shù)值對(duì)函數(shù)圖像的影響：
φ（初相位）：決定波形與X軸位置關(guān)系或橫向移動(dòng)距離（左加右減）
ω：決定周期（最小正周期T=2π/|ω|）
A：決定峰值（即縱向拉伸壓縮的倍數(shù)）
h：表示波形在Y軸的位置關(guān)系或縱向移動(dòng)距離（上加下減）
但公式已經(jīng)有了剩下的該是如何實(shí)現(xiàn)劃線了，我們使用CAShapeLayer和UIBezierPath來(lái)實(shí)現(xiàn)功能，
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.frame = CGRectMake(0, 100, 375, 150);
[self.view.layer addSublayer:_shapeLayer];
_shapeLayer2 = [CAShapeLayer layer];
_shapeLayer2.frame = CGRectMake(0, 100, 375, 150);
[self.view.layer addSublayer:_shapeLayer2];
_shapeLayer.fillColor = [[UIColor orangeColor] colorWithAlphaComponent:0.3].CGColor;
_shapeLayer2.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:0.3].CGColor;
_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(drawPath)];
[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
drawPath里面我們就要實(shí)現(xiàn)正余弦函數(shù)參數(shù)的設(shè)定和貝塞爾曲線劃線的過(guò)程。
CGFloat A = 20.f;//A振幅
CGFloat h = 0;//y軸偏移
CGFloat ω = 0.03;//角速度ω變大，則波形在X軸上收縮（波形變緊密）；角速度ω變小，則波形在X軸上延展（波形變稀疏）。不等于0
CGFloat φ = 0 - i;//初相，x=0時(shí)的相位；反映在坐標(biāo)系上則為圖像的左右移動(dòng)。
//y=Asin(ωx+φ)+h
_path = [UIBezierPath bezierPath];
_path2 = [UIBezierPath bezierPath];
[_path moveToPoint:CGPointZero];
[_path2 moveToPoint:CGPointZero];
for (int i = 0; i < 376; i ++) {
CGFloat x = i;
CGFloat y = A * sin(ω*x+φ)+h;
CGFloat y2 = A * cos(ω*x+φ)+h;
[_path addLineToPoint:CGPointMake(x, y)];
[_path2 addLineToPoint:CGPointMake(x, y2)];
}
[_path addLineToPoint:CGPointMake(375, -100)];
[_path addLineToPoint:CGPointMake(0, -100)];
_path.lineWidth = 1;
_shapeLayer.path = _path.CGPath;
[_path2 addLineToPoint:CGPointMake(375, -100)];
[_path2 addLineToPoint:CGPointMake(0, -100)];
_path2.lineWidth = 1;
_shapeLayer2.path = _path2.CGPath;
i += 0.1;
if (i > M_PI * 2) {
i = 0;//防止i越界
}
這樣的話一個(gè)雙波紋正余弦動(dòng)畫就完成了，有興趣的朋友可以自己試試，
