OC语言编写:为视图添加丝滑的水波纹
2016-08-22 11:26
260 查看
先看一下最终效果图:
首先我们可以把如此丝滑的水波纹拆分一下下:
一条规律的曲线。曲线匀速向右移动。
曲线下方的位置用颜色填充。
于是先来一条曲线吧。
对于需要产生波动如此规律的曲线,我们首先想到的应该就是三角函数了。例如我们熟悉的正弦曲线:
及其公式:
f(x) = Asin(ωx+φ)+k
而SDK也为我们提供了这个正弦函数:
extern double sin(double);于是乎通过一个循环就能轻易地获取到这条曲线了:
CGFloat y = 0.f; for (CGFloat x = 0.f; x <= CGRectGetWidth(self.frame) ; x++) { y = height * sin(self.angularSpeed * x + self.offsetX); CGPathAddLineToPoint(path, NULL, x, y); }
让它动起来
我们需要在屏幕每次刷新的时候进行一次曲线的绘制,让它不断地刷新。self.waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(currentWave)];而根据上面的正弦函数公式,曲线要向右移,其φ值就需要变小。于是在 currentWave 方法每次调用的时候,offsetX均减去同一个固定值,以实现匀速的运动。
self.offsetX -= self.waveSpeed;
涂个颜色
连个线,形成封闭空间:CGMutablePathRef path = CGPathCreateMutable();再填个色:
CGPathMoveToPoint(path, NULL, 0, height / 2);
CGFloat y = 0.f; for (CGFloat x = 0.f; x <= CGRectGetWidth(self.frame) ; x++) { y = height * sin(self.angularSpeed * x + self.offsetX); CGPathAddLineToPoint(path, NULL, x, y); }
CGPathAddLineToPoint(path, NULL, width, height);
CGPathAddLineToPoint(path, NULL, 0, height);
CGPathCloseSubpath(path);
self.waveShapeLayer.fillColor = self.waveColor.CGColor;好了。
至于最后的渐变消失略简单就不说了。有兴趣的直接到文末下载完整代码吧~
多扯两句
这水波纹并不限定在拖动过后才能波动,而是随时想动就动、想停就停。于是最近我想到了一些新玩法,例如用作刷新等待视图。
更多的玩法就自行发掘吧~
最后
完整代码呈上:Github: WXWaveView
其使用方法在该页面中会有介绍。
文/WelkinXie(简书作者)
原文链接:http://www.jianshu.com/p/0990d1d8d9c4
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- OC语言编写:为视图添加丝滑的水波纹
- 在OC代码中创建Swift编写的视图控制器
- InstallShield 2012 Spring新功能试用(18): Suite/Advanced UI 和 Advanced UI工程的界面编辑视图中添加了控件工具栏和语言切换功能
- 为视图添加丝滑的水波纹
- IOS开发OC代码中创建Swift编写的视图控制器
- OC语言——————表视图
- Python语言学习编写脚本中,对三级目录的定位,添加延迟时间,就可以定位成功了
- OC运行时语言--如何给一个分类添加属性
- 在OC代码中创建Swift编写的视图控制器
- 为视图添加丝滑的水波纹
- 如何将.NET中编写控件作为MFC的视图调用?(From MSDN)
- 将多个视图添加到单个文档
- 用javascript语言编写公历和农历日期
- 用 C 语言编写 Windows 服务程序的五个步骤
- 汇编语言命令参数程序的编写
- 怎样编写支持多国语言的程序, 让它能够根据所运行的操作系统自动显示相应的文字。
- 在多文档程序中添加多视图的办法
- 编写一个汇编语言数据编译器小记
- 在视图中添加标识列(源表数据聚合)
- 写人器(生物编写及生物遗传特性编码)高级语言编译系统