Форум

Hidrigar · #1 (**permalink**) 17.12.2017, 16:37

Ребят, подскажите как взять текущий размер картинки и уже от него анимировать. Есть такой скриптик

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() {
      animate({
        duration: 1000,
        timing: function(timeFraction) {
          return Math.pow(timeFraction, 2);
        },
        draw: function(progress) {       	
          train.style.width = progress * 500 + 'px';
          train.style.height = progress * 500 + 'px';
        }
      });
    };

рони · #2 (**permalink**) 17.12.2017, 17:52

Hidrigar,
https://learn.javascript.ru/metrics

рони · #3 (**permalink**) 17.12.2017, 18:16

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>

Hidrigar · #4 (**permalink**) 17.12.2017, 18:26

Спасибо большое, все работает

Форум

Справочник

Discord чат

Курсы javascript