使用canvas實現(xiàn)鯉魚躍龍門的動畫效果

更新時間：2024年02月05日 08:46:09 作者：前端搬磚人

這篇文章主要給大家介紹了使用canvas實現(xiàn)鯉魚躍龍門的動畫效果,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下

實現(xiàn)代碼與思路如下：

第一步添加canvas畫布

<body style="background-color: rgb(216, 249, 250);margin: 0px;">
    <canvas id="tutorial" width="1520" height="699"></canvas>
    <div class="text">
        <p>鯉魚躍龍門</p>
        <p>沖呀!</p>
    </div>
</body>

第二步獲取canvas元素

let canvas = document.getElementById("tutorial");
    //檢查支持性
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d"); // 獲取渲染上下文
        // ToDo ...
    }

第三步關于白云部分的繪制和動畫

白云的繪制
用position數(shù)組統(tǒng)一設置白云的位置

    var img = new Image();
    img.src = "./public/cloud.svg";
    var position = [{ x: 20, y: 520 }, { x: 350, y: 560 }, { x: 650, y: 490 }, { x: 930, y: 550 }, { x: 1230, y: 570 }]; //設置白云的位置
    
    img.onload = function () {
            // 開始動畫    
        for (let i = 0; i < position.length; i++) {
            ctx.drawImage(img, position[i].x, position[i].y); // 每個圖片間隔300像素
       }
    };

白云的動畫
整體的思路就是，結(jié)合周期定時器動態(tài)設置globalAlpha屬性去控制元素的顯示與隱藏。

        // 淡入淡出動畫
        function fadeInOut(index) {
            var opacity = 1; // 初始透明度為1
            var increasing = true;
            // 每隔10毫秒執(zhí)行一次淡入淡出效果
            var intervalId = setInterval(function () {
                var randomNum = Math.random();

                if (increasing) {
                    opacity += randomNum * 0.01; // 透明度逐漸增加
                    if (opacity >= 1) {
                        increasing = false; // 達到最大透明度后開始減少
                    }
                } else {
                    opacity -= randomNum * 0.01; // 透明度逐漸減小
                    if (opacity <= 0) {
                        // increasing = true;
                        clearInterval(intervalId); // 透明度減小到0后清除定時器
                        setTimeout(() => fadeInOut(index), 100); // 等待100ms后重新執(zhí)行淡入淡出
                    }
                }
                imageOpacities[index] = opacity; // 更新圖片透明度
                drawImage(); // 重新繪制

            }, 60);
        }

         // 繪制圖片
        function drawImage() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save(); // 保存當前繪制狀態(tài)

            // 繪制之前的內(nèi)容
            ctx.beginPath();
            ctx.moveTo(75, 25);
            //二次貝塞爾曲線
            ctx.quadraticCurveTo(25, 25, 25, 62.5);
            ctx.quadraticCurveTo(25, 100, 50, 100);
            ctx.quadraticCurveTo(50, 120, 30, 125);
            ctx.quadraticCurveTo(60, 120, 65, 100);
            ctx.quadraticCurveTo(125, 100, 125, 62.5);
            ctx.quadraticCurveTo(125, 25, 75, 25);
            ctx.stroke();

            ctx.drawImage(imgDoor, 250, -120);


            // ctx.drawImage(imgFish, 1150, 450, 200, 200);

            for (let i = 0; i < position.length; i++) {
                ctx.globalAlpha = imageOpacities[i];
                ctx.drawImage(img, position[i].x, position[i].y); // 每個圖片間隔300像素
            }

            // 繪制魚
            ctx.globalAlpha = fishOpacity;
            ctx.drawImage(imgFish, fishX, fishY, fishWidth, fishHeight);
            ctx.globalAlpha = 1 - fishOpacity;
            ctx.drawImage(imgDragon, 250, 100, 600, 600);
            ctx.restore(); // 恢復之前保存的繪制狀態(tài)
        }
        
        
        
        //用處
        img.onload = function () {
            // 開始動畫
            position.forEach((item, index) => {
                fadeInOut(index);
            });
        };

第四步關于魚的繪制和動畫

        // Fish 圖片的初始位置和大小
        var fishX = 1150;
        var fishY = 450;
        var fishWidth = 200;
        var fishHeight = 200;
        // 魚的透明度
        var fishOpacity = 1;
        
        // 跳躍動畫
        function jumpAnimation() {
            var startY = fishY;
            var startx = fishX;
            var maxHeight = startY - 150; // 魚的最高跳躍高度
            var speed = 2; // 跳躍速度
            var gravity = 0.1; // 重力加速度
            var isRising = true; // 是否處于上升狀態(tài)

            var jumpInterval = setInterval(function () {
                // 魚上升
                if (isRising) {
                    fishY -= speed;
                    fishX -= speed + 3;
                    if (fishY <= maxHeight) {
                        isRising = false;
                    }
                }
                // 魚下落
                else {
                    fishY += speed;
                    fishX -= speed + 3;
                    if (fishY >= startY) {
                        clearInterval(jumpInterval);
                        // 開始消失效果
                        fadeOut();
                    }
                }

                drawImage(); // 重新繪制魚
            }, 30);
        }

        // 消失效果
        function fadeOut() {
            var opacityDecrement = 0.05; // 透明度減少的步長
            var fadeInterval = setInterval(function () {
                fishOpacity -= opacityDecrement; // 透明度逐漸減小
                if (fishOpacity <= 0) {
                    fishOpacity = 0;
                    clearInterval(fadeInterval);
                }
                drawImage(); // 重新繪制魚
            }, 50);
        }
 

        //用處
        imgFish.onload = function () {
            // 圖片加載完成后開始動畫
            setTimeout(function () {
                jumpAnimation(); // 1秒后開始跳躍動畫
            }, 1000);
        };

第五步關于對文字的樣式

<style>
    .text {
        position: absolute;
        top: 28px;
        left: 25px;
    }

    p {
        text-align: center;
        margin: 10px;
    }
</style>

就這，over over ~

以上就是使用canvas實現(xiàn)鯉魚躍龍門的動畫效果的詳細內(nèi)容，更多關于canvas鯉魚躍龍門的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: