JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var pointsDuration = 10000;
var pointsTimeout;
var unitSize;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var pointsArray;
var splines = '0.5 0.5 0.5 0.5';
var times = '0;1';
window.onload = onLoad;
window.onresize = onResize;
function onLoad() {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var svgNS = svg.namespaceURI;
svg.setAttribute('width', window.innerWidth);
svg.setAttribute('height', window.innerHeight);
document.querySelector('#bg').appendChild(svg);
unitSize = (window.innerWidth + window.innerHeight) / 20;
numPointsX = Math.ceil(window.innerWidth / unitSize) + 1;
numPointsY = Math.ceil(window.innerHeight / unitSize) + 1;
unitWidth = Math.ceil(window.innerWidth / (numPointsX - 1));
unitHeight = Math.ceil(window.innerHeight / (numPointsY - 1));
pointsArray = [];
for (var y = 0; y < numPointsY; y++) {
for (var x = 0; x < numPointsX; x++) {
var newX = unitWidth * x;
var newY = unitHeight * y;
pointsArray.push({
x: newX,
y: newY,
trueX: newX,
trueY: newY
});
}
}
randomizePoints();
for (var i = 0; i < pointsArray.length; i++) {
if (pointsArray[i].trueX != unitWidth * (numPointsX - 1) && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {
var topLeftX = pointsArray[i].x;
var topLeftY = pointsArray[i].y;
var topRightX = pointsArray[i + 1].x;
var topRightY = pointsArray[i + 1].y;
var bottomLeftX = pointsArray[i + numPointsX].x;
var bottomLeftY = pointsArray[i + numPointsX].y;
var bottomRightX = pointsArray[i + numPointsX + 1].x;
var bottomRightY = pointsArray[i + numPointsX + 1].y;
var rando = Math.floor(Math.random() * 2);
for (var n = 0; n < 2; n++) {
var polygon = document.createElementNS(svgNS, 'polygon');
if (rando == 0) {
if (n == 0) {
polygon.point1 = i;
polygon.point2 = i + numPointsX;
polygon.point3 = i + numPointsX + 1;
polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + bottomRightX + ',' + bottomRightY);
} else if (n == 1) {
polygon.point1 = i;
polygon.point2 = i + 1;
polygon.point3 = i + numPointsX + 1;
polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);
}
} else if (rando == 1) {
if (n == 0) {
polygon.point1 = i;
polygon.point2 = i + numPointsX;
polygon.point3 = i + 1;
polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY);
} else if (n == 1) {
polygon.point1 = i + numPointsX;
polygon.point2 = i + 1;
polygon.point3 = i + numPointsX + 1;
polygon.setAttribute('points', bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);
}
}
polygon.setAttribute('fill', 'rgba(0,0,0,' + (Math.random() / 3) + ')');
var animatePoints = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animatePoints.setAttribute('fill', 'freeze');
animatePoints.setAttribute('attributeName', 'points');
animatePoints.setAttribute('dur', pointsDuration + 'ms');
animatePoints.setAttribute('keySplines', splines);
animatePoints.setAttribute('keyTimes', times);
animatePoints.setAttribute('calcMode', 'spline');
polygon.appendChild(animatePoints);
svg.appendChild(polygon);
}
}
}
onPointsInterval();
}
function randomizePoints() {
for (var i = 0; i < pointsArray.length; i++) {
if (pointsArray[i].trueX != 0 && pointsArray[i].trueX != unitWidth * (numPointsX - 1)) {
pointsArray[i].x = pointsArray[i].trueX + Math.random() * unitWidth - unitWidth / 2;
}
if (pointsArray[i].trueY != 0 && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {
pointsArray[i].y = pointsArray[i].trueY + Math.random() * unitHeight - unitHeight / 2;
}
}
}
function onPointsInterval() {
randomizePoints();
for (var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
var polygon = document.querySelector('#bg svg').childNodes[i];
var animate = polygon.childNodes[0];
if (animate.getAttribute('to')) {
animate.setAttribute('from', animate.getAttribute('to'));
}
animate.setAttribute('to', pointsArray[polygon.point1].x + ',' + pointsArray[polygon.point1].y + ' ' + pointsArray[polygon.point2].x + ',' + pointsArray[polygon.point2].y + ' ' + pointsArray[polygon.point3].x + ',' + pointsArray[polygon.point3].y);
animate.beginElement();
}
pointsTimeout = setTimeout(function() {
onPointsInterval();
}, pointsDuration);
}
function onResize() {
while (document.getElementById("polygonContainer").hasChildNodes()) {
document.getElementById("polygonContainer").removeChild(document.getElementById("polygonContainer").lastChild);
}
clearTimeout(pointsTimeout);
onLoad();
}