利用es6实现互动的水波特效

2018-12-08  本文已影响0人  java_script

先给你们看个效果图(截图自徐州鄱湖环保科技发展有限公司,这是我写的第一个网站,所有的东西都是我做的,服务器,甚至是logo设计)

轮播图的互动特效

其实原理很简单,就是将波函数样式表现出来,我先简单说下波函数

f(t) = \sin t  正弦波

f(t) = sin(x-\omega t)

        沿x轴正方向传播的正弦波,\omega 为角速度

我这里采取的实现方式是通过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波函数插件,让我们看下效果

全部源码可以看我的GitHub仓库地址,如果你们觉得好,帮忙点个赞!

你们可以只看js代码,wave1是展示波函数用的。

上一篇下一篇

猜你喜欢

热点阅读