如何实现百度外卖APP个人中心头像"浪"起来的动画效果
作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯.某日瞬间发现百度外卖的APP波浪效果很是吸引人.相比较其他的外卖APP,颜值略高些.(淘宝也有波浪的效果),遂就思考如何实现这种"浪"的效果.
效果演示
百度外卖 波浪效果图:
你需要知道的
CADisplayLink
简单的说就是一定时器,其根本利用刷帧和屏幕频率一样来重绘渲染页面.
其创建方式:
CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];
[timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
CAShapeLayer
CALayer的子类,通常结合CGPath来绘制图形.
其创建方式:
CAShapeLayer *Layer = [CAShapeLayer layer];
Layer.frame = self.bounds;
Layer.fillColor = self.realWaveColor.CGColor;
Layer...等属性
[self.view.layer addSublayer:Layer];
其优点
- 渲染效率高渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
- 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
- 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
- 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。
三角函数
思路实现
UIView --> 2个CAShapeLayer --> imageView.frame.orgin.y调整
主要代码实现
终
最后效果:
原文链接:http://www.jianshu.com/p/0e8fbbe0c127
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
demo:https://github.com/Josin22/JSWave/
如何实现百度外卖APP个人中心头像"浪"起来的动画效果的更多相关文章
- 实现百度外卖APP个人中心头像"浪"起来的动画效果
让你的头像浪起来~~~~~ DEMO 地址:网页链接,点击下载 你需要知道的 CADisplayLink 简单的说就是一定时器,其根本利用刷帧和屏幕频率一样来重绘渲染页面. 其创建方式: [Objec ...
- 关于App的一些迷思以及一些动画效果开源库的推荐
http://www.open-open.com/lib/view/open1427856817396.html
- Vuejs 高仿饿了么外卖APP 百度云视频教程下载
Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...
- 美团外卖app可行性分析
美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...
- 百度Web App在线生成平台Site App体验
最近收到百度开发者中心邮件,告知之前的百度移动建站服务已经升级为Site App了,Site App顾名思义是可以创建APP的站点,之前想建立一个APP要么是自己制作,要么是选用国外的在线Web A ...
- 项目vue2.0仿外卖APP(一)
最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...
- iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/
http://zanderzhang.gitcafe.io/2015/09/19/iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/ 百度外卖选择送货地址: 饿了么选择送货地 ...
- 巧用百度Site App新组件为企业官网打造移动站
一年前我曾经详细介绍过百度Site App,时隔一年的发展,Site App再一次发生了翻天覆地的变化:自定义程度更高.新增电话地图组件.增加流量统计.增加广告管家.生成APP客户端等功能,百度Sit ...
- 「美团外卖APP签约快捷支付」流程体验
§1 添加银行卡 新用户在美团外卖APP订餐支付时,首先要绑定银行卡.如下是“添加银行卡”页,输入卡号后,系统自动调用卡bin库校验卡号的有效性,如果有效会显示发卡行和卡类型(借记卡/贷记卡). 这 ...
随机推荐
- codevs 1506 传话
http://codevs.cn/problem/1506/ 1506 传话 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 D ...
- 算法训练 Torry的困惑(基本型)
http://lx.lanqiao.org/problem.page?gpid=T129 算法训练 Torry的困惑(基本型) 时间限制:1.0s 内存限制:512.0MB 问题描述 ...
- NovaMind使用教程
NovaMind 使用教程 目前NovaMind在网络上基本没什么中文资料,它自带的"欢迎"导图也只有英文版本.导致很多朋友对这个工具的使用技巧不够了解.今天我把自己的使用心得整理 ...
- 夺命雷公狗ThinkPHP项目之----企业网站16之文章批量删除的完成
我们在做一个网站时候经常会遇到批量删除这个选项,其实也很简单,我们之需要用用jq实现出来效果然后通过表单post过去后端即可实现: 我们做这个功能前必须要先引入jq,我的jq版本是1.8.3,方法如下 ...
- archlinux安装输入法需要的包及archlinux无法使用输入法的解决
所需的包: fcitx #这货应该是主要的程序 fcitx-configtool #图形化的配置工具,非必须 fcitx-gtk2 fcitx-gtk3 fcitx-qt4 fcitx-qt5 fci ...
- 基于时间点恢复数据库stopat
create database newtestdb use newtestdbgo drop table t1go create table t1 (id int not null identity( ...
- C++头文件为什么要加#ifndef #define #endif
#ifndef 在头文件中的作用 在一个大的软件工程里面,可能会有多个文件同时包含一个头文件,当这些文件编译链接成一个可执行文件时 ,就会出现大量“重定义”的错误.在头文件中实用#ifndef #de ...
- Openstack的HA解决方案【替换原有的dashboard】
0. 进入到/etc/haproxy/conf.d/目录下 mv 015-horizon.cfg 150-timaiaas.cfg 将原有的dashboard的ha配置文件做为自己的配置文件. 1. ...
- Hadoop实战2:MapReduce编程-WordCount实例-streaming-python环境
这是搭建hadoop环境后的第一个MapReduce程序: 基于hadoop streaming的python的脚本: 1 map.py文件,把文本的内容划分成单词: #!/usr/bin/pytho ...
- android 学习随笔二十一(内容提供者 )
一.内容提供者* 应用的数据库是不允许其他应用访问的* 内容提供者的作用就是让别的应用访问到你的私有数据* 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查 ...