Холст Анимация

Question

Я делаю графический скрипт с использованием canvas, я добавляю анимацию на диаграмму, но мне не нравится, как она выглядит, я использую функцию setInterval для X, добавляя высоту к прямоугольнику, чтобы создать гистограмму для Например, но я хочу анимацию более плавной, есть еще один способ сделать анимацию?

Answer 1

нет нет нет. Существует три способа создания анимации с помощью JS:

1. setTimeout ()
2. setInterval ()
3. requestAnimationFrame

параметры # 1 и # 2 - это старые способы создания анимации. Опция № 3 является более новой спецификацией и дает самые плавные анимации, потому что сам браузер динамически контролирует FPS. Вот замечательный шим, созданный Полом Айришем, который создает оболочку requestAnimFrame для обработки всех реализаций браузера:

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage: 
// instead of setInterval(render, 16) ....

(function animloop(){
  render();
  requestAnimFrame(animloop, element);
})();

Answer 2

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

Чтобы сделать его более плавным, вы просто понижаете 2-й параметр setInterval [delay], чтобы первый параметр [вызываемая функция] назывался more ...

Кроме того, вы можете добавить анимацию замедления в конце, используя формулу
rect.h = (rect.h*N+targetHeight)/(N+1) ... где N> 1 ...
Так что вначале планка сильно растет, а затем в конечном итоге замедляет рост до целевой высоты.