iOS实现百度外卖头像波浪的效果

效果演示

百度外卖 波浪效果图:

你需要知道的

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调整

主要代码实现

最后效果:

以上就是本文的全部内容，希望对大家开发IOS能有所帮助。如果有疑问可以留言讨论。

赞 (0)

相关推荐

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • 详解iOS中Button按钮的状态和点击事件

    详解iOS中Button按钮的状态和点击事件

    一.按钮的状态 1.UIControlStateNormal 1> 除开UIControlStateHighlighted.UIControlStateDisabled.UIControlStateSelected以外的其他情况,都是normal状态 2> 这种状态下的按钮[可以]接收点击事件 2.UIControlStateHighlighted 1> [当按住按钮不松开]或者[highlighted = YES]时就能达到这种状态 2> 这种状态下的按钮[可以]接收点击事件 3

  • iOS实现手指点击出现波纹的效果

    iOS实现手指点击出现波纹的效果

    实现来看看模拟器上效果: 具体的实现代码如下 首先监听控制器view的Tap事件 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onTap:)]; [self.view addGestureRecognizer:tap]; - (void)onTap:(UITapGestureRecognizer*)sender { CGPoint center

  • ios通过按钮点击异步加载图片

    比较原始的方法: 复制代码 代码如下: AsyncImageView.h: #import <UIKit/UIKit.h> @interface AsyncImageView : UIView {     NSURLConnection* connection;     NSMutableData* data; } - (void)loadImageFromURL:(NSURL*)url; @end AsyncImageView.m: #import "AsyncImageView.

  • iOS实现点击状态栏自动回到顶部效果详解

    iOS实现点击状态栏自动回到顶部效果详解

    前言 大家都知道实现状态栏(statusBar)点击自动回到顶部效果,旨在为用户在浏览界面时提供便利,点击状态栏能够快速回到界面顶部,所以主要针对可以滚动的UIScrollView和其子类UITableVIew和UICollectionView. 这里将从以下几个方面实现该功能. 1.苹果自带功能 分析: 首先,苹果自己已经提供了该功能,往上滑动tabView,点击statusBar,tableView会自动回到初始位置.如下图所示,此时点击statusBar,屏幕最上方显示的将是第一个cell

  • iOS点击文字按钮变转圈加载效果

    iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • IOS实现点击滑动抽屉效果

    IOS实现点击滑动抽屉效果

    最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个.在Android里面可以用SlidingDrawer,很方便的实现.IOS上面就只有自己写了.其实原理很简单就是 UIView 的移动,和一些手势的操作. 效果图: // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // Copyright (c) 2012年 CJLU. All rights reserved. // #import

  • IOS中实现图片点击全屏预览

    IOS中实现图片点击全屏预览

    如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片点击全屏预览的问题,网上查了一些大神写的有的功能确实很强大但自己暂时想要的只是简单的功能就好,还有些方法自己也没弄出想要的效果,最后写了一个比较简单的点击单张图片的全屏预览和双指捏合缩小放大,可能有时要对图片做一些处理,这里放大后只是显示同一张图片并未做处理,下面直接贴出代码 // // ViewC

  • IOS开发之tableView点击行跳转并带有“显示”更多功能

    IOS开发之tableView点击行跳转并带有“显示”更多功能

    首先给大家展示下效果图,觉得还满意的话,请继续学习代码实现过程. 一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> { UITableView * _tableView; NSMutableArray * provinceArray;

  • IOS 波纹进度(waveProgress)动画实现

    IOS 波纹进度(waveProgress)动画实现

    LXWaveProgress A simple wave components 一个简单的波浪进度动画,高度可定制.具体效果见Demo. 使用方法 LXWaveProgressView *progressView1 = [[LXWaveProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; progressView1.center=CGPointMake(CGRectGetMidX(self.view.bounds), 270

随机推荐