Анимация последовательности изображений с помощью JavaScript - PullRequest
Новая
       24

Анимация последовательности изображений с помощью JavaScript

0 голосов
/ 12 сентября 2011

У меня есть последовательность с изображениями объекта под разными углами. Я хочу, чтобы объект был искусственно повернут, когда пользователь перетаскивает свою мышь, и это я реализовал.

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

Например, у меня есть 30 JPEG, где 1.jpg - -180 & deg; и 30.jpg - 180 °. Естественно, 15.jpg - это центрированное изображение по умолчанию в 0 & deg;.

Итак, если пользователь поворачивается до (-) 180 & deg; он вернется к 0 & deg; после скажем 3 секунды. Но я хочу, чтобы анимация была максимально плавной. Как я собираюсь сделать это?

1 Ответ

2 голосов
/ 12 сентября 2011

Чтобы анимация была максимально плавной, вы должны использовать CSS-спрайт, изображение, содержащее все остальные ваши изображения, чтобы все кадры были загружены при запуске анимации.

Тогда вам нужно тольковызывать функцию за заданный промежуток времени, основываясь на том, насколько плавной должна быть анимация, и изменять свойство фона вашего изображения.Или, если не используется спрайт, назначьте ему другой src.

Я думаю, вам следует выбирать значение частоты кадров не менее 25. Чем выше частота кадров, тем более плавная анимация, но больше используется процессор.

Это базовый подход 

function next_frame() {

  frame += 1;

  // start animation again from the start if last frame reached (optional)
  if ( frame == max_frames ) {
    frame = 0;
  }

  /* change either the class of your image (if you use sprites
     and specified a class for each background position) or the
     background position property directly. If not using sprites,
     assign a different image src based on current frame.
  */

  // call the function again
  setTimeout( next_frame, 1000 / 25 ); // change 25 with your desired FPS value.

}

Если вы хотите, чтобы изображение анимировалось назад, вам просто нужно применить тот же подход, но с номерами кадров, идущими назад.

...