Не гладкая анимация Javascript?

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if (positioner < 1536){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width = "256px" height = "256px" onmouseover = ""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

Это мой код, и я хочу спросить:

почему изображение не гладкое ?? Я говорю, что анимация обновляется каждые несколько секунд
как заставить изображение двигаться при MouseOver (onMouseOver)?

#NoRepro Эээ ... Мне кажется, все в порядке. Здесь используется довольно тупая машина ... Моя машина чертовски медленная. И это нормально. :)

— 16.10.2018 17:42

@PraveenKumarPurushothaman Мне кажется, что изображение становится полностью белым после окончания каждого цикла, а затем снова появляется заметное количество времени спустя

— 16.10.2018 17:45

Что значит «не гладкий»? Пожалуйста, не задавайте несколько вопросов.

— 16.10.2018 17:48

javascript html animation events sprite-sheet

16.10.2018 17:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вам просто нужно изменить условие, потому что позиционер находился в пустой части изображения. Теперь позиционер становится равным 0 до того, как будет показана пустая деталь. Вам нужно установить positioner <= length of image, если вы не хотите, чтобы гифка мигала.

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if (positioner <= 1000){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width = "256px" height = "256px" onmouseover = ""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

Вопрос был в том, «почему это не гладко». Вы исправили это (предположительно), теперь объясните, почему / как

— 16.10.2018 17:51

@ Лиам Я объяснил.

— 16.10.2018 17:55

16.10.2018 17:49

Примечание: Ответ на ваши первые вопросы - ваша анимация установлена на 100, но ваша позиция, когда анимация заканчивается / начинается, - 1536, измените ее на 1000.

Второй вопрос - попробуйте следующее:

<img onmouseout = "animate(this)" onmouseout = "dontAnimate(this)" src = "smiley.gif" alt = "Smiley">

function dontAnimate() {
 // Do your thingy!
 // Stop the animation
};

16.10.2018 18:00

Ответ принят как подходящий

При замедлении стало очевидно, что в конце вы показываете пустой кадр. Если вы измените свой код, чтобы оценить, превышает ли positioner максимум после рендеринга каждого цикла, это исправит это за вас.

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
  document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
  positioner += 256;
  if (positioner >= 1536) positioner = 0
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<img width = "256px" height = "256px" onmouseover = ""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>

16.10.2018 18:02

Другие вопросы по теме

Как увеличить текст в игре на javascript html?

Почему мой javascript не работает с сервера

Почему я не могу проверить свой код и почему я получаю сообщение об ошибке

Почему мой элемент предварительного просмотра печати не скрывается, когда предварительный просмотр закрыт?

Обновить страницу, если выполняется скрипт certein php

Отображение элемента таблицы HTML вне таблицы

ASP Отключить автозаполнение пароля в Chrome

Вычислить сумму двух разных HTML-элементов и отобразить в третьем div с помощью JQuery / JavaScript

Событие onbeforeunload не возникает, когда вкладка браузера веб-приложения appmaker закрывается

Применить режим наложения только к падающей тени

Не гладкая анимация Javascript?

Ответы 3

Другие вопросы по теме

Похожие вопросы