中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5怎么實現鼠標追隨動畫背景效果

發布時間:2022-02-23 10:01:33 來源:億速云 閱讀:190 作者:小新 欄目:開發技術

這篇文章給大家分享的是有關html5怎么實現鼠標追隨動畫背景效果的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

 如何制作動畫

常用的繪圖動畫的方式有以下幾種:

  • CSS3

  • SVG

  • Canvas

  • WebGL

讓我們先分析分析這些方法的優劣性

  • CSS3 通過css3的關鍵幀等方式實現動畫效果,看起來好像挺實用,但這樣增加了一個沒有意義的DOM節點,不符合語義化編程規范

  • SVG、Canvas 都可以使用腳本語言來實現動畫

    • SVG 本質上是使用XML描述2D圖形的語言(矢量圖),SVG創建的每一個元素都是一個獨立的DOM元素,既然是獨立的DOM元素,那表示我們可以通過CSS和JS來控制DOM,也可以對每一個DOM元素進行監聽,但由于都是DOM元素,所以如果我們修改了SVG中的DOM元素,瀏覽器就會自動進行DOM重繪

    • Canvas通過Javascript來繪制2D圖形(位圖),而Canvas只是一個HTML元素,其中的圖形不會單獨創建DOM元素,所以我們無法通過Js來操作Canvas內的圖形,也無法監聽具體圖形

  • WebGL 用于3D展示、動畫、游戲,說白了就是基于Canvas的3D框架

 Canvas、SVG適用場景

  • Canvas 適用于位圖,高數據量繪制頻率的場景,小游戲,小特效,繪制圖表、活動頁面、炫酷背景

  • SVG 適用于矢量圖,低數據量繪制頻率的場景,如圖形圖表

直擊重點,制作鼠標跟隨動畫

需求分析:鼠標移動,經過的地方創建一個圓,圓的半徑大小由小變大,達到某個固定大小時該圓消失,圓的顏色隨機變化

創建全屏Canvas元素:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    WIDTH = canvas.width = document.documentElement.clientWidth,
    HEIGHT = canvas.height = document.documentElement.clientHeight,
    para = {
        num: 100,
        color: false,    //  顏色  如果是false 則是隨機漸變顏色
        radius: 0.9,          //   圓每次增加的半徑 
        o: 0.09,         //      判斷圓消失的條件,數值越大,消失的越快
    },
    color,
    circleColor,
    round_arr = [];     // 存放圓的數組

監聽鼠標 onmousemove 事件

需求:在鼠標移動的過程中,不斷在鼠標滑過的位置產生一個逐漸變大的圓

Canvas中創建動畫的方式就是不斷的清除屏幕然后重繪

由于移動的軌跡是由一個個圓構成,那我們就應該使用數組存儲圓的信息(xy坐標,半徑),然后在鼠標移動的時候將鼠標的位置信息存放在數組中

所以監聽onmousemove事件就是為了拿到鼠標的信息:

window.onmousemove = function(event) {
    X = event.clientX  // 當前在屏幕的x位置
    Y = event.clientY  // 當前在屏幕的y位置

    // 將信息存入圓數組
    round_arr.push({
        X:X,
        Y:Y,
        radius:para.radius
        o:1
    })
}

設置 color

在onmousemove中,我們已經將坐標信息和半徑存入round_arr圓數組中,接下來就設置顏色了

在para對象里,默認的color是false,說明圓的顏色是隨機的,如果color不為false,則圓的顏色就為color的顏色:

if(para.color){
    circleColor = para.color
}else{
    color = Math.random() * 360
}

若想要設置顏色漸變
if (!para.color) {
    color += .1;
    circleColor = 'hsl(' + color + ',100%,80%)';
}

如果要讓顏色變化,則需要將顏色變化的代碼放在一個會一直執行的函數

定義 animation() 函數 !important:

function animate() {

    if (!para.color) {         # 設置顏色
        color += .1
        color2 = 'hsl(' + color + ',100%,80%)'
    }

    ctx.clearRect(0, 0, WIDTH, HEIGHT)      # 清除屏幕

    for (var i = 0; i < round_arr.length; i++) {

        ctx.fillStyle = circleColor 
        ctx.beginPath()
        ctx.arc( round_arr[i].X ,round_arr[i].Y,round_arr[i].radius,0, Math.PI * 2)     # 畫圓
        ctx.closePath()
        ctx.fill()
        round_arr[i].radius += para.radius    # 增大半徑
        round_arr[i].o -= para.o    # 消失快慢

        if( round_arr[i].o <= 0){       # 移除圓
            round_arr.splice(i,1)
            i--
        }
    }

    window.requestAnimationFrame(animate)   # 使用一個回調函數作為參數,這個回調函數會在瀏覽器重繪之前調用
}

requestAnimationFrame()會告訴瀏覽器,你需要執行動畫,并請求瀏覽器調用指定的函數在下一次重繪之前更新動畫。requestAnimationFrame()使用一個回調函數作為參數,這個回調函數會在瀏覽器重繪之前調用

完整代碼

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

<head>
    <meta charset="UTF-8">
    <title>鼠標屏幕互動動畫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #canvas {
            background: #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            WIDTH = canvas.width = document.documentElement.clientWidth,
            HEIGHT = canvas.height = document.documentElement.clientHeight,
            para = {
                num: 100,
                color: false, //  顏色  如果是false 則是隨機漸變顏色
                radius: 0.9,
                o: 0.09, //  判斷圓消失的條件,數值越大,消失的越快
            },
            color,
            circleColor,
            round_arr = [];

        window.onmousemove = function(event) {
            X = event.clientX
            Y = event.clientY

            round_arr.push({
                X: X,
                Y: Y,
                radius: para.radius,
                o: 1
            })
        }

        // 判斷參數中是否設置color,設置則使用該color,否則為隨機
        if (para.color) {
            circleColor = para.color
        } else {
            color = Math.random() * 360
        }

        function animate() {
            if (!para.color) {
                color += .1
                circleColor = 'hsl(' + color + ',100%,80%)'
            }

            ctx.clearRect(0, 0, WIDTH, HEIGHT) // 清除屏幕

            for (var i = 0; i < round_arr.length; i++) {
                ctx.fillStyle = circleColor
                ctx.beginPath() // 開始路徑
                ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 2) // 畫圓
                ctx.closePath() // 結束路徑
                ctx.fill()
                round_arr[i].radius += para.radius // 增大圓
                round_arr[i].o -= para.o //  消失時間變快

                if (round_arr[i].o <= 0) {
                    round_arr.splice(i, 1);
                    i--;
                }
            }

            window.requestAnimationFrame(animate)
        }

        animate()
    </script>
</body>

</html>

感謝各位的閱讀!關于“html5怎么實現鼠標追隨動畫背景效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

普兰县| 双江| 禄丰县| 沧州市| 闵行区| 乐业县| 宜都市| 武清区| 遂宁市| 牙克石市| 泰兴市| 高阳县| 宁南县| 海伦市| 从江县| 昆山市| 湘阴县| 策勒县| 桦甸市| 新密市| 兴安县| 边坝县| 星座| 呼图壁县| 定襄县| 肃南| 新密市| 永康市| 响水县| 阳高县| 冀州市| 吉木萨尔县| 平顶山市| 乐安县| 昌平区| 宜州市| 洮南市| 交口县| 喜德县| 抚顺县| 德庆县|