原生JS实现两种爱心
目录
1.r=a(1-sinθ)
2.带动画效果的r=a(1-sinθ)
3.x^2+(y-(x^2)^(1/3))^2=1
4.带动画效果的x^2+(y-(x^2)^(1/3))^2=1
1.r=a(1-sinθ)
// 角度
var t0 = 0.1;
// 弧度
var t = t0 / 180 * Math.PI;
// 创建虚拟的节点对象
var frag = document.createDocumentFragment();
// 设置样式的函数
function setStyle (ele, styleObj) {
for (var attr in styleObj) {
ele.style[attr] = styleObj[attr];
}
}
// 设置了3600个小圆点
for (var i = 0; i < 3600; i++) {
// 创建虚拟div
var div = document.createElement("div");
// 设置样式
setStyle(div, {
position: "absolute",
width: "3px",
height: "3px",
"border-radius": "50%",
"background-color": "red",
left: -(100 * (2 * Math.sin(t) - Math.sin(2 * t)) - 300) + "px",
top: -(100 * (2 * Math.cos(t) - Math.cos(2 * t)) - 200) + "px"
});
// 递增
t0 += 0.1;
t = t0 / 180 * Math.PI;
frag.appendChild(div);
}
document.body.appendChild(frag);2.带动画效果的r=a(1-sinθ)
// 角度
var t0 = 0.1;
// 弧度
var t = t0 / 180 * Math.PI;
// 组成心形的div数组
var divArr = [];
// 设置样式的函数
function setStyle (ele, styleObj) {
for (var attr in styleObj) {
ele.style[attr] = styleObj[attr];
}
}
// 设置了3600个小圆点
for (var i = 0; i < 3600; i++) {
// 创建虚拟div
var div = document.createElement("div");
// 设置样式
setStyle(div, {
position: "absolute",
width: "3px",
height: "3px",
"border-radius": "50%",
"background-color": "red",
top: -(100 * (2 * Math.cos(t) - Math.cos(2 * t)) - 200) + "px",
left: -(100 * (2 * Math.sin(t) - Math.sin(2 * t)) - 300) + "px"
});
// 递增
t0 += 0.1;
t = t0 / 180 * Math.PI;
divArr.push(div);
}
// 心形左边部分所需要的数组索引值
var leftIndex = 0;
// 心形左边部分的动画定时器
var leftTimer = setInterval(() => {
// 给body添加小圆点
document.body.appendChild(divArr[leftIndex]);
leftIndex++;
// 清空定时器
if (leftIndex === divArr.length / 2) clearInterval(leftTimer);
}, 1);
// 心形右边部分所需要的数组索引值
var rightIndex = divArr.length - 1;
// 心形右边部分的动画定时器
var rightTimer = setInterval(() => {
document.body.appendChild(divArr[rightIndex]);
rightIndex--;
if (rightIndex === divArr.length / 2 - 1) clearInterval(rightTimer);
}, 1);3.x^2+(y-(x^2)^(1/3))^2=1
// 设置样式的函数
function setStyle (div, x, y) {
var styleObj = {
position: "absolute",
width: "3px",
height: "3px",
"border-radius": "50%",
"background-color": "red",
left: 100 * x + 200 + "px",
top: -100 * y + 200 + "px"
}
for (var key in styleObj) {
div.style[key] = styleObj[key];
}
return div;
}
// 创建虚拟的节点对象
var frag = document.createDocumentFragment();
// 图形的右上角部分
for (var x = 0; x <= 1;) {
var div = document.createElement("div");
y = Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.0001;
frag.appendChild(div);
}
// 图形的右下角部分
for (var x = 0; x < 1;) {
var div = document.createElement("div");
y = -Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.0001;
frag.appendChild(div);
}
// 图形的左上角部分
for (var x = -1; x < 0;) {
var div = document.createElement("div");
y = -Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.0001;
frag.appendChild(div);
}
// 图形的左下角部分
for (var x = -1; x < 0;) {
var div = document.createElement("div");
y = Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.0001;
frag.appendChild(div);
}
// 把虚拟节点添加到body里
document.body.appendChild(frag);4.带动画效果的x^2+(y-(x^2)^(1/3))^2=1
// 设置样式的函数
function setStyle (div, x, y) {
var styleObj = {
position: "absolute",
width: "3px",
height: "3px",
"border-radius": "50%",
"background-color": "red",
left: 100 * x + 200 + "px",
top: -100 * y + 200 + "px"
}
for (var key in styleObj) {
div.style[key] = styleObj[key];
}
return div;
}
// 图形的右上角部分
var rtArr = [];
for (var x = 0; x <= 1;) {
var div = document.createElement("div");
y = Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.001;
rtArr.push(div);
}
// 图形的右下角部分
var rbArr = [];
for (var x = 0; x < 1;) {
var div = document.createElement("div");
y = -Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.001;
rbArr.push(div);
}
// 图形的左上角部分
var ltArr = [];
for (var x = -1; x < 0;) {
var div = document.createElement("div");
y = Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.001;
ltArr.push(div);
}
// 图形的左下角部分
var lbArr = [];
for (var x = -1; x < 0;) {
var div = document.createElement("div");
y = -Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.pow(x, 2), 1 / 3);
div = setStyle(div, x, y);
x += 0.001;
lbArr.push(div);
}
// 右上角的动画效果结束紧接着右下角的动画效果
var rti = 0;
var rbi = rbArr.length;
var rbTimer;
// 右上角的动画效果
var rtTimer = setInterval(() => {
document.body.appendChild(rtArr[rti]);
rti++;
if (rti === lbArr.length) {
clearInterval(rtTimer);
// 右下角的动画效果
rbTimer = setInterval(() => {
rbi--;
document.body.appendChild(rbArr[rbi]);
if (rbi === 0) clearInterval(rbTimer);
}, 1)
}
}, 1)
// 左上角的动画效果结束紧接着左下角的动画效果
var lti = ltArr.length;
var lbi = 0;
var lbTimer;
// 左上角的动画效果
var ltTimer = setInterval(() => {
lti--;
document.body.appendChild(ltArr[lti]);
if (lti === 0) {
clearInterval(ltTimer);
// 左下角的动画效果
lbTimer = setInterval(() => {
document.body.appendChild(lbArr[lbi]);
lbi++;
if (lbi === lbArr.length) clearInterval(lbTimer);
}, 1)
}
}, 1)