88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const width = 600;
|
|
const height = 600;
|
|
const svg = d3.select("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
// let pict1 = drawSmile(svg);
|
|
// pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
|
|
|
|
// let pict = drawSmile(svg);
|
|
// pict.attr("transform", "translate(200, 200)");
|
|
|
|
setting.applyButton.addEventListener("click", () => {
|
|
draw(setting);
|
|
})
|
|
setting.clearButton.addEventListener("click", () => {
|
|
svg.selectAll('*').remove()
|
|
})
|
|
|
|
updateAnimationControllsDisplay();
|
|
enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
|
|
animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
|
|
|
|
|
|
startAnimButton.addEventListener("click", () => {
|
|
animRouter(setting)
|
|
})
|
|
|
|
})
|
|
|
|
const updateAnimationControllsDisplay = () => {
|
|
let isChecked = enableAnimCheckbox.checked;
|
|
let isPathAnim = animAlongPathCheckbox.checked;
|
|
// console.log(isChecked);
|
|
document.querySelectorAll(".anim-related").forEach((elem) => { elem.hidden = !isChecked });
|
|
document.querySelectorAll(".anim-related-inverse").forEach((elem) => { elem.hidden = isChecked });
|
|
document.querySelectorAll(".path-anim-related").forEach((elem) => { elem.hidden = !(isPathAnim && isChecked) });
|
|
document.querySelectorAll(".path-anim-related-inverse").forEach((elem) => { elem.hidden = (isPathAnim && isChecked) });
|
|
}
|
|
|
|
|
|
const draw = (dataForm) => {
|
|
const svg = d3.select("svg")
|
|
let pict = drawSmile(svg);
|
|
pict.attr("transform", `
|
|
translate(${dataForm.cx.value},
|
|
${dataForm.cy.value})
|
|
scale(${dataForm.sx.value},
|
|
${dataForm.sy.value})
|
|
rotate(${dataForm.r.value})`);
|
|
|
|
}
|
|
|
|
const animRouter = (dataForm) => {
|
|
if (dataForm.animAlongPathCheckbox.checked) {
|
|
let path = drawPath(Number(dataForm.pathSelect.value));
|
|
const svg = d3.select("svg")
|
|
let pict = drawSmile(svg);
|
|
pict.transition()
|
|
.ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
|
|
.duration(6000)
|
|
.attrTween('transform', translateAlong(path.node()));
|
|
}
|
|
else {
|
|
runAnimation(dataForm)
|
|
}
|
|
}
|
|
|
|
const runAnimation = (dataForm) => {
|
|
const svg = d3.select("svg")
|
|
let pict = drawSmile(svg);
|
|
pict.attr("transform", `
|
|
translate(${dataForm.cx.value},
|
|
${dataForm.cy.value})
|
|
scale(${dataForm.sx.value},
|
|
${dataForm.sy.value})
|
|
rotate(${dataForm.r.value})`)
|
|
.transition()
|
|
.duration(6000)
|
|
.ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
|
|
.attr("transform", `
|
|
translate(${dataForm.cx_finish.value},
|
|
${dataForm.cy_finish.value})
|
|
scale(${dataForm.sx_finish.value},
|
|
${dataForm.sy_finish.value})
|
|
rotate(${dataForm.r_finish.value})`);
|
|
} |