Как я могу изменить скорость (продолжительность) события anime.js с помощью ползунка?

Question

Я использую anime.js для анимации элемента, который отскакивает от края контейнера. Я хочу иметь возможность регулировать скорость этой анимации с помощью ползунка диапазона, который есть в другом месте на странице.

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

Это были мои попытки при вызове метода onchange моего слайдера.

    function adjustSpeed() {
    alternate.duration = 300;  
    } 

и

function adjustSpeed() {
var alternate = anime({
    targets: '#alternate .el',
    translateX: width,
    direction: 'alternate',
    loop: true,
    duration: 300,
    easing: 'linear',
});

}

Любая помощь будет принята с благодарностью.

Answer 1

Я только что столкнулся с этой проблемой, и нашел лучше , но не идеальное решение. AnimeJS имеет другое статическое свойство speed, которое по умолчанию установлено на 1. Если вы измените эту скорость, скорость анимации изменится, хотя анимация «прыгает» и выглядит не очень гладко.

Например, если вы хотите, чтобы скорость была в 0,5 раза больше исходной скорости, установите anime.speed = 0.5.

Я обновлю этот ответ, если найду лучшее решение.