【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou#dji.com, 合适的话当天回复,当天内推。 更多福利

昨天晚上睡觉前脑海中突然闪过一个特效,从构思,设计,编码,调试,优化,雕琢花了一个多小时。自己爽了一把,发给烧饼哥和吴大狗看,得到了一致评价。

先看效果图:

wave

由于录屏的缘故,看上去可能有些卡顿,也可以打开 CodePen 看源码,接下来的内容主要是讲如何实现这样的效果。

(当然,我知道无论发什么给他们得到的结果都是一样的牛逼Orz,以至于有时候我不能确定他们有没有点开链接看。)

日常Orz

Intro

很早以前,刚开始学前端,买了本 CSS + HTML 入门实战之类的书,然后设计师甩给我一个酷炫的曲线图。

请问这样的效果能实现吗?
额。。。我看一下。。。嗯。。。不好看吧,太花哨了。。。要不你看看 iChart 的图表怎么样。。。有现成的,不要重复造轮子了。。。

相信不少人有跟我类似的经历,面对狂拽酷炫的动画无从下手,就像我第一次看到 Wave 动画的时候,心里冒出千千万万个疑问,卧槽,这里的曲线是怎么实现的,流畅的动画是怎么实现的,渐变又TM是怎么实现???

一次次经历接受设计和产品的拷问,你也不好意思所有需求都拿 iChart 来挡箭了。动手吧骚年。

练兵场

像极了每一次初始化在线演示项目,得想好用到什么方式实现。这种酷炫的效果 DOM 节点肯定是不合适了,SVG 兴许能实现,但是能预见到必然会有明显卡顿。用 Canvas 吧。

可以通过 js 来插入 canvas,可以不写 html,那就直接写点样式意思意思。

1
2
3
4
5
6
7
8
9
10
11
12
13
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

canvas {
width: 100%;
height: 100%;
background: #232323;
}

把基础的代码准备好,然后再 requestAnimationFrame 里面来实现每一帧的动画,当然,如果你不需要动画,直接把 requestAnimationFrame 去掉就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const canvas = document.createElement('canvas')
document.body.appendChild(canvas)

const ctx = canvas.getContext('2d')

const width = canvas.width = canvas.offsetWidth
const height = canvas.height = canvas.offsetHeight

const run = () => {
requestAnimationFrame(run)
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.strokeStyle="white"
ctx.lineWidth = 1
ctx.moveTo(0, height * 0.5)
ctx.lineTo(width, height * 0.5)
ctx.stroke()
ctx.closePath()
}

run()

不出意外,你可以在屏幕水平中看到一条白色线条,继续继续。

性感的三角函数

实现 Wave 动画的基础及核心就是三角函数。我们对这个家伙再了解不过了,只是在实际用到的时候,没想起来罢了。

sin & cos

简单回顾一下,高中在解数学题的时候如鱼得水的快感,应该能记起来不少三角函数的定理吧。我们不展开讲三角函数,不然就变成乏味的大学课堂了。

反正连续的 x 通过 Math.sin 就能映射到正弦函数上的值就对了,连起来就是一条曲线啊。( 大家好我是谷阿莫)

1
2
3
4
5
6
7
8
9
10
const run = () => {
// ...
ctx.moveTo(0, height * 0.5)
for (let x = 0; x < width; x++) {
const y = Math.sin(x) + height / 2
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.closePath()
}

仔细看,直线变成了正弦曲线。

正弦曲线

不够明显,调整下参数。按照高中的思维是,先放大横坐标,再提高振幅~噢对了,顺便加点渐变色。

1
2
3
4
5
6
7
8
9
10
11

const grad = ctx.createLinearGradient(0, 0, width, 0);
grad.addColorStop(0, '#6e45e2');
grad.addColorStop(1, '#88d3ce');
ctx.strokeStyle = grad
ctx.lineWidth = 1
ctx.moveTo(0, height * 0.5)
for (let x = 0; x < width; x++) {
const y = Math.sin(x * 0.02) * 50 + height / 2
ctx.lineTo(x, y)
}

单条渐变曲线
🎉🎉🎉 恭喜你完成任务一。

浪起来

接下来的任务是让曲线动起来。

那怎么让曲线平滑地动起来呢?事实上,动画形成的原理是以一定的速度(如每秒16张)连续播放时,人眼捕获到之后通过视觉残象产生错觉,把它们连起来。所以!!!连续移动曲线就形成能动画…

前面提到 requestAnimationFrame ,这个好家伙(microTask)会在每次浏览器合适的时候执行回调(能很好满足我们对帧率的要求),不像 setTimeout (macroTask)容易出现掉帧,跳动的问题。

调整一下代码。

1
2
3
4
5
6
7
8
9
10
11
12
let xMove = 0
let xSpeed = -0.04

const run = () => {
// ...
xMove += xSpeed
for (let x = 0; x < width; x++) {
const y = Math.sin(x * 0.02 + xMove) * 50 + height / 2
ctx.lineTo(x, y)
}
// ...
}

现在你得到了一条绵延不断,并且带渐变的正弦曲线。由于所有波峰波谷都一样高,有点像心跳检测仪器。。。再想办法让入口和出口的振幅减小。这时候三角函数又派上用场。很明显,只要让正弦曲线向右移动 0.5 * PI,然后再向上移动 1 就可以得到我们要的效果,左半个周期是从 0 -> 1 右半个周期是从 1 -> 0。

sine变形

1
2
3
4
5
for (let x = 0; x < width; x++) {
const scale = (Math.sin(x / width * Math.PI * 2 - Math.PI * 0.5) + 1) * 0.5
const y = Math.sin(x * 0.02 + xMove) * 50 * scale + height / 2
ctx.lineTo(x, y)
}

就这么简单,再稍微处理一下,支持多条曲线同时展示。就大工告成!由于时间关系,我想睡觉了。👋 完整代码看Codepen,欢迎 Star !

wave

最后感谢 Chinuketsu,没有她,我早就写完了。

最后感谢 Chinuketsu,没有她,我早就写完了。

相关链接

如需转载,请注明出处: http://w3ctrain.com / 2018/06/26/wave-step-by-step/