javascript - 一个页面动画的问题?
本文介绍了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屋!
查看全文