<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>粒子碎片树</title>
<style>
body {
overflow: hidden;
margin: 0;
}
.twitter:hover a {
transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
color: #21c2ff;
}
.twitter a {
bottom: -40px;
right: -75px;
transform: rotate(-45deg);
}
.twitter i {
bottom: 7px;
right: 7px;
color: #00ACED;
}
.social-icon a {
position: absolute;
background: white;
color: white;
box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
display: inline-block;
width: 150px;
height: 80px;
transform-origin: 50% 50%;
transition: .15s ease-out;
}
.social-icon i {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: .15s ease-out;
}
.youtube:hover a {
transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
color: #ec4c44;
}
.youtube a {
bottom: -40px;
left: -75px;
transform: rotate(45deg);
}
.youtube i {
bottom: 7px;
left: 7px;
color: #E62117;
}
</style>
</head>
<body>
<script src="js/TweenMax.min.js"></script>
<canvas></canvas>
<script>
// Hold mouse down to enter tree-mode
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
// Variables
const mouse = {
x: innerWidth / 2,
y: innerHeight / 2
}
// Event Listeners
addEventListener('mousedown', () => {
tree.beginLoop = false
TweenLite.to(tree.branch, 1, {
x: 0,
y: 0,
ease: Power4.easeInOut
})
})
addEventListener('mousemove', event => {
mouse.x = event.clientX
mouse.y = event.clientY
})
addEventListener('mouseup', () => {
tree.beginLoop = true
})
addEventListener('resize', () => {
canvas.width = innerWidth
canvas.height = innerHeight
init()
})
// Utility Functions
function drawBranch(l, branchAngle, branchWidth, x, y) {
// Make longer branches wider
c.fillRect(x, y, branchWidth, -l)
c.save()
c.translate(0, -l)
if (l > 1) {
// Start at -80 degrees
let angle = -Math.PI * 4 / 9
// Draw three branches
for (let i = 0; i < 3; i++) {
// The length of our new branches
let length2 = l * 0.47
// Make the middle branch bigger
if (i == 1) length2 = length2 + 0.3 * l
c.save()
c.rotate(angle)
drawBranch(length2, branchAngle, branchWidth, x, y)
c.restore()
// Add 90 degrees for the next branch
angle = angle + branchAngle
}
}
c.restore()
}
// Objects
function Tree(x, y, color) {
this.x = x
this.y = y
this.color = color
this.branch = {
x: 200,
y: 200,
length: 30,
width: 1,
angle: Math.PI / 2
}
this.hasInitialized = false
this.beginLoop = false
this.lastMouse = {
x: mouse.x,
y: mouse.y
}
this.hue = 255
}
Tree.prototype.draw = function() {
c.fillStyle = `hsl( ${this.hue}, 76%, 81%)`
c.save()
c.translate(this.x, this.y)
drawBranch(
this.branch.length,
this.branch.angle,
this.branch.width,
this.branch.x,
this.branch.y
)
c.restore()
}
Tree.prototype.update = function(ticker) {
this.draw()
if (this.beginLoop === true) {
this.branch.x = this.branch.x + Math.cos(ticker)
this.branch.y = this.branch.y + Math.sin(ticker)
}
this.hue = Math.abs(255 * Math.sin(ticker * 0.5))
this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.01
this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.01
this.x = this.lastMouse.x
this.y = this.lastMouse.y + 55
}
// Implementation
let tree
function init() {
tree = new Tree(canvas.width / 2, canvas.height / 2 + 40, 'green')
}
// Animation Loop
let ticker = 0
function animate() {
requestAnimationFrame(animate)
c.fillStyle = 'black'
c.fillRect(0, 0, canvas.width, canvas.height)
tree.update(ticker)
ticker += 0.01
if (tree.hasInitialized === false) {
tree.hasInitialized = true
TweenLite.to(tree.branch, 1.5, {
x: 0,
y: 0,
ease: Power4.easeInOut
})
setTimeout(() => {
tree.beginLoop = true
}, 1900)
}
}
init()
animate()
</script>
</body>
</html>
