如何实现百度外卖APP个人中心头像“浪”起来的动画效果

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看209 回复回复6 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 209|回复: 6
收起左侧

如何实现百度外卖APP个人中心头像“浪”起来的动画效果

[复制链接]
swifter 发表于 2016-9-26 18:41:02 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯。

某日瞬间发现百度外卖的App波浪效果很是吸引人。相比较其他的外卖APP,颜值略高些。淘宝也有波浪的效果,遂就思考如何实现这种“浪”的效果。




1、效果演示

百度外卖 波浪效果图:

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 1

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 1





2、你需要知道的



2.1、CADisplayLink

简单的说就是一定时器,其根本利用刷帧和屏幕频率一样来重绘渲染页面。

其创建方式:

[Objective-C] 纯文本查看 复制代码
CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];
[timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];




2.2、CAShapeLayer

CALayer的子类,通常结合CGPath来绘制图形。

其创建方式:

[Objective-C] 纯文本查看 复制代码
CAShapeLayer *Layer = [CAShapeLayer layer];
Layer.frame =  self.bounds;
Layer.fillColor = self.realWaveColor.CGColor;


Layer...等属性

[Objective-C] 纯文本查看 复制代码
[self.view.layer addSublayer:Layer];


其优点:

  • 渲染效率高渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
  • 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
  • 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
  • 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。




2.3、三角函数

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 2

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 2


如何实现百度外卖APP个人中心头像“浪”起来的动画效果 3

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 3





3、实现思路

UIView --> 2个CAShapeLayer --> imageView.frame.orgin.y调整




4、实现代码

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 4

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 4


如何实现百度外卖APP个人中心头像“浪”起来的动画效果 5

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 5





5、最后效果

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 6

如何实现百度外卖APP个人中心头像“浪”起来的动画效果 - 敏捷大拇指 - 如何实现百度外卖APP个人中心头像“浪”起来的动画效果 6





6、Demo地址

回复可见:

游客,如果您要查看本帖隐藏内容请回复


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

RaindyCC 发表于 2016-9-26 19:20:15 | 显示全部楼层
这个浪
i0n1c 发表于 2016-9-27 00:05:20 | 显示全部楼层
一点也不够浪呀~
moxuyou 发表于 2016-11-9 14:56:44 | 显示全部楼层
回复下载看看。。。。。。。
 楼主| swifter 发表于 2016-11-10 10:12:05 | 显示全部楼层
moxuyou 发表于 2016-11-9 14:56
回复下载看看。。。。。。。

记得转发~
aa728772017 发表于 2016-11-18 16:53:30 | 显示全部楼层
mark
 楼主| swifter 发表于 2016-11-21 15:44:05 | 显示全部楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表