blog/

Анимация для IG с помощью JavaScript и AfterEffects

Ivan @ 02 / 01 / 2022 @ Blog / Дизайн / Медиа / Programming / Скрипты / Уроки
( / / )

Время чтения: ~ 5 мин.

Sorry, this entry is not available in English.

Рассказываю про то, как делал анимированный постер для бесплатных курсов по AutoCAD и Archicad (https://dmtrvk.ru/study/project/). Код — ниже. А вот тут вы можете посмотреть, как он работает.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
    function drawLine(ctx, begin, end, stroke = 'black', width = 1, dashed = []) {
        if (stroke) {
            ctx.strokeStyle = stroke;
        }
        if (dashed) {
            ctx.setLineDash(dashed);
        }
        if (width) {
            ctx.lineWidth = width;
        }
        ctx.beginPath();
        ctx.moveTo(...begin);
        ctx.lineTo(...end);
        ctx.stroke();
    }

    $(function() {
        let times = 1;

        // console.log(x1, ", ", y1, ", ", x2, ". ", x2, ", ", y2, ".");
        function ass() {

            const canvas = document.querySelector('#canvas');
            for (i = 0; i <= 10 * (times / 100); i++) {
                x1 = Math.floor(Math.random() * canvas.width);
                y1 = Math.floor(Math.random() * canvas.height);
                x2 = Math.floor(Math.random() * canvas.width);
                y2 = Math.floor(Math.random() * canvas.height);

                if (canvas.getContext) {
                    const ctx = canvas.getContext('2d');
                    if (Math.random() * 100 > 50) {
                        drawLine(ctx, [x1, y1], [x2, y2], 'black', 2 * times / 100, [20, 7]);
                    } else {
                        color2 = 'white';
                        if (times > 200) { color2 = 'black'; }
                        drawLine(ctx, [x1, y1], [x2, y2], color2, 2 * times / 100);
                    }
                }
            }
            times++;
            console.log(times);
            if (times > 1500) {
                clearInterval(intervalID);
            }
        }
        let intervalID = setInterval(ass, 50);
    });
    </script>
</head>

<body>
    <canvas id="canvas" height="1080" width="1080">
    </canvas>
</body>

</html>

Similar Posts:

▥

Subscribe!

◩ Instagram
▦ VK
▧ Facebook
▩ YouTube!
▨ Telegram!

Subscribe to mail list



* clicking the ‘Subscribe’ button you agree that your personal data will be processed