美文网首页
波浪线的实现

波浪线的实现

作者: 高灏轩 | 来源:发表于2018-01-29 18:00 被阅读136次

一、显示效果

二、原理

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

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

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

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

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

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

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

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

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

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

三、代码

相关文章

  • 波浪线的实现

    一、显示效果 二、原理 实现原理主要是通过绘制出一条正弦曲线和一条余弦曲线,在两条曲线上下方添加不同的背景色,让曲...

  • 学习中的波浪线

    波浪线在Word文档中有红色波浪线和绿色波浪线,它们的意思分别如下。 红色波浪线:word的系统认为该处可能存在单...

  • 波浪线

    相对身边的大多数人我算起的早,即使假日也不会比平时多睡。放假在家,如无意外,八点左右自然醒,却不常不短的玩手...

  • 波浪线

    上帝随手一挥 便是一条连绵起伏的波浪线 一座小山看到了 心中深感好奇 并走入这条波浪线下 没想到 这却成为了他最后...

  • 波浪线

    有人曾在领奖时说过一段话,说“以前上学的时候写作文,老师会在我们写的好的句子下面画上美丽的波浪线。今天我的到了这个...

  • vue 引入less公共文件

    正确引入方式 注意:波浪线跟波浪线是有区别的 ~这样会报错 ~这样才可以 (其实就是英文波浪线,注意别错了)

  • Class2 Homework

    ① 用笔(线条练习) ✦ 短直线,长直线,大波浪线,小波浪线,三角波浪线,飞线等 ✦ 取任意两点连接直线(两点之间...

  • 波浪线的生活

    昨天的天气还是晴空万里,今天就是阴雨绵绵,这就像生活一样,时而低落,时而高峰,看懂了万事万物的规律,对于很多事也不...

  • 波浪线的畅想

    波浪线可以是:海浪;可以是颜色不一样的沙滩,波浪线刻花的木头,高低不平的横截面切口,叮在身上高低起伏的包…… 连起...

  • 波浪线‖生命

    接龙客栈悬赏第十三期【03】波浪线故事 文/清风自来

网友评论

      本文标题:波浪线的实现

      本文链接:https://www.haomeiwen.com/subject/bycfzxtx.html