iOS 双波浪动画 – 类似淘宝个人信息状态栏,京东金融等

类似淘宝个人信息状态栏,京东金融等双波浪动画

主要方法:通过自定义View,利用正弦函数与余弦函数的效果.

一.相关概念解释

正弦函数: y =Asin(ωx+φ)+C
A 表示振幅,也就是使用这个变量来调整波浪的高度
ω表示周期,也就是使用这个变量来调整在屏幕内显示的波浪的数量
φ表示波浪横向的偏移,也就是使用这个变量来调整波浪的流动
C表示波浪纵向的位置,也就是使用这个变量来调整波浪在屏幕中竖直的位置。

(1)利用CADisplayLink,进行UI的刷新.

iOS设备的屏幕刷新频率(FPS)是60Hz,因此CADisplayLink的selector 默认调用周期是每秒60次,这个周期可以通过frameInterval属性设置, CADisplayLink的selector每秒调用次数=60/ frameInterval。
比如当 frameInterval设为2,每秒调用就变成30次。

关于CADisplayLink,此处用NSTimer亦可.

(2)CAShapeLayer
CAShapeLayer 的对象是一个本身没有形状,他的形状来源于你给定的Path,它依附于path,所以必须给定path,即使path不完整也会自动收尾相接,strokeStart以及stroleEnd代表着这个path中所占的百分比(可以使用storkeStart和stroleEnd来做曲线进度的动画).

二.主要代码

(1)正弦与余弦函数

三.相关效果

1.正弦函数与余弦函数:相同速度/振幅/周期/非震荡效果

112363830-9ec9a295ff0c0483

相同速度:振幅:周期:非震荡.gif

2.正弦函数与余弦函数:相同速度/振幅/周期/震荡效果*,这就类似淘宝个人信息状态栏,余弦函数中加π/2即是峰顶与峰底对应效果

122363830-b66d457f1a96d1e3

相同速度:振幅:周期:震荡.gif
当速度/振幅/周期等改变时,会产生更多的效果:

3.正弦函数与余弦函数:不同速度/振幅,相同周期/非震荡效果,这个效果用起来也很不错
此处设置为:正弦与余弦函数参数不相同时,会产生交错效果;此处自行尝试更改即可产生不同动画效果.

132363830-df7e70a0e9afe145

不同速度:振幅,相同周期非震荡.gif

4.正弦函数与余弦函数:不同速度/振幅,相同周期/震荡效果

142363830-cc61aebd4ef95e1d

不同速度:振幅,相同周期:震荡.gif

5.正弦函数与余弦函数:不同速度/振幅,相同周期/,峰顶与峰底对应效果,可自行开启震荡
更改余弦函数公式为:

152363830-204c3a4878d940d0

同速度:振幅:周期,峰顶与峰底对应.gif

6.正弦函数与余弦函数:如果需要让双波浪在屏幕下方显示
更改代码为:
以第一个波浪为例,第二个同理更改就行.

162363830-61b7f7c9a2a8716c

屏幕下方显示.png
四.Demo地址

欢迎star : https://github.com/FTCcheV/DoubleWavesAnimation

五.参考资料

1.http://blog.csdn.net/u010123208/article/details/51227035
2.http://www.tuicool.com/articles/meMVR3

有任何问题请私信或者留言,或者有更好的实现方法,也请告诉我.

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部