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

Question

[DesignerDDD]

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

Вариант с указанием 0% последующим использованием transition() не подходит.
Как в javascript уменьшить число в определенный промежуток (800 ms длительность анимации) уменьшить значение с 50% до 0 (именно по типу floor, для более плавной анимации), кроме конечно:
setTimeout()
есть ли вариант?

Answer 1

[Сергей Протько]

почему бы не использовать css transition?

в целом же setTimeout и функция для расчета от времени координаты или смещения

Comments

[DesignerDDD]

Потому что Сергей, я хотел бы, когда пользователь отпустил слайд перетащив до середины, слайд переключался на следующий, и если пользователь передумает переходить на следующий мог удержать слайд (когда он например на (80%) и перетащить его обратно на предыдущий. С использованием 0% не представляю как это можно реализовать.

А вызов setTimeout каждую 1ms сильно будет тормозить браузер? мне как бы максимум производительность для лучшей плавности

[Nikolay Talanov]

Если анимация с css transitions не подходит, то надо юзать requestAnimationFrame, а не таймаут, который в 2015 году для анимаций использовать сродни преступлению.

[Сергей Протько]

Nikolay Talanov: да да, конечно же requestAnimationFrame...

[littleguga]

Сергей Протько: сарказм?

[Сергей Протько]

littleguga: нет, на самом деле это да, нужно юзать его, но приравнивать к приступлению... Создается впечатление что люди постоянно в перерывах между 800ms переходят из владки во вкладку.

Answer 2

[Dmitriy Mozgovoy]

Можно так:

/**
        *
        * @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));
       })