Как динамически изменить переменную, используемую в анимации в Javascript - PullRequest
Новая
       11

Как динамически изменить переменную, используемую в анимации в Javascript

0 голосов
/ 05 июня 2019

Я бы хотел динамически изменить амплитуду анимированной синусоидальной волны с помощью ползунка. У меня есть HTML-страница и CSS-страница с SVG-элементом с Path и элементом слайдера. Однако, как и рабочая анимированная функция sin, когда я пытаюсь изменить переменную для амплитуды с помощью ползунка, она перестает работать.

Я очень новичок в Javascript и не привык к его синхронным способам. Поэтому я заблудился в том, где возникает проблема. 

let xs = []

for(var i = 0; i < 200 * Math.PI; i+= .01){
    xs.push(i);
}



let t = 0;
let A = 0
let f = 3;
let height = 200;

$("#slider").on("change",function(){
    A = $(this).val();
});

function animate(){
    let points = xs.map(x => {
        let y = A * Math.sin((x + t) * f);
        return[x,y + height];
    });

    let path = "M" + points.map(p => {
        return p[0] + "," + p[1];
    }).join('L')

    document.querySelector("path").setAttribute("d", path);

    t += 1;
    requestAnimationFrame(animate);

};
animate();

\\the slider code looks like this in the html page: 
input type = "range" min="0" max="1000" value="0" step="1" id="slider"/>
the svg code looks like this in the css:
svg {
  width: 600px;
  height: 400px;
}

path {
  stroke: #2727e6;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}
and like this in the html:
svg>
  path d=""></path>
/svg>
the html brackets are correct in the code, they just mess up this page so i removed them

Без кода ползунка и простого пусть A = 20 появляется синусоида, с ползунком - нет. Я попытался поместить код ползунка после волнового кода, и это не помогает, я также попытался поместить волновой код в функцию ползунка, но это также не дало результата.

Я уверен, что есть какая-то проблема с наличием двух функций, которые работают постоянно и взаимодействуют друг с другом, но я не использовал JS достаточно долго, чтобы знать, что это такое или как это исправить.

...