simple transforms done

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})`);
 }