登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

图片下拉放大,图片回到原来位置后出现波浪特效

[复制链接]
来自: Jaesun 分类: iOS精品源码 上传时间: 2016-8-26 11:04:47
Tag:曲线 动画 绘图 图片

项目介绍:

SJUserCenterHeader
DEMO 直接下载:


首先我们可以把如此丝滑的水波纹拆分一下下:
  • 一条规律的曲线。
  • 曲线匀速向右移动。
  • 曲线下方的位置用颜色填充。


于是先来一条曲线吧。对于需要产生波动如此规律的曲线,我们首先想到的应该就是三角函数了。
例如我们熟悉的正弦曲线:
1.jpg




及其公式:
f(x) = Asin(ωx+φ)+k


而SDK也为我们提供了这个正弦函数:
extern double sin(double);

于是乎通过一个循环就能轻易地获取到这条曲线了:
[Objective-C] 查看源文件 复制代码
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);
}


让它动起来我们需要在屏幕每次刷新的时候进行一次曲线的绘制,让它不断地刷新。
[Objective-C] 查看源文件 复制代码
self.waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(currentWave)];



而根据上面的正弦函数公式,曲线要向右移,其φ值就需要变小。于是在 currentWave 方法每次调用的时候,offsetX均减去同一个固定值,以实现匀速的运动。
[Objective-C] 查看源文件 复制代码
self.offsetX -= self.waveSpeed;



涂个颜色连个线,形成封闭空间:
[Objective-C] 查看源文件 复制代码
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);



再填个色:
[Objective-C] 查看源文件 复制代码
self.waveShapeLayer.fillColor = self.waveColor.CGColor;



好了。

多扯两句这水波纹并不限定在拖动过后才能波动,而是随时想动就动、想停就停。
于是最近我想到了一些新玩法,例如用作刷新等待视图。
教程出处:
http://www.jianshu.com/p/0990d1d8d9c4

推荐:

专题集合 十六 每周iOS精选推送

相关源码推荐:

我来说两句
*滑动验证:
所有评论(280)
Jaesun 2016-8-26 20:31:43
Jaesun 发表于 2016-8-26 11:08
学习波浪时的一个特别的demo也给大家推荐下, https://github.com/KittenYang/KYWaterWaveView ...

哎呀,管理员把文章改了,我是学习了这两篇文章写得这个demo,原创文章:http://www.jianshu.com/p/0990d1d8d9c4 大家要支持原创呀。
回复
Jaesun 2016-8-26 11:08:24
学习波浪时的一个特别的demo也给大家推荐下, https://github.com/KittenYang/KYWaterWaveView
回复
挖大坑的 2016-8-26 13:23:28
强烈支持楼主ing……
回复
code4app热心网友 2016-8-26 13:48:54
淡定,淡定,淡定……
回复
code4app热心网友 2016-8-26 14:00:36
正需要啊,感谢楼主无私分享!
回复
code4app热心网友 2016-8-26 14:01:30
楼主威武啊,Code4App有你更给力!
回复
code4app热心网友 2016-8-26 14:11:43
学习学习!
回复
code4app热心网友 2016-8-26 14:35:01
楼主用心了,内容非常精彩。
回复
code4app热心网友 2016-8-26 14:41:36
感谢分享,Code4App有你更精彩:)
回复
waynehao521 2016-8-26 14:43:53
正需要啊,感谢楼主无私分享!
回复
提取码:  下载次数:272 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
5604 0 272
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表