Лучшая практика - Javascript Анимация с использованием синхронизированных изменений фонового изображения - PullRequest
Новая
       61

Лучшая практика - Javascript Анимация с использованием синхронизированных изменений фонового изображения

0 голосов
/ 02 августа 2020

Я новичок в кодировании / javascript и хотел получить отзыв о методе, который я использую. Я разочаровался, пытаясь импортировать несколько файлов Adobe Animate html5 / javascript, поэтому я вернулся к:

  • покадровому экспорту анимации (.png)
  • с использованием javascript в вызовите локальный файл и измените 'sr c' div с заданным c интервалом

filename1 - это имя файла папки - это имя файла .png

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

function playTargetAnimation (filename1,filename) {
      let i = 1;
      $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + '0001' + ".png");
      $('#'+filename1).show();
      let runAnim = setInterval(function(){
      let imgCnt = "00" + ("0" + i).slice(-2);
       $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + imgCnt + ".png");
       console.log('src', "images/" + filename +"/" + filename + imgCnt + ".png");
       i++;
       if(i === 41) {
         clearInterval(runAnim);
       };
     }, 25);
  }

1 Ответ

0 голосов
/ 02 августа 2020 

@import "compass/css3";

.hi {
  margin: 20px;
  width: 50px;
  height: 72px;
  background-image: url("https://s.cdpn.io/79/sprite-steps.png");
  
}
.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}
<div class="hi"></div>
<p>↑ mouse over to view animation</p>
<div><img src="https://s.cdpn.io/79/sprite-steps.png" /></div>

Если вы предпочитаете javascript, requestAnimationFrame намного лучше, чем setInterval.

В то время как я предлагаю css3 animation do c in mdn :

Сначала регулярно объединяйте все эти кадры в один файл изображения.

Затем напишите css с функцией «анимация» и «шаги» ". 

.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}

...