HTML鼠标悬停倒三角变正三角,HTML5/Canvas交互式漂浮三角形动画背景

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var Triangle = function(params) {

this.position = params.position || {

x: 0,

y: 0

};

this.rotation = params.rotation || 0;

this.color = params.color ||  '255,255,255';

this.currentRadius = params.radius ||  20;

this.targetRadius = params.radius ||  20;

this._radius = params.radius ||  20;

this.fillOpacity = params.opacity || 0;

this.targetOpacity = 0;

this.currentOpacity = 0;

this.isRotating = false;

}

Triangle.prototype.getPointsFromPosition = function() {

var xoffset = Math.cos(Math.PI / 6) * this.currentRadius;

var yoffset = Math.sin(Math.PI / 6) * this.currentRadius;

return [{

x: this.position.x,

y: this.position.y - this.currentRadius

}, {

x: this.position.x + xoffset,

y: this.position.y + yoffset

}, {

x: this.position.x - xoffset,

y: this.position.y + yoffset

}]

}

Triangle.prototype.rotate = function(cx, cy, x, y, angle) {

var radians = (Math.PI / 180) * angle,

cos = Math.cos(radians),

sin = Math.sin(radians),

nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,

ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;

return {

x: nx,

y: ny

};

}

Triangle.prototype.update = function() {

// Get Points

this.points = this.getPointsFromPosition();

// Transform points with rotation

var rotatePoints = [];

_.forEach(this.points, (point) => {

rotatePoints.push(this.rotate(this.position.x, this.position.y, point.x, point.y, this.rotation));

});

this.points = rotatePoints;

// Opacity

this.currentOpacity = this.currentOpacity + (this.targetOpacity - this.currentOpacity) * 0.05;

// Radius

this.currentRadius = this.currentRadius + (this.targetRadius - this.currentRadius) * 0.05;

// Rotation

this.isRotating ? this.rotation += 0.5 : this.rotation -= Math.random() * 0.1;

// Draw

context.save();

//context.translate( this.position.x, this.position.y );

//context.rotate( this.rotation * Math.PI / 180 );

//context.translate( -this.position.x, -this.position.y );

context.strokeStyle = "rgba(" + this.color + ",1)";

context.fillStyle = "rgba(" + this.color + "," + this.currentOpacity + ")";

context.beginPath();

context.moveTo(this.points[0].x, this.points[0].y);

context.lineTo(this.points[1].x, this.points[1].y);

context.lineTo(this.points[2].x, this.points[2].y);

context.closePath();

context.stroke();

context.fill();

context.restore();

}

let canvas = document.createElement('canvas');

let context = canvas.getContext('2d');

let container = document.getElementById('container');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

container.appendChild(canvas);

var displayObjects = [];

var animate = function() {

window.requestAnimationFrame(animate);

context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < displayObjects.length; i++) {

if (displayObjects[i].update != void(0)) {

displayObjects[i].update();

}

}

};

animate();

var setup = function() {

var triangle;

for (var i = 0; i < Math.floor(window.innerWidth / 2); i++) {

triangle = new Triangle({

position: {

x: Math.random() * canvas.width,

y: Math.random() * canvas.height

},

radius: Math.random() * 100,

rotation: Math.floor(Math.random() * 5) * 90

});

displayObjects.push(triangle);

}

}

setup();

var pointInPolygon = function(poly, point) {

var i, j = poly.length - 1;

var oddNodes = false;

for (i = 0; i < poly.length; i++) {

if ((poly[i].y < point.y && poly[j].y >= point.y || poly[j].y < point.y && poly[i].y >= point.y) && (poly[i].x <= point.x || poly[j].x <= point.x)) {

oddNodes ^= (poly[i].x + (point.y - poly[i].y) / (poly[j].y - poly[i].y) * (poly[j].x - poly[i].x) < point.x);

}

j = i;

}

return oddNodes;

}

var mousePos = {

x: 0,

y: 0

};

var inside;

var mouseListener = function(e) {

mousePos = {

x: e.pageX,

y: e.pageY

};

_.forEach(displayObjects, (object) => {

inside = pointInPolygon(object.points, mousePos);

object.targetOpacity = inside ? 1 : 0;

object.targetRadius = inside ? 2 * object._radius : object._radius;

object.isRotating = inside;

});

};

var resize = function() {

displayObjects = [];

setup();

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

window.addEventListener('mousemove', mouseListener);

window.addEventListener('resize', resize);