当前位置: 首页 > news >正文

为视图添加丝滑的水波纹

先看一下最终效果图:

首先我们可以把如此丝滑的水波纹拆分一下下:

  • 一条规律的曲线。

  • 曲线匀速向右移动。

  • 曲线下方的位置用颜色填充。

于是先来一条曲线吧。

对于需要产生波动如此规律的曲线,我们首先想到的应该就是三角函数了。

例如我们熟悉的正弦曲线:

及其公式:

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

其使用方法在该页面中会有介绍。

喜欢的欢迎给个star~ 玩得开心哈。

相关文章:

  • ROS 框架整体学习
  • lduan SCOM 2012 配置电子邮件警报通知(十二).docx
  • JavaScript 中 undefined与null的区别
  • Serviceability
  • spring的注解
  • SQL简单操作
  • JVM垃圾收集算法及垃圾收集器
  • C# 把字符串中间的多个连续的空格转化成一个空格
  • 系统剖析Android中的内存泄漏
  • HTML需掌握的基础
  • Java三大框架之——Hibernate
  • IBMp6-550更换内存
  • 树莓派利用PuTTY进行远程登录
  • 浅析Node.js:DNS模块的使用
  • js学习篇--数组按升序降序排列
  • 0基础学习移动端适配
  • ES6之路之模块详解
  • js ES6 求数组的交集,并集,还有差集
  • mysql_config not found
  • React 快速上手 - 07 前端路由 react-router
  • web标准化(下)
  • 经典排序算法及其 Java 实现
  • 跨域
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 一天一个设计模式之JS实现——适配器模式
  • 怎么把视频里的音乐提取出来
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • ​如何使用ArcGIS Pro制作渐变河流效果
  • #HarmonyOS:基础语法
  • (11)MATLAB PCA+SVM 人脸识别
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (pojstep1.1.2)2654(直叙式模拟)
  • (pojstep1.3.1)1017(构造法模拟)
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (机器学习-深度学习快速入门)第三章机器学习-第二节:机器学习模型之线性回归
  • (南京观海微电子)——COF介绍
  • (十五)使用Nexus创建Maven私服
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • (转)scrum常见工具列表
  • (转)创业的注意事项
  • .net经典笔试题
  • .NET开发者必备的11款免费工具
  • .NET下ASPX编程的几个小问题
  • .NET性能优化(文摘)
  • @Autowired标签与 @Resource标签 的区别
  • [Android] Upload package to device fails #2720
  • [BetterExplained]书写是为了更好的思考(转载)
  • [BUUCTF]-Reverse:reverse3解析
  • [BZOJ]4817: [Sdoi2017]树点涂色
  • [C#]C#学习笔记-CIL和动态程序集
  • [C++] 统计程序耗时
  • [CF543A]/[CF544C]Writing Code