Показать сообщение отдельно
  #3 (permalink)  
Старый 17.12.2017, 18:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Hidrigar,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>


</head>

<body>
<img src="https://otvet.imgsmail.ru/download/3899404403ddff2f2cdd94afd65d356e_i-208.jpg" alt="" id="train">
  <script>
  "use strict"
function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    let progress = timing(timeFraction);

    draw(progress);

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

    train.onclick = function() {
      var width =  train.offsetWidth, height = train.offsetHeight;
      animate({
        duration: 1000,
        timing: function(timeFraction) {
          return Math.pow(timeFraction, 2);
        },
        draw: function(progress) {
          train.style.width = width + progress * (500 - width) + 'px';
          train.style.height = height + progress * (500 - height) + 'px';
        }
      });
    };

  </script>
</body>
</html>
Ответить с цитированием