Анимация изменения размера картинки от текущего размера
Ребят, подскажите как взять текущий размер картинки и уже от него анимировать. Есть такой скриптик
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';
}
});
};
|
Hidrigar,
https://learn.javascript.ru/metrics |
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>
|
Спасибо большое, все работает :)
|
| Часовой пояс GMT +3, время: 00:13. |