() 一个页面动画的问题?

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

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

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

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

楼上的,或许搞错了哦。

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

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

function canvasBeziera, b { function c { f.clearRect0, 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.cosc * cheight * .09 , g = Math.sinc * cheight * .06; else var e = Math.sinc * cheight * .06 , g = Math.cosc * cheight * .09; f.setTransform1, 0, 0, 1, 0, 0, f.strokeStyle = "rgba" + bezierColor + .2 * Math.cosc + .5 + "", f.beginPath, f.moveTo0, .5 * cheight + e, f.bezierCurveTocwidth / 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.getElementByIda , 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 = setIntervalc, 30, $window.resizefunction { clearIntervale.timer, cwidth = $window.width >= 1130 ? $window.width : 1130, cheight = $window.height, e.width = cwidth, e.height = cheight, f.lineWidth = 1, e.timer = setIntervalc, 30 }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注