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

labs/lab2/index.html

@@ -12,33 +12,45 @@
     <form id="setting">
         <p>Координаты рисунка<br>
             <label for="cx">x: </label>
-            <input type="number" id="cx" value="300" max="600" min="0"><br>
+            <input type="number" id="cx" value="300" max="600" min="0">
+            <label class="anim-related" for="cx_finish">до: </label>
+            <input class="anim-related" type="number" id="cx_finish" value="300" max="600" min="0">
+            <br>
             <label for="cy">y: </label>
-            <input type="number" id="cy" value="300" max="600" min="0">
+            <input class="anim-related" type="number" id="cy" value="300" max="600" min="0">
+            <label class="anim-related" for="cy_finish">до: </label>
+            <input type="number" id="cy_finish" value="300" max="600" min="0">
         </p>
         <p>Масштаб<br>
             <label for="sx">по x: </label>
-            <input type="number" id="sx" value="1" max="100" min="-100"><br>
+            <input type="number" id="sx" value="1" max="100" min="-100">
+            <label class="anim-related" for="sx_finish">до: </label>
+            <input class="anim-related" type="number" id="sx_finish" value="1.5" max="100" min="-100">
+            <br>
             <label for="sy">по y: </label>
             <input type="number" id="sy" value="1" max="100" min="-100">
+            <label class="anim-related" for="sy_finish">до: </label>
+            <input class="anim-related" type="number" id="sy_finish" value="1.5" max="100" min="-100">
         </p>
         <p>Поворот<br>
             <label for="r">x: </label>
-            <input type="number" id="r" value="0" max="360" min="-360"><br>
+            <input type="number" id="r" value="0" max="360" min="-360">
+            <label class="anim-related" for="r_finish">до: </label>
+            <input class="anim-related" type="number" id="r_finish" value="360" max="360" min="-360">
         </p>
         <p>
-            <input type="button" id="applyButton" value="Нарисовать">
+            <input type="button"  class="anim-related-inverse" id="applyButton" value="Нарисовать">
             <input type="button" id="clearButton" value="Отчистить">
         </p>
         <p>
             Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"> 
-            <select id ="animTypeSelect">
+            <select class="anim-related"  id ="animTypeSelect">
                 <option value="0">linear</option>
                 <option value="1">elastic</option>
                 <option value="2">bounce</option>
             </select>
             <br>
-            <input type="button" id="startAnimButton" value="Анимировать">
+            <input class="anim-related" type="button" id="startAnimButton" value="Анимировать">
         </p>
 
     </form>