利用es6實現互動的水波特效

曹達巨集發表於2018-12-08
特效

先給你們看個效果圖（截圖自pohutech.com,這是我寫的第一個網站）

利用es6實現互動的水波特效

其實原理很簡單，就是將波函式樣式表現出來，我先簡單說下波函式

利用es6實現互動的水波特效

我這裡採取的實現方式是通過css屬性background-image實現的。

波函式類

class Wave {
    constructor(position, startTime, duration = 5000, angular_speed = 20) {
        this.position = position;
        this.startTime = startTime;
        this.stopId = 0;
        //水波持續時間 預設5000ms
        this.duration = duration;
        this.angular_speed = angular_speed;
    }
}
複製程式碼

類Wave中最重要的方法

shuffle (element){
        let data = [];
        //設定滿屏的週期數，即水波的密集程度，我這設定為10
        for (let i = 0; i < 100; i++) {
            data.push(Math.PI / 5 * (i + 1));
        }
        //記錄水波的作用時間
        let dt = new Date() - this.startTime;
        if (dt > this.duration){
            this.stopMove();
            return;
        }
        
        let height = data.map(
            (value) => {
                let x = value - this.angular_speed * dt / 1000;
                //x<0時，波還沒有傳播到那裡，h=0
                //sinx的取值範圍為[-1,1],將其轉化為[0,0.5]
                let h = x < 0 ? (Math.sin(x)+1)/4 : 0.25;
                return h;
            }
        )

        let bg = "radial-gradient(circle at ";
        bg += `${this.position.px}px ${this.position.py}px`;
        height.forEach(function (value,index) {
            //顏色可以自取，我這裡取了rgb(192,85,181),然後通過透明度表現出波函式
            //你可以嘗試在顏色重加入時間變化
            //(100-index)/100表示隨距離係數
            //(this.duration-dt)/this.duration表示時間衰減係數
            bg += `,rgba(192,85,181,${value*(100 - index) / 100 * (this.duration - dt) / this.duration}) ${index + 1}%`;
        }.bind(this));
        bg += ")";
        //注意element.style.backgroundImage = 'radial-gradient……'沒有效果！這應該是原生dom一個bug.
        element.setAttribute("style", `width:100vw;height:100vh;position:fixed;z-index:100;top:0px;left:0px;background-image: ${bg};`);
        console.info(element);
        //因為requestAnimationFrame(function)預設傳參time,沒辦法實現我們要的傳遞element,所以封裝了一下
        //記得要繫結this,不然第二次執行shuffle就彙報this is not define!
        this.stopId = requestAnimationFrame(function (){this.shuffle(element)}.bind(this));
    }
複製程式碼

還有一個方法是取消動畫：

    stopMove() {
        cancelAnimationFrame(this.stopId);
        this.stopId = 0;
    }
複製程式碼

將波函式加到DOM中

onload = () => {
    document.querySelector("body").onclick = (event) => {
        let covering = document.createElement("div");
        const position = {};
        //解構賦值
        [position.px, position.py] = [event.clientX, event.clientY]
        let wave = new Wave(position, new Date())
        document.querySelector("body").appendChild(covering);
        wave.shuffle(covering);
        //5秒後，將這個蒙皮移出dom
        setTimeout(()=>document.querySelector("body").removeChild(covering),5000);
    }
}
複製程式碼

現在我們已經寫完了這個js波函式外掛,讓我們看下效果

利用es6實現互動的水波特效
全部原始碼可以看我的GitHub github.com/jack-shangh… 如果你覺得你個效果不錯，麻煩幫忙點個贊，幫幫我這天涯淪落人。

你們只需要看js程式碼就夠了。

相關文章