波浪线的实现

一、显示效果


二、原理

实现原理主要是通过绘制出一条正弦曲线和一条余弦曲线,在两条曲线上下方添加不同的背景色,让曲线按照一个方向移动即可模拟出波浪的效果。首先需要了解曲线公式:

正弦曲线公式:y=Asin(ωx+φ)+k

A :振幅,曲线最高位和最低位的距离

ω :角速度,用于控制周期大小,单位x中起伏的个数

K :偏距,曲线上下偏移量

φ :初相,曲线左右偏移量


波浪线的实现_第1张图片

如果让曲线按照X轴以移动速度移动下去就会出现波浪的效果 ,按照以下步骤即可,和把大象放冰箱里的步骤差不多。

第一步:添加一条曲线----->第二步:让曲线沿x轴移动 ----->第三步:在曲线下部分添加填充色

波浪线的实现_第2张图片
波浪线的实现_第3张图片
波浪线的实现_第4张图片

到这里就完成了一层波浪,然后再添加第二层即可,如果第一层为余弦曲线,第二层则需添加正弦曲线,这样看起来就会有分层的感觉。


波浪线的实现_第5张图片
波浪线的实现_第6张图片
波浪线的实现_第7张图片

然后稍加润色可以了,是不是很简单。

三、代码


波浪线的实现_第8张图片
波浪线的实现_第9张图片
波浪线的实现_第10张图片
波浪线的实现_第11张图片
波浪线的实现_第12张图片

你可能感兴趣的:(波浪线的实现)