анимация растущей линии на Canvas
Подскажите, как реализовать эффект постепенно растущей линии на canvas. Вот простой пример на canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cnvs {
border: 1px solid #f00;
}
</style>
</head>
<body>
<canvas id="cnvs" width="300" height="210">
<script>
var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.moveTo(50, 50);
ctx.lineTo(70, 80);
ctx.lineTo(150, 10);
ctx.lineTo(200, 100);
ctx.lineTo(10, 150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
Как сделать, что б в процессе анимации от точки к точке прорисовывался бы путь ? |
|
рони,
спасибо. А можно, что-то попроще и что б можно было увидеть результат ? |
canvas анимация по массиву
Black_Star,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cnvs {
border: 1px solid #f00;
}
</style>
</head>
<body>
<canvas id="cnvs" width="300" height="210"></canvas>
<script>
let canvas = document.getElementById('cnvs');
let ctx = canvas.getContext('2d');
let lastTime = performance.now();
let arr =[[70, 80],[150, 10],[200, 100],[10, 150],[50, 50]];
let from =[50, 50];
const animate = (pos) => new Promise(resolve => requestAnimationFrame
(
function loop() {
let[x, y] = pos,[xt, yt] = from;
let dt = -lastTime + (lastTime = performance.now());
let a = 1 - Math.exp(-0.001 * 3 * dt);
xt = (1 - a) * xt + a * x;
yt = (1 - a) * yt + a * y;
if (Math.abs(xt - x) > 0.01) {
ctx.beginPath();
ctx.moveTo(...from);
from =[xt, yt];
ctx.lineTo(...from);
ctx.stroke();
requestAnimationFrame(loop);
}
else resolve(pos)
}
)
);
ctx.lineWidth = 4;
async function anim(arr) {
for (let pos of arr) {
from = await animate(pos);
};
}
anim(arr);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:34. |