波纹效果动画

类似淘宝的效果:


水波动画的关键点就是正余弦函数, 解析式:y=Asin(ωx+φ)+h
各常数值对函数图像的影响:
φ(初相位):决定波形与X轴位置关系或横向移动距离(左加右减)
ω:决定周期:(最小正周期T=2π/|ω|
A:决定峰值(即纵向拉伸压缩的倍数)
h:表示波形在Y轴的位置关系或纵向移动距离(上加下减)
我们来拆解一下这个动画吧。两个波浪是两个正弦函数的效果叠加。首先我们看看该如何绘制一个波的曲线,如下图 :


 我们知道,计算机不可能绘制出一条完美的曲线,如果放大到像素的级别,可以看到这些曲线其实都是栅格的像素点组成。我们只能最大化的接近曲线,达到肉眼无法分辨的程度。如果想绘制出来一条正弦函数曲线,可以沿着假想的曲线绘制许多个点,然后把点逐一用直线连在一起,如果点足够多,就可以得到一条满足需求的曲线,这也是一种微分的思想。而这些点的位置可以通过正弦函数的解析式求得。

如果要绘制上面这个曲线,可以观察:波的峰值是1,周期是,初相位是0h位移也是0。那么计算各个点的坐标公式就是y = sin(x);获得各个点的坐标之后,使用CGPathAddLineToPoint这个函数,把这些点逐一连成线,就可以得到最后的路径。

接下来问题来了,我们已经绘制了一条静态的曲线,如何让它形成一个流动的波呢?
可以这么思考:初始的曲线如上面所示,1s之后,希望曲线能成为下个形态


接着,2s、3s…,曲线分别在不停的变化,如下图:

那么随着时间的流逝,这个曲线在不停的起伏变化,就形成了波动的效果。我们认真的想想,波动其实就是每一个点的y坐标都在不停的做着周期变化,想要实现上图1s之后的曲线形态,需要设置上面公式中的φ常量(初相位),假如φπ/2,那么y=sin(x+φ)x=0位置的时候,y的值就不在是0,而是1,就得到一条变化的曲线。通过上面的分析,我们知道,需要建立一个时间和φ的函数。

我们可以创建一个定时器(当然做动画我们肯定不会使用计时器,这里举个例子,下面详解),假设每秒让φ自增π/2,这样第4s的时候,φ等于(一个周期),y=sin(x+2π)y=sin(x)等效,又回到了初初始状态,这样就完成了一个波动周期,往下继续加下去,不停的往复这个波动周期动画。

如果我们希望波动的非常剧烈,也就是波流速很快,那么我们可以让初相位随着时间的函数波动更快,就可以实现了。

把上面的原理落实到我们需要制作的动画上面。首先要总结出一个公式,确定正弦型函数解析式:y=Asin(ωx+φ)+h中各个常数的值。这里需要注意UIKit的坐标系统y轴是向下延伸。

1、我们的容器是自定义的View,我希望波的整体高度,固定在容器的一个相对的位置。 这里设置h = 20;也就是说,当Asin(ωx+φ)计算为0的时候,这个时候y的位置是20;
2、决定波起伏的高度,我们设置波峰是4,波峰越大,曲线越陡峭;
3、决定波的宽度和周期,比如,我们可以看到上面的例子中是一个周期的波曲线, 一个波峰、一个波谷,如果我们想在0到2π这个距离显示2个完整的波曲线,那么周期就是π。 我们这里设置波的宽度是容器的宽度View.width,希望能展示1.5个周期的波曲线,周期就是View.width/1.5。 那么ω常量就可以这样计算:1.5*2M_PI /View.width。
4、时间和初相位的函数关系:我们在计时器的函数中一直调用_offset += _speed;
可以看到,如果我们设置波的速度speed越大,波的震动将会越快。

现在我们解决了项目中最有难度的问题,剩下的事情就非常简单了。两个波是两个CAShapeLayer。我们使用CADisplayLink而不是计时器来驱动动画,因为CADisplayLink触发的时机是每隔一帧运行一次,而NSTimer不是很精确,会有阻塞的情况,照成动画卡顿的现象。

创建弧线layer代码实现

//self.originView是操作增加波纹的view
    CAShapeLayer *arcLayer = [CAShapeLayer layer];
    arcLayer.fillColor = [UIColor orangeColor].CGColor;
    arcLayer.frame = self.originView.bounds;
    arcLayer.shouldRasterize = YES;
    arcLayer.path = [self getLayerBezierPath].CGPath;
    [self.originView.layer addSublayer:arcLayer];

- (UIBezierPath *)getLayerBezierPath {
    CGFloat width = self.originView.frame.size.width;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(0, self.originView.frame.size.height - self.arcHeight)];
    [path addQuadCurveToPoint:CGPointMake(width, self.originView.frame.size.height - self.arcHeight) controlPoint:CGPointMake(width/2, self.originView.frame.size.height - self.arcHeight/2)];
    [path addLineToPoint:CGPointMake(width, 0)];
    [path closePath];
    return path;
}

两个波浪线的layer代码实现

    CAShapeLayer *(^getLayerBlock)() = ^{
        CAShapeLayer *layer = [CAShapeLayer layer];
        layer.fillColor = [UIColor whiteColor].CGColor;
        layer.frame = self.originView.bounds;
        layer.opacity = 0.3;
        layer.shouldRasterize = YES;
        [self.originView.layer addSublayer:layer];
        return layer;
    };
    self.rippleShapeLayer = getLayerBlock();
    self.rippleShapeLayer1 = getLayerBlock();

波浪线实现

- (UIBezierPath *)getWavePath:(CGFloat)A W:(CGFloat)w h:(CGFloat)h xOffset:(CGFloat)xOffset{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    
    for (int i = 0; i < [UIScreen mainScreen].bounds.size.width; i++) {
        CGFloat y = A*sinf(w*i + xOffset+self.speed) + h;
        
        [path addLineToPoint:CGPointMake(i, y)];
    }
    
    [path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 0)];
    [path closePath];
    return path;
    
}```

已经将view中添加波纹代码封装,其中.h文件代如下:

import <Foundation/Foundation.h>

import <UIKit/UIKit.h>

@interface CZCRippleTool : NSObject

//初始化

  • (instancetype)initWithOriginView:(UIView *)originView;
  • (instancetype)rippleToolWithOriginView:(UIView *)originView;

//波纹开始

  • (void)start;

//显示的波浪数 default:1.5
@property (nonatomic,assign) CGFloat cycleNumber;

//波浪移动速度 default:0.05
@property (nonatomic,assign) CGFloat speed;

//颜色
@property (nonatomic,strong) UIColor *fillColor;

//波浪偏移量
@property (nonatomic,assign) CGFloat offsetY;

//弧度大小 default:50
@property (nonatomic,assign) CGFloat arcHeight;

//波振幅大小 defalut:4 值越大,波浪越高
@property (nonatomic,assign) CGFloat rippleAmplitude;

@end```

在viewController使用

[[CZCRippleTool rippleToolWithOriginView:self.headerView]  start];```

想学习基本动画的可以看我的[上篇](http://www.jianshu.com/p/106d1b5cf104)文章
[demo](https://github.com/2360219637/CZCRipple-Test) 欢迎star
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容