本文共 3364 字，大约阅读时间需要 11 分钟。
由于知乎的粒子动画最近很火，而网上的教程大多都是jQuery的，所以我改成了最近流行vue版本。代码具体的含义我就不多做注释了可以参考http://blog.csdn.net/woosido123/article/details/72770612 这个人的博客，他已经写的很详细了我就不做重复的工作了，修改成vue的版本仅帮助喜欢用vue写动画的童鞋减少一点点的工作量。另外canvas的使用，参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API。
<template>
<section>
<canvas id="canvas" width="1229" height="680"></canvas>
</section>
</template>
export default {
name: 'uxCanvasBg',
data() {
return {
canvas: null,
ctx: null,
w: 0,
h: 0,
circles: [],
};
},
computed: {
},
watch: {
},
destroyed() {
},
methods: {
newobject(x, y) {
var object = new Object;
object.x = x;
object.y = y;
object.r = Math.random() * 3;
object._mx = Math.random();
object._my = Math.random();
this.circles.push(object)
},
drawCircle(obj) {
this.ctx.beginPath();
this.ctx.arc(obj.x, obj.y, obj.r, 0, 360)
this.ctx.closePath();
this.ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
this.ctx.fill();
},
drawLine(obj1, obj) {
let dx = obj1.x - obj.x;
let dy = obj1.y - obj.y;
let d = Math.sqrt(dx * dx + dy * dy)
if (d < 60) {
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.moveTo(obj1.x, obj1.y); //start
this.ctx.lineTo(obj.x, obj.y); //end
this.ctx.closePath();
this.ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
this.ctx.stroke();
}
},
move(obj) {
obj._mx = (obj.x < this.w && obj.x > 0) ? obj._mx : (-obj._mx);
obj._my = (obj.y < this.h && obj.y > 0) ? obj._my : (-obj._my);
obj.x += obj._mx / 2;
obj.y += obj._my / 2;
},
draw() {
this.ctx.clearRect(0, 0, this.w, this.h);
for (let i = 0; i < this.circles.length; i++) {
this.move.call(this.circles[i], this.circles[i])
this.drawCircle.call(this.circles[i], this.circles[i])
for (let j = i + 1; j < this.circles.length; j++) {
this.drawLine.call(this.circles[i], this.circles[i], this.circles[j])
}
}
requestAnimationFrame(this.draw)
},
init(num) {
for (var i = 0; i < num; i++) {
this.newobject(Math.random() * this.w, Math.random() * this.h);
}
this.draw()
},
},
created: function() {},
components: {
uxLogForm
},
mounted() {
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
this.canvas = document.getElementById('canvas');
this.ctx = canvas.getContext('2d');
this.w = canvas.width = canvas.offsetWidth;
this.h = canvas.height = canvas.offsetHeight;
this.init(180)
}
};.uxListBox {
position: absolute;
top: 60px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
.uxprojectList {
width: 85%;
display: inline-block;
margin-left: 7%;
.listBox {
white-space: normal;
font-size: 0;
.addProject {
div {
height: 300px;
line-height: 300px;
text-align: center;
p:first-child {
margin-top: 80px;
color: #7B7E7E;
line-height: 60px;
font-size: 40px;
}
p:last-child {
color: #7B7E7E;
line-height: 60px;
font-size: 20px;
}
}
display: inline-block;
vertical-align: top;
width: 30%;
height: 300px;
margin: 1.5% 1.5% 0;
border-radius: 7px;
background-color: #fff;
}
.projectItem {
vertical-align: top;
display: inline-block;
width: 30%;
height: 300px;
margin: 1.5%;
border-radius: 7px;
background-color: #fff;
}
width:100%;
height: auto;
background-color: transparent;
}
}
}
section {
margin: 0;
height: 100%; // min-height: 680px;
background: #000;
width: 100%;
background-image: url(../../static/img/xk.jpeg);
overflow: hidden;
}
canvas {
display: inline-block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}