仿写淘宝个人中心上面的波纹效果

2019年9月26日 127次阅读 来源: c4ibD3

DoubleWaves

一个正弦&&余弦波纹图

创作来源

双十一买东西的时候突然发现淘宝的顶部有一个微小的动画效果，感觉很炫。 实现这个效果的方案就是在一个View上面添加两个View 一个是sin函数图，另一个是cos函数图

使用方法

DoubleWaves *doubleWaves = [[DoubleWaves alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 26)]; 

[self.view addSubview:doubleWaves];

就是最简单的创建视图的方法就可以了。

参数

CGFloat waveA;//水纹振幅
CGFloat waveW ;//水纹周期
CGFloat offsetX1; //位移
CGFloat currentK; //当前波浪高度Y
CGFloat offsetX2; //位移
CGFloat wavesSpeed;//水纹速度
CGFloat WavesWidth; //水纹宽度

可以根据自己项目的需求，去调整相应的参数，实现相应的效果。

效果图

《仿写淘宝个人中心上面的波纹效果》

github：https://github.com/cAibDe/DoubleWaves

    原文作者：c4ibD3
    原文地址: https://segmentfault.com/a/1190000011148361
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞