Я в теории могу это сделать стандартными средствами, но будет как-то странно иметь в HTML-документе целую кучу пустых элементов. С помощью чего это делается? Canvas? Может кто-нибудь показать как?
1 ответ
const context = canvas.getContext('2d')
const w = canvas.width
const h = canvas.height
const start_time = now()
const duration = 1.4
update()
function now() {
return Date.now() / 1000
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
}
function clear() {
context.clearRect(0, 0, w, h)
}
function drawPoint(x, y, r) {
context.beginPath()
context.fillStyle = 'indigo'
context.arc(x, y, r, 0, Math.PI * 2)
context.fill()
}
function drawPoints(n, m, t) {
const x_step = w / (m * t)
const y_step = h / n
for (let i = 1; i < n * t; i++) {
for (let j = 1; j < m; j++) {
const x = x_step * j
const y = y_step * i
drawPoint(x, y, 2)
}
}
}
function update() {
clear()
const t = (now() - start_time) / duration
const te = easeInOutQuad(t)
drawPoints(10, 20, te)
if (t < 1) requestAnimationFrame(update)
}
body {
margin: 0;
}
canvas {
display: block;
position: absolute;
top: calc(50% - 70px);
right: 0;
}
<canvas id=canvas width=240 height=140></canvas>
width
у паттерна можно как-нибудь анимировать ? jsfiddle.net/y7posbr5 – user355286 17 янв '20 в 6:38