@DesignerDDD

JavaScript, уменьшение числа до 0 за промежуток времени?

Добрый день, я пишу простенький слайдер с использованием Hammer.js (тач слайдер).
Возник вопрос, когда пользователь перетащит слайд до середины (ширина блока/2) нужно что бы плавно изменялся процент с середины (50%) до 0
(transform(translate(xx%, 0)))

Вариант с указанием 0% последующим использованием transition() не подходит.
Как в javascript уменьшить число в определенный промежуток (800 ms длительность анимации) уменьшить значение с 50% до 0 (именно по типу floor, для более плавной анимации), кроме конечно:
setTimeout()
есть ли вариант?
  • Вопрос задан
  • 935 просмотров
Пригласить эксперта
Ответы на вопрос 2
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
почему бы не использовать css transition?

в целом же setTimeout и функция для расчета от времени координаты или смещения
Ответ написан
DIITHiTech
@DIITHiTech
Fullstack javascript developer
Можно так:
/**
        *
        * @param duration - продолжительность работы таймера
        * @param interval - время тика таймера
        * @param from     - начальное значение
        * @param to       - конечное значение
        * @param minStep  - минимальный шаг вызова callback
        * @param callback - обработчик
        */

       function timer(duration,interval,from,to,minStep,callback){
           var value=from,
               forward=(from<to),
               range=Math.abs(to-from),
               steps=duration/interval,
               step=range/steps,
               last=from,

               handle=setInterval(function(){
                   value+=step*(forward?1:-1);

                   if(forward?value>to:value<to){
                       value=to;
                       clearInterval(handle);
                       handle=null;
                   }

                   if(!minStep||!handle||Math.abs(last-value)>=minStep){
                       last=value;
                       callback(value,from,to);
                   }
               }
           ,interval);
           
           return handle;
       }


       timer(800,20,50,0,1,function(value){
           console.warn(Math.floor(value));
       })
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы