javascript - 一个页面动画的问题？

Question

http://cheers.oneplus.cn/acti...
页面链接如上。
很想知道背景的波浪线条动画是怎么做出来？

Answer 1

楼上的，或许搞错了哦。

它们的背景线条动画是通过两个个canvas的动画拼接起来的。

再补充一点，看起来就是在不断跑sin和sos函数轨迹

function canvasBezier(a, b) {
    function c() {
        f.clearRect(0, 0, cwidth, cheight);
        for (var a = 3; a > 0; a--) {
            d[a - 1] += .5 * a;
            var c = (d[a - 1] + 120 * a) * Math.PI / 180;
            if (b)
                var e = Math.cos(c) * cheight * .09
                  , g = Math.sin(c) * cheight * .06;
            else
                var e = Math.sin(c) * cheight * .06
                  , g = Math.cos(c) * cheight * .09;
            f.setTransform(1, 0, 0, 1, 0, 0),
            f.strokeStyle = "rgba(" + bezierColor + (.2 * Math.cos(c) + .5) + ")",
            f.beginPath(),
            f.moveTo(0, .5 * cheight + e),
            f.bezierCurveTo(cwidth / 2, .5 * cheight + 2.5 * e, cwidth / 2, .5 * cheight + 2 * g, cwidth, .5 * cheight + g),
            f.stroke()
        }
    }
    if (!Modernizr.canvas)
        return !1;
    var d = [0, 0, 0]
      , e = document.getElementById(a)
      , f = e.getContext("2d");
    cwidth = $(window).width() >= 1130 ? $(window).width() : 1130,
    cheight = $(window).height(),
    e.width = cwidth,
    e.height = cheight,
    f.lineWidth = .5,
    e.timer = setInterval(c, 30),
    $(window).resize(function() {
        clearInterval(e.timer),
        cwidth = $(window).width() >= 1130 ? $(window).width() : 1130,
        cheight = $(window).height(),
        e.width = cwidth,
        e.height = cheight,
        f.lineWidth = 1,
        e.timer = setInterval(c, 30)
    })
}

Answer 2

看下源码呗，应该是用canvas吧

Answer 3

canvas,你可以找找那种扒代码的工具，看能不能扒下来

Answer 4

很遗憾，是张图片
http://statics.oneplus.cn/pro...