{
const width = 1536;
const height = 720;
const svgns = "http://www.w3.org/2000/svg";
const svg = d3.select("svg");
svg.attr("xmlns", svgns).attr("viewBox", `0 0 ${width} ${height}`);
const style = d3.select("body").append("style").attr("type", "text/css");
const cubicBezCurvVal = "0.42, 0, 1, 1";
svg
.append("rect")
.attr("class", "vBoxRect")
.attr("width", `${width}`)
.attr("height", `${height}`)
.attr("fill", "#EFEFEF")
.attr("stroke", "black");
svg
.append("rect")
.attr("class", "red")
.attr("x", "0")
.attr("y", `${height / 2 - 40}`)
.attr("height", "50")
.attr("width", "50")
.attr("fill", "red")
.style("--dist", `${width - 50 + "px"}`);
svg
.append("line")
.attr("class", "path1")
.attr("x1", "0")
.attr("y1", () => {
return document.querySelector(".red").y.baseVal.value;
})
.attr("x2", `${width}`)
.attr("y2", () => {
return document.querySelector(".red").y.baseVal.value;
})
.attr("stroke", "red")
.attr("stroke-dasharray", "10");
const keyFrame1 = `
.red {
transform-box: fill-box;
animation-name: move1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(${cubicBezCurvVal});
animation-direction: normal;
animation-fill-mode: both;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(var(--dist));
}
}
`;
style["_groups"][0][0].innerHTML = keyFrame1;
svg
.append("rect")
.attr("class", "green")
.attr("x", "0")
.attr("y", `${height / 2 + 40}`)
.attr("height", "50")
.attr("width", "50")
.attr("fill", "green")
.style("--dist", `${width - 50 + "px"}`);
svg
.append("line")
.attr("class", "path2")
.attr("x1", "0")
.attr("y1", () => {
return document.querySelector(".green").y.baseVal.value;
})
.attr("x2", `${width}`)
.attr("y2", () => {
return document.querySelector(".green").y.baseVal.value;
})
.attr("stroke", "green")
.attr("stroke-dasharray", "10");
const pct = [];
for (let i = 0; i <= 100; i++) {
pct.push(i / 100);
}
var cleanVal = cubicBezCurvVal.split(",");
var cleanVal = cleanVal.map((x) => parseFloat(x.replace(/ /g, "")));
const p0 = {
x: 0,
y: 0
};
const p3 = {
x: 1,
y: 1
};
const p1 = {
x: cleanVal[0],
y: cleanVal[1]
};
const p2 = {
x: cleanVal[2],
y: cleanVal[3]
};
const x0 = p0.x;
const y0 = p0.y;
const x1 = p1.x;
const y1 = p1.y;
const x2 = p2.x;
const y2 = p2.y;
const x3 = p3.x;
const y3 = p3.y;
const x = (t) =>
Math.pow(1 - t, 3) * x0 +
3 * Math.pow(1 - t, 2) * t * x1 +
3 * (1 - t) * Math.pow(t, 2) * x2 +
Math.pow(t, 3) * x3;
const y = (t) =>
Math.pow(1 - t, 3) * y0 +
3 * Math.pow(1 - t, 2) * t * y1 +
3 * (1 - t) * Math.pow(t, 2) * y2 +
Math.pow(t, 3) * y3;
const c = width - 50;
const b = 0;
const time = [];
const progress = [];
pct.forEach((a) => {
time.push(x(a));
});
pct.forEach((a) => {
progress.push(y(a) * c + b);
});
var str = "@keyframes move{";
for (let i = 0; i < time.length; i++) {
var styleStr = `${time[i] * 100}%{ transform:translateX(${
progress[i]
}px);}`;
str += styleStr;
}
const keyFrame2 = `.green {
transform-box: fill-box;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-direction: normal;
animation-fill-mode: both;
}
${str}}
`;
style["_groups"][0][0].innerHTML += keyFrame2;
function progress1(t) {
const p0 = {
x: 0,
y: 0
};
const p3 = {
x: 1,
y: 1
};
const p1 = {
x: cleanVal[0],
y: cleanVal[1]
};
const p2 = {
x: cleanVal[2],
y: cleanVal[3]
};
const x0 = p0.x;
const y0 = p0.y;
const x1 = p1.x;
const y1 = p1.y;
const x2 = p2.x;
const y2 = p2.y;
const x3 = p3.x;
const y3 = p3.y;
const progress =
Math.pow(1 - t, 3) * y0 +
3 * Math.pow(1 - t, 2) * t * y1 +
3 * (1 - t) * Math.pow(t, 2) * y2 +
Math.pow(t, 3) * y3;
return t >= 1 ? 1 : progress;
}
svg
.append("rect")
.attr("class", "blue")
.attr("x", "0")
.attr("y", `${height / 2 + 120}`)
.attr("height", "50")
.attr("width", "50")
.attr("fill", "blue")
.each(function (d, i) {
d3.select(this)
.transition()
.duration(5000)
.attr("x", `${width - 50}`);
});
svg
.append("line")
.attr("class", "path3")
.attr("x1", "0")
.attr("y1", () => {
return document.querySelector(".blue").y.baseVal.value;
})
.attr("x2", `${width}`)
.attr("y2", () => {
return document.querySelector(".blue").y.baseVal.value;
})
.attr("stroke", "blue")
.attr("stroke-dasharray", "10");
}