类似淘宝个人信息状态栏,京东金融等双波浪动画
主要方法:通过自定义View,利用正弦函数与余弦函数的效果.
一.相关概念解释
正弦函数: y =Asin（ωx+φ）+C
A 表示振幅，也就是使用这个变量来调整波浪的高度
ω表示周期，也就是使用这个变量来调整在屏幕内显示的波浪的数量
φ表示波浪横向的偏移，也就是使用这个变量来调整波浪的流动
C表示波浪纵向的位置，也就是使用这个变量来调整波浪在屏幕中竖直的位置。
(1)利用CADisplayLink,进行UI的刷新.
@property (nonatomic,strong)CADisplayLink *wavesDisplayLink;
@property (nonatomic,strong)CAShapeLayer *firstWavesLayer;
iOS设备的屏幕刷新频率(FPS)是60Hz，因此CADisplayLink的selector 默认调用周期是每秒60次，这个周期可以通过frameInterval属性设置， CADisplayLink的selector每秒调用次数=60/ frameInterval。
比如当 frameInterval设为2，每秒调用就变成30次。
关于CADisplayLink,此处用NSTimer亦可.
(2)CAShapeLayer
CAShapeLayer 的对象是一个本身没有形状，他的形状来源于你给定的Path，它依附于path,所以必须给定path，即使path不完整也会自动收尾相接，strokeStart以及stroleEnd代表着这个path中所占的百分比（可以使用storkeStart和stroleEnd来做曲线进度的动画).
二.主要代码
(1)正弦与余弦函数
//创建一个路径
CGMutablePathRef path = CGPathCreateMutable();
CGFloat y = currentK;
//将点移动到 x=0,y=currentK的位置
CGPathMoveToPoint(path, nil, 0, y);
for (NSInteger i =0.0f; i<=WavesWidth; i++) {
//正弦函数波浪公式
y = waveA * sin(waveW * i+ offsetX)+currentK;
//第二个View中:使用余弦函数波浪公式
//y = waveA * cos(waveW * i+ offsetX)+currentK;
//将点连成线
CGPathAddLineToPoint(path, nil, i, y);
}
CGPathAddLineToPoint(path, nil, WavesWidth, 0);
CGPathAddLineToPoint(path, nil, 0, 0);
CGPathCloseSubpath(path);
self.firstWavesLayer.path = path;
//使用layer 而没用CurrentContext
CGPathRelease(path);
三.相关效果
1.正弦函数与余弦函数:相同速度/振幅/周期/非震荡效果
2.正弦函数与余弦函数:相同速度/振幅/周期/震荡效果,这就类似淘宝个人信息状态栏,余弦函数中加π/2即是峰顶与峰底对应效果*
当速度/振幅/周期等改变时,会产生更多的效果:
3.正弦函数与余弦函数:不同速度/振幅,相同周期/非震荡效果,这个效果用起来也很不错
此处设置为:正弦与余弦函数参数不相同时,会产生交错效果;此处自行尝试更改即可产生不同动画效果.
正弦函数:
//设置波浪流动速度
wavesSpeed = 0.02;
//设置振幅
waveA = 12;
//设置周期
waveW = 0.5/30.0
余弦函数:
//设置波浪流动速度
wavesSpeed = 0.04;
//设置振幅
waveA = 13;
//设置周期
waveW = 0.5/30.0;
4.正弦函数与余弦函数:不同速度/振幅,相同周期/震荡效果
5.正弦函数与余弦函数:不同速度/振幅,相同周期/,峰顶与峰底对应效果,可自行开启震荡
更改余弦函数公式为:
//如果需要正弦函数的峰顶和余弦函数的峰底对应,可以替换成下方公式均可
//y = waveA * cos(waveW*i + offsetX+M_PI_2)+currentK;
//y = waveA * sin(-(waveW*i + offsetX))+currentK;
6.正弦函数与余弦函数:如果需要让双波浪在屏幕下方显示
更改代码为:
以第一个波浪为例,第二个同理更改就行.
//第一个波浪
self.firstWare = [[FirstWaves alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-200, self.view.frame.size.width, 220)];
//波浪公式下方更改
CGPathAddLineToPoint(path, nil, WavesWidth, self.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);
四.Demo地址
欢迎star : https://github.com/FTC-Chen/DoubleWavesAnimation
五.参考资料
1.http://blog.csdn.net/u010123208/article/details/51227035
2.http://www.tuicool.com/articles/meMVR3
有任何问题请私信或者留言,或者有更好的实现方法,也请告诉我.
