diff --git a/labs/lab2/JavaScript/main.js b/labs/lab2/JavaScript/main.js index 10252ff..e70791b 100644 --- a/labs/lab2/JavaScript/main.js +++ b/labs/lab2/JavaScript/main.js @@ -18,21 +18,22 @@ document.addEventListener("DOMContentLoaded", function () { svg.selectAll('*').remove() }) - enableAnimCheckbox.addEventListener("change", () => { - let isChecked = enableAnimCheckbox.checked; - if (isChecked) { - startAnimButton.display = "inline-block"; - animTypeSelect.display = "inline-block"; - applyButton.display = "none"; - } - else { - startAnimButton.display = "none"; - animTypeSelect.display = "none"; - applyButton.display ="inline-block"; - } + updateAnimationControllsDisplay(); + enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay); + + + startAnimButton.addEventListener("click", () => { + runAnimation(setting) }) }) +const updateAnimationControllsDisplay = () => { + let isChecked = enableAnimCheckbox.checked; + // console.log(isChecked); + document.querySelectorAll(".anim-related").forEach((elem) => { elem.hidden = !isChecked }); + document.querySelectorAll(".anim-related-inverse").forEach((elem) => { elem.hidden = isChecked }); +} + const draw = (dataForm) => { const svg = d3.select("svg") @@ -44,4 +45,24 @@ const draw = (dataForm) => { ${dataForm.sy.value}) rotate(${dataForm.r.value})`); +} + +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})`); } \ No newline at end of file diff --git a/labs/lab2/index.html b/labs/lab2/index.html index e46d028..ebdbd55 100644 --- a/labs/lab2/index.html +++ b/labs/lab2/index.html @@ -12,33 +12,45 @@

Координаты рисунка
-
+ + + +
- + + +

Масштаб
-
+ + + +
+ +

Поворот
-
+ + +

- +

Включить Анимацию? -
- +