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

问题描述

问 题

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

解决方案

楼上的，或许搞错了哦。

它们的背景线条动画是通过两个个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)
    })
}

这篇关于javascript - 一个页面动画的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！