iOS如何绘制一个波动动画

需求如下:

在用户进行语音录入时,根据声音的大小出现不同振幅的波动动画

iOS如何绘制一个波动动画_第1张图片
动画效果

拿到效果图是有点懵逼的,该如何实现呢?
先分析下吧。


iOS如何绘制一个波动动画_第2张图片
默认状态效果

动画基本都是点和线,感觉思路通畅了很多。
首先绘制默认状态横排的点。

CGContextFillRect(context, CGRectMake(x, y, 2.5,2.5));
CGContextStrokePath(context);

波动动画怎么办呢,同样思路,波动的效果只是比较高一点的点。绘制方法不变,波动高度可以参考三角函数.


iOS如何绘制一个波动动画_第3张图片
COSX
double maxPercent = fabs(cos(M_PI_2 - M_PI_4* num));

如何让动画动起来呢?
肯定是定时器:

 _animationDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(animationDisplay)];
 _animationDisplayLink.paused = NO;
 _animationDisplayLink.frameInterval = 3;
 [_animationDisplayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

至于为什么要用CADisplayLink 而不用NSTimer
参考iOS - CADisplayLink与NSTimer

整体思路就是这些,很多细节没有描述,可以自己看代码。
github地址

你可能感兴趣的:(iOS如何绘制一个波动动画)