iOS-制作波纹动画

在网易新闻和其他的APP中，大家可能都观察到了在个人中心里面，有一个水波纹一样的动画效果，这个功能还是非常的有用的，在实际开发中就可以用上。

看到这个动画效果，我心里第一个想到就是正余弦函数，但是公式已经忘记了上网查了以后给出详细的说明：正弦型函数解析式：y=Asin（ωx+φ）+h

各常数值对函数图像的影响：

φ（初相位）：决定波形与X轴位置关系或横向移动距离（左加右减）

ω：决定周期（最小正周期T=2π/|ω|）

A：决定峰值（即纵向拉伸压缩的倍数）

h：表示波形在Y轴的位置关系或纵向移动距离（上加下减）

但公式已经有了剩下的该是如何实现划线了，我们使用CAShapeLayer和UIBezierPath来实现功能，

_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里面我们就要实现正余弦函数参数的设定和贝塞尔曲线划线的过程。

CGFloat A = 20.f;//A振幅

CGFloat h = 0;//y轴偏移

CGFloat ω = 0.03;//角速度ω变大，则波形在X轴上收缩（波形变紧密）；角速度ω变小，则波形在X轴上延展（波形变稀疏）。不等于0

CGFloat φ = 0 - i;//初相，x=0时的相位；反映在坐标系上则为图像的左右移动。

//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越界

}

这样的话一个双波纹正余弦动画就完成了，有兴趣的朋友可以自己试试，