Анимация без использования JQuery

#javascript #анимация

Как сделать функцию JQuery animate без JQuery? С CSS свойствами всё понятно: их можно
через transition и animation нарисовать, но как мне плавно изменить HTML?

Как мне плавно в течении 3-ёх секунд изменить значение прогресс бара и цифру возле
него? Т.е. как плавно изменить ширину и значение возле бара с 10% до 80% за 3 секунды?



.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}
.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}

  


10%



    

Ответы

Ответ 1

В JS есть специальная функция requestAnimFrame, которая позволяет создать анимационные
эффекты.



// Указываем начальное время анимации
var start = performance.now();

requestAnimationFrame(function animate(time) {
  // Высчитываем процент завершённости: высчитываем сколько прошло времени и делим
на нужную продолжительность
  var timeFraction = (time - start) / 3000;
  if (timeFraction > 1) timeFraction = 1;

  // Получаем элементы
  var Bar = document.querySelector('.progress_bar'),
      Val = document.querySelector('.progress_val');
    
  // Указываем начальное значение
  var oldVal = 10,
  // Указываем новое значение
      newVal = 80;
        
  // Применяем
  Bar.style.width = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';
  Val.innerHTML = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';

  // Если анимация незаконченна, запускаем новый шаг
  if (timeFraction < 1) {
    requestAnimationFrame(animate);
  };
});
.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}

.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}

  


10%




Подробнее про создание анимаций с помощью этой функции: https://learn.javascript.ru/js-animation.

Так же следует использовать полифиллы, т.к. эта функция начинает работать только
в IE10. Полифилл:

window.requestAnimFrame = (function(){
   return  window.requestAnimationFrame       ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame    ||
           function( callback ){
              window.setTimeout(callback, 1000 / 60);
           };
})();


Или же можно воспользоваться готовым плагином. К вашему вопросу подойдёт и самый
простой плагин. К примеру, можно использовать мой: https://github.com/yuri-spivak/animations-in-javascript



new Animate({
  duration: 3000,
  step: function (p) {
    // Получаем элементы
    var Bar = document.querySelector('.progress_bar'),
        Val = document.querySelector('.progress_val');
    
    // Указываем начальное значение
    var oldVal = 10,
    // Указываем новое значение
        newVal = 80;
        
    // Применяем
    Bar.style.width = (oldVal + ((newVal - oldVal) * p)) + '%';
    Val.innerHTML = Math.round(oldVal + ((newVal - oldVal) * p)) + '%';
  }
});
.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}
.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}



  


10%




step – вызывается при каждом шаге анимации и возвращает процент завершённости анимации


Ответ 2

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



.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}

.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
  animation-fill-mode: forwards;
  animation-name: newwidth;
  animation-duration: 3s;
}

@keyframes newwidth {
    from {width: 10%;}
    to {width: 80%;}
}

.progress_val {
  display: inline-block;
}
.progress_val:before {
  content: '10%';
  animation-fill-mode: forwards;
  animation-name: newbefore;
  animation-duration: 3s;
}

@keyframes newbefore {
    from {content: '10%';}
    1.4% {content: "11%";}
    2.8% {content: "12%";}
    4.2% {content: "13%";}
    5.6% {content: "14%";}
    7% {content: "15%";}
    8.4% {content: "16%";}
    9.8% {content: "17%";}
    11.2% {content: "18%";}
    12.6% {content: "19%";}
    14% {content: "20%";}
    15.4% {content: "21%";}
    16.8% {content: "22%";}
    18.2% {content: "23%";}
    19.6% {content: "24%";}
    21% {content: "25%";}
    22.4% {content: "26%";}
    23.8% {content: "27%";}
    25.2% {content: "28%";}
    26.6% {content: "29%";}
    28% {content: "30%";}
    29.4% {content: "31%";}
    30.8% {content: "32%";}
    32.2% {content: "33%";}
    33.6% {content: "34%";}
    35% {content: "35%";}
    36.4% {content: "36%";}
    37.8% {content: "37%";}
    39.2% {content: "38%";}
    40.6% {content: "39%";}
    42% {content: "40%";}
    43.4% {content: "41%";}
    44.8% {content: "42%";}
    46.2% {content: "43%";}
    47.6% {content: "44%";}
    49% {content: "45%";}
    50.4% {content: "46%";}
    51.8% {content: "47%";}
    53.2% {content: "48%";}
    54.6% {content: "49%";}
    56% {content: "50%";}
    57.4% {content: "51%";}
    58.8% {content: "52%";}
    60.2% {content: "53%";}
    61.6% {content: "54%";}
    63% {content: "55%";}
    64.4% {content: "56%";}
    65.8% {content: "57%";}
    67.2% {content: "58%";}
    68.6% {content: "59%";}
    70% {content: "60%";}
    71.4% {content: "61%";}
    72.8% {content: "62%";}
    74.2% {content: "63%";}
    75.6% {content: "64%";}
    77% {content: "65%";}
    78.4% {content: "66%";}
    79.8% {content: "67%";}
    81.2% {content: "68%";}
    82.6% {content: "69%";}
    84% {content: "70%";}
    85.4% {content: "71%";}
    86.8% {content: "72%";}
    88.2% {content: "73%";}
    89.6% {content: "74%";}
    91% {content: "75%";}
    92.4% {content: "76%";}
    93.8% {content: "77%";}
    95.2% {content: "78%";}
    96.6% {content: "79%";}
    to {content: '80%';}
}