lab done

labs/lab2/JavaScript/main.js

@@ -20,18 +20,23 @@ document.addEventListener("DOMContentLoaded", function () {
 
     updateAnimationControllsDisplay();
     enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+    animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
 
 
     startAnimButton.addEventListener("click", () => {
-        runAnimation(setting)
+        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) });
 }
 
 
@@ -47,8 +52,23 @@ const draw = (dataForm) => {
 
 }
 
+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")
+    const svg = d3.select("svg")
     let pict = drawSmile(svg);
     pict.attr("transform", `
         translate(${dataForm.cx.value},
@@ -56,10 +76,10 @@ const runAnimation = (dataForm) => {
         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", `
+        .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},