iOS 干货--实现炫酷波浪效果
前言
最近产品提出一个新需求,要实现一个波浪动画效果。自己研究,简单实现了一下,如果大家有别的方法可以共享一下?,谢谢!
核心思想
主要还是要使用贝塞尔曲线来画出整个过程。要根据振幅、偏移、角速度
样例地址
效果
核心代码
static double i = 0;
CGFloat A = 10.f;//A振幅
CGFloat k = 0;//y轴偏移
CGFloat ω = 0.03;//角速度ω变大,则波形在X轴上收缩(波形变紧密);角速度ω变小,则波形在X轴上延展(波形变稀疏)。不等于0
CGFloat φ = 0 + i;//初相,x=0时的相位;反映在坐标系上则为图像的左右移动。
//y=Asin(ωx+φ)+k
_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+φ)+k;
CGFloat y2 = A * cos(ω*x+φ)+k;
[_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越界
}