右侧
当前位置:网站首页 > 资讯 > 正文

怒放的生命吉他谱c调[怒放的生命solo吉他谱原版]

作者:admin 发布时间:2024-11-06 07:22 分类:资讯 浏览:11 评论:0


导读:(点击上方公众号,可快速关注)  来源:WelkinXie  链接:https://www.jianshu.com/p/0990d1d8d9c4  由于前段时间发现自己在Githu...

(点击上方公众号,可快速关注)

  来源:WelkinXie

  链接:https://www.jianshu.com/p/0990d1d8d9c4

  由于前段时间发现自己在Github上的这份代码被简书上某用户直接拷贝来发表了,而又并没有注明代码出处,于是决定还是自己着手写一篇好了。

  https://github.com/WelkinXie/WXWaveView

  先看一下最终效果图:

  

  首先我们可以把如此丝滑的水波纹拆分一下下:

一条规律的曲线。

曲线匀速向右移动。

曲线下方的位置用颜色填充。

  于是先来一条曲线吧。

  对于需要产生波动如此规律的曲线,我们首先想到的应该就是三角函数了。

  例如我们熟悉的正弦曲线:

  

  及其公式:

  f(x) = Asin(ωx+φ)+k

  而SDK也为我们提供了这个正弦函数:

  externdoublesin(double);

  于是乎通过一个循环就能轻易地获取到这条曲线了:

  CGFloaty= 0.f;

怒放的生命吉他谱c调[怒放的生命solo吉他谱原版]

  for(CGFloatx= 0.f;x<= CGRectGetWidth(self.frame);x++){

  y= height * sin(self.angularSpeed * x+ self.offsetX);

  CGPathAddLineToPoint(path,NULL,x,y);

  }

  让它动起来

  我们需要在屏幕每次刷新的时候进行一次曲线的绘制,让它不断地刷新。

  self.waveDisplayLink= [CADisplayLinkdisplayLinkWithTarget:selfselector:@selector(currentWave)];

  而根据上面的正弦函数公式,曲线要向右移,其φ值就需要变小。于是在 currentWave 方法每次调用的时候,offsetX均减去同一个固定值,以实现匀速的运动。

  self.offsetX-= self.waveSpeed;

  涂个颜色

  连个线,形成封闭空间:

  CGMutablePathRefpath= CGPathCreateMutable();

  CGPathMoveToPoint(path,NULL,0,height/ 2);

  CGFloaty= 0.f;

  for(CGFloatx= 0.f;x<= CGRectGetWidth(self.frame);x++){

  y= height * sin(self.angularSpeed * x+ self.offsetX);

  CGPathAddLineToPoint(path,NULL,x,y);

  }

  CGPathAddLineToPoint(path,NULL,width,height);

  CGPathAddLineToPoint(path,NULL,0,height);

  CGPathCloseSubpath(path);

  再填个色:

  self.waveShapeLayer.fillColor= self.waveColor.CGColor;

  好了。

  至于最后的渐变消失略简单就不说了。有兴趣的直接到文末下载完整代码吧~

  多扯两句

  这水波纹并不限定在拖动过后才能波动,而是随时想动就动、想停就停。

  于是最近我想到了一些新玩法,例如用作刷新等待视图。

  

  更多的玩法就自行发掘吧~

  最后

  完整代码呈上:

  Github: https://github.com/WelkinXie/WXWaveView

  其使用方法在该页面中会有介绍。

  喜欢的欢迎给个star~玩得开心哈。

-------------推荐 ------------

  范品社推出的极客T恤,含程序员、电影、美剧和物理题材,面料舒适、100%纯棉,有黑、白、灰、藏青色,单件 ¥59.9、两件减¥12、四件减¥28、六件减¥42,详见网店商品页介绍。

  (上面为部分 T 恤款式)

  网店地址:https://fanpinshe.taobao.com

  淘口令:复制以下红色内容,然后打开手淘即可购买

  范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

标签:


取消回复欢迎 发表评论: