iOS 双曲线波浪动画
今天来搞一下 双曲线波浪动画,那么什么是双曲线波浪呢 看效果
![](http://upload-images.jianshu.io/upload_images/1907672-ff5bc7c0f4ac8eca.gif?imageMogr2/auto-orient/strip)
一,
效果就是这样子 ,通过调整百分比 可以实现球形的水面的占比,那么实现的思路是什么呢
1.首先肯定是连个图层 一个深蓝色 一个浅蓝色 (我做的时候 RGB 是一样的不过是修改了透明度 )
2.就是曲线条 当然很直观的可以看出来这个曲线 可以用 正弦 或 余弦函数实现.通过CoreGraphics 来搞这个曲线 关于 CoreGraphics的只是可以百度了解一下
- 就是通过定时器NSTimer 来改变正弦函数的 欧米伽值 实现波动的效果 刷新UI就好了
思路就是这个思路 ,这个那点就在于 正弦函数图形的绘制和颜色填充
二 ,
创建一个类,继承与UIview .h 文件暴漏初始化方法 同事.m 实现初始化方法
对 UIview 绘制图形的话一般都是在这个 方法里面
- (void)drawRect:(CGRect)rect{
//关于这个函数呢 他是系统调用的 如果想执行他 可以 调用setNeedsDisplay 就可以调用方法
}
接下来开始绘制曲线
CGContextRef context = UIGraphicsGetCurrentContext();// 创建路径CGMutablePathRef path = CGPathCreateMutable();//画水CGContextSetLineWidth(context, 1);UIColor * blue = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.3];CGContextSetFillColorWithColor(context, [blue CGColor]);float y= (1 - self.present) * rect.size.height;float y1= (1 - self.present) * rect.size.height;CGPathMoveToPoint(path, NULL, 0, y);for(float x=0;x<=rect.size.width * 3.0;x++){
//正弦函数y= sin( x/rect.size.width * M_PI + _fa/rect.size.width *M_PI ) *_bigNumber + (1 - self.present) * rect.size.height ;CGPathAddLineToPoint(path, nil, x, y);}CGPathAddLineToPoint(path, nil, rect.size.width , rect.size.height );CGPathAddLineToPoint(path, nil, 0, rect.size.height );// CGPathAddLineToPoint(path, nil, 0, 200);CGContextAddPath(context, path);CGContextFillPath(context);CGContextDrawPath(context, kCGPathStroke);CGPathRelease(path);
创建另一个 线条
CGMutablePathRef path1 = CGPathCreateMutable();// float y1=200;//画水CGContextSetLineWidth(context, 1);UIColor * blue1 = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.8];CGContextSetFillColorWithColor(context, [blue1 CGColor]);// float y1= 200;CGPathMoveToPoint(path1, NULL, 0, y1);for(float x=0;x<=rect.size.width;x++){y1= sin( x/rect.size.width * M_PI + _fa/rect.size.width *M_PI +M_PI ) *_bigNumber + (1 - self.present) * rect.size.height ;CGPathAddLineToPoint(path1, nil, x, y1);}CGPathAddLineToPoint(path1, nil, rect.size.height, rect.size.width );CGPathAddLineToPoint(path1, nil, 0, rect.size.height );//CGPathAddLineToPoint(path, nil, 0, _currentLinePointY);CGContextAddPath(context, path1);CGContextFillPath(context);CGContextDrawPath(context, kCGPathStroke);CGPathRelease(path1);
两个曲线的区别就是正弦函数 相差半个或一个周期
接下来就是穿件定时器 让其波动
- (void)createTimer{if (!self.myTimer) {self.myTimer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(action) userInfo:nil repeats:YES];}[self.myTimer setFireDate:[NSDate distantPast]];
}
- (void)action{//让波浪移动效果_fa = _fa+10;if (_fa >= _MYframe.size.width * 2.0) {_fa = 0;}//对于这个_fa 是什么鬼呢 他只是一个基本数据类型他的作用就是让波动起来
//y = sin(a*x + _fa) *b +k; // y= sin( x/rect.size.width * M_PI + _fa/rect.size.width *M_PI ) //*_bigNumber + (1 - self.present) * rect.size.height ;
//对比函数就知道了 如果还不明白 百度一下 高中数学(注意哦 不是高数 是高中//数学)[self setNeedsDisplay];}
大概呢到这里就已经差不多了 不过这样还会有问题 就死 由于 波的幅度太大 导致 百分比在100% 和 0% 时 不完美
![](http://upload-images.jianshu.io/upload_images/1907672-f491b233de1dd155.gif?imageMogr2/auto-orient/strip)
解决办法就是 把 当为 0% 是 幅度改为0;
y1= sin( x/rect.size.width * M_PI + _fa/rect.size.width *M_PI +M_PI ) *_bigNumber + (1 - self.present) * rect.size.height ;
//就是修改函数里面的 _bigNumber 这个值
- (void)setPresent:(CGFloat)present{_present = present;
//百分数的 set 方法//启动定时器[self createTimer];//修改波浪的幅度if (present <= 0.5) {
//当 百分比小于50% 幅度 幅度 和百分比成正比_bigNumber = _MYframe.size.height * 0.1 * present * 2;}else{
//当 百分比大于50% 幅度 幅度 和百分比成反比_bigNumber = _MYframe.size.height * 0.1 * (1 - present) * 2;}
}
问题到此结局 代码地址
https://git.oschina.net/GAOZEJIAN/double-line.git
欢迎各位道友指点
原文链接:http://www.jianshu.com/p/7db295fd38eb
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
iOS 双曲线波浪动画相关推荐
- iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
2019独角兽企业重金招聘Python工程师标准>>> iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实 ...
- iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码
iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实现与TableViewCell的常用样式介绍 实现阴影圆角并存,渐变色背景 ...
- CGContextRef绘图-iOS球形波浪加载进度控件-HcdProcessView详解
简书也有发布:http://www.jianshu.com/p/20d7... <iOS球形波浪加载进度控件-HcdProcessView>这篇文章已经展示了我在项目中编写的一个球形进度加 ...
- iOS网络资源(动画)
Core Animation笔记,基本的使用方法 - Core Animation笔记,基本的使用方法:1.基本动画, 2.多步动画,3.沿路径的动画,4.时间函数,5.动画组. awesome-io ...
- iOS 美女波浪图~ demo
联系人:石虎 QQ:1224614774 昵称: 嗡嘛呢叭咪哄 QQ群:807236138 群称: iOS 技术交流学习群 一.概念 利用 ...
- iOS学习——核心动画之Layer基础
iOS学习--核心动画之Layer基础 1.CALayer是什么? CALayer我们又称它叫做层.在每个UIView内部都有一个layer这样一个属性,UIView之所以能够显示,就是因为它里面有这 ...
- HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体 粒子波浪动画.3D 粒子动画特效 代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
- 一步一步教你实现iOS音频频谱动画(一)
如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第二篇:一步一步教你实现iOS音频频谱动画(二) 基于篇幅考虑,本次教程分为两篇文章,本篇文章主要讲述音频播放和频谱 ...
最新文章
- 超越时代的天才——图灵
- linux平台的office文档转pdf的实例(程序员的菜)
- linux中的c 环境变量,Linux C 参考手册 之 环境变量篇
- 人很臭尽量往香里去做...
- 芯片巨头英特尔放弃竞争迷你计算机市场
- linux 环境变量详解,linux环境变量实例详解
- sqlmap 用户手册(续)
- oracle ola_Ola HallengrenSQL Server维护解决方案–数据库完整性检查
- codematic2连接mysql失败_动软代码生成器Codematic
- NT驱动程序和WDM驱动程序的区别
- Python如何对图片进行缩放,旋转,翻转,添加文字以及如何截取并粘贴图像到图片中
- C博客作业02--循环结构
- 《1024伐木累》-小白篇之丽姐(前篇)-总章节四
- 训练样本裁剪,背景裁剪,yoloV5裁剪样本检测
- 经典背包问题3——背包问题求方案数 、背包问题求具体方案
- leaflet、cesium加载百度地图,加载自定义样式百度地图
- 程序员常见英文缩写及其意义
- MFC软件获取USB设备的制造商、产品、序列号
- 第十四章 使用SQL Shell界面(一)
- 用Pandas揭秘美国选民的总统喜好
热门文章
- 智能朗读软件哪个好?快把这些软件收好
- 创新的“WQ”时代——Design Thinking方法论
- 什么样的女孩称得上为宝藏女孩?
- 不同页面之间传递值(使用Page.PreviousPage.FindControl)
- 自我认知是智能最高维度的智力活动
- 电热水器工作过程 c语言,电热水器工作原理—电热水器工作原理及使用注意事项介绍...
- 【模糊背景制作工具】Canva在线设计!10个用好模糊效果的超实用设计技巧
- html地图定位系统原理代码,利用HTML5定位功能实现在百度地图上定位
- 2022年聚醚消泡剂行业技术特点
- 【转贴】游戏引擎大全