一个页面动画的问题?

阅读 2.3k
4 个回答

楼上的,或许搞错了哦。

clipboard.png

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

再补充一点,看起来就是在不断跑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)
    })
}

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题