hw 2 done

current_site/src/pages/svg_playground.pug

@@ -34,7 +34,7 @@ html(lang="ru")
                     option(value="1") По кругу
                     option(value="2") Спиралью
 
-            p.path-anim-related-inverse
+            p
                 | Масштаб
                 br
                 label(for="sx") по x:
@@ -47,7 +47,7 @@ html(lang="ru")
                 label.anim-related(for="sy_finish") до:
                 input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
 
-            p.path-anim-related-inverse
+            p
                 | Поворот
                 br
                 label(for="r") x:
@@ -55,10 +55,16 @@ html(lang="ru")
                 label.anim-related(for="r_finish") до:
                 input#r_finish.anim-related(type="number", value="360", max="360", min="-360")
 
+            p.anim-related
+                | Время анамации (мс)
+                br
+                label(for="duration") x:
+                input#duration(type="number", value="2000", max="10000", min="1")
+                
             p
                 input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
                 input#clearButton(type="button", value="Отчистить")
-
+            
             p
                 | Включить Анимацию?
                 input#enableAnimCheckbox(type="checkbox")

current_site/src/pages/svg_playground/image.js

@@ -3,31 +3,31 @@
 function drawSmile(svg) {
     let smile = svg.append("g")
         .style("stroke", "brown")
-        .style("stroke-width", 2)
+        .style("stroke-width", 0)
         .style("fill", "brown");
-    //лицо
-    smile.append("circle") 
-        .attr("cx", 0)
-        .attr("cy", 0)
-        .attr("r", 50)
-        .style("fill", "yellow");
-    //левый глаз   
-    smile.append("circle") 
-        .attr("cx", -20)
-        .attr("cy", -10)
-        .attr("r", 5);
-    //правый глаз
-    smile.append("circle") 
-        .attr("cx", 20)
-        .attr("cy", -10)
-        .attr("r", 5);
-    // улыбка
-    let arc = d3.arc()
-       .innerRadius(35)
-       .outerRadius(35);    
-    smile.append("path")
-       .attr("d", arc({startAngle: Math.PI /3 * 2, endAngle: Math.PI/3 * 4}))
-       .style("stroke", "brown")
 
-     return smile  
+    for (let t = 0; t <= Math.PI * 6; t += .8) {
+        let cords = {
+            x:  50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
+            y: 50 / 3 * (1 - (t / (Math.PI * 6))) * Math.cos(t)
+        }
+        smile.append("circle")
+            .attr("cx", cords["x"])
+            .attr("cy", cords["y"])
+            .attr("r", (1 - (t / (Math.PI * 6))))
+            .style("fill", "red");
+    }
+
+    for (let t = .4; t <= Math.PI * 6; t += .8) {
+        let cords = {
+            x:  50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
+            y:  50 / 3 * (1 - (t / (Math.PI * 6))) *Math.cos(t)
+        }
+        smile.append("circle")
+            .attr("cx", cords["x"])
+            .attr("cy", cords["y"])
+            .attr("r", (1 - (t / (Math.PI * 6))))
+            .style("fill", "green");
+    }
+    return smile
 }   

current_site/src/pages/svg_playground/main.js

@@ -57,10 +57,15 @@ const animRouter = (dataForm) => {
         let path = drawPath(Number(dataForm.pathSelect.value));
         const svg = d3.select("svg")
         let pict = drawSmile(svg);
+        const parameters = {
+            sx:[Number(dataForm.sx.value),Number(dataForm.sx_finish.value)],
+            sy:[Number(dataForm.sy.value),Number(dataForm.sy_finish.value)],
+            r:[Number(dataForm.r.value),Number(dataForm.r_finish.value)],
+        };
         pict.transition()
             .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
-            .duration(6000)
-            .attrTween('transform', translateAlong(path.node()));
+            .duration(Number(duration.value))
+            .attrTween('transform', translateAlong(path.node(),parameters));
     }
     else {
         runAnimation(dataForm)
@@ -77,7 +82,7 @@ const runAnimation = (dataForm) => {
         ${dataForm.sy.value})
         rotate(${dataForm.r.value})`)
         .transition()
-        .duration(6000)
+        .duration(Number(duration.value))
         .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
         .attr("transform", `
         translate(${dataForm.cx_finish.value},

current_site/src/pages/svg_playground/path.js

@@ -82,12 +82,18 @@ const drawPath = (typePath) => {
     return path;
 }
 
-function translateAlong(path) {
+function translateAlong(path, params) {
     const length = path.getTotalLength();
+
     return function () {
         return function (t) {
             const { x, y } = path.getPointAtLength(t * length);
-            return `translate(${x},${y})`;
+            return `
+            translate(${x},${y})
+            scale(${params.sx[0] +(params.sx[1] - params.sx[0])*t},
+            ${params.sy[0] +(params.sy[1] - params.sy[0])*t})
+            rotate(${params.r[0] +(params.r[1] - params.r[0])*t})
+            `;
         }
     }
 }