Анимация кадров за какое время?

-3

Я пытаюсь оживить изображение. Это простая анимация, движущаяся слева направо. В конечном итоге это будет gif, загружаемый пользователем.Анимация кадров за какое время?

В настоящее время у меня есть эта анимация как 5 кадров по 100 мс каждый, но анимация выглядит немного нервной. Затем я увеличил до 20 кадров по 50 мс каждый, но все еще выглядит нервным. Интересно, был ли какой-либо вход для облегчения анимации easein/slidein. Должен ли я увеличить рамки еще больше?

Мой текущий Анимация (каждый кадр в 100мс) слева: [х, х, х, х, х]

Заранее спасибо!

источник

2016-09-25 Michael

Анимация только гладко для человеческого глаза со скоростью 60 кадров в секунду, что составляет около 16 миллисекунд за кадр. Это стандартный стандарт анимации для большинства вещей на экранах компьютеров. Это также то, что window.requestAnimationFrame по умолчанию для кадров в секунду, и вы должны использовать requestAnimationFrame для большинства сеансов анимации на основе браузера. –

@ AndyRay. 30 кадров в секунду делает честную работу, обманывая глаз. – markE

Двигайте меньшие приращения с каждым фреймом. – markE

Для этого лучше использовать анимацию CSS. Он работает более плавно, и код может быть проще. Вот пример:

<style> 
    #movie { 
    transition-property: left; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    width:100px; 
    height:100px; 
    background-color:red; 
    position:absolute; 
    left:100px; 
    top:100px; 
    } 
</style> 

<script> 
    function move(d) { 
    d.style.left = '500px'; 
    } 
</script> 

<div id="movie" onclick="move(this)"></div>

Нажмите на красный прямоугольник, плавно переместите его вправо.

источник

2016-09-25 22:50:06 KostaShah

Анимация кадров за какое время?

ответ

Смежные вопросы