实现一个好康的水波纹 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第16天、

昨天在掘金看到一个不错的动效，水波纹的样子，只通过css动画实现的。不过做完后发现只能播放一次，索性就加工了一下，可以由鼠标事件触发。

HTML部分：

    <div class="w w5 a5"></div>
    <div class="w w4 a4"></div>
    <div class="w w3 a3"></div>
    <div class="w w2 a2"></div>
    <div class="w w1 a1"></div>
    <div class="w w0 a0"></div>

CSS部分：

.w {
            position: absolute;
            top: calc((100% - 50px)/2);
            left: calc((100% - 50px)/2);
            width: 50px;
            height: 50px;
            border-radius: 500px;
            background: url('./psc.jpg') fixed center center;
        }

        .a0 {
            z-index: 2;
            width: 500px;
            height: 500px;
            background-size: auto 100%;
            top: calc((100% - 500px)/2);
            left: calc((100% - 500px)/2);
            /* animation: w 1s forwards; */
        }

        .w1 {
            z-index: 3;
            background-size: auto 102%;
            animation: w 1s .2s forwards;
        }

        .w2 {
            z-index: 4;
            background-size: auto 104%;
            animation: w 1s .4s forwards;
        }

        .w3 {
            z-index: 5;
            background-size: auto 101%;
            animation: w 1s .5s forwards;
        }

        .w4 {
            z-index: 6;
            background-size: auto 102%;
            animation: w 1s .8s forwards;
        }

        .w5 {
            z-index: 7;
            background-size: auto 100%;
            animation: w 1s 1s forwards;
        }

        @keyframes w {
            0% {
                top: calc((100% - 50px)/2);
                left: calc((100% - 50px)/2);
                width: 50px;
                height: 50px;
            }

            100% {
                top: calc((100% - 500px)/2);
                left: calc((100% - 500px)/2);
                width: 500px;
                height: 500px;
            }
        }

JS部分：

function play() {

            document.querySelector(".a0").className = "w a0";
            document.querySelector(".a1").className = "w a1";
            document.querySelector(".a2").className = "w a2";
            document.querySelector(".a3").className = "w a3";
            document.querySelector(".a4").className = "w a4";
            document.querySelector(".a5").className = "w a5";


            window.requestAnimationFrame(function (time) {

                window.requestAnimationFrame(function (time) {


                    document.querySelector(".a0").className = "w a0 w0";
                    document.querySelector(".a1").className = "w a1 w1";
                    document.querySelector(".a2").className = "w a2 w2";
                    document.querySelector(".a3").className = "w a3 w3";
                    document.querySelector(".a4").className = "w a4 w4";
                    document.querySelector(".a5").className = "w a5 w5";

                });
            });


        }

        document.querySelector("div").addEventListener("click", play, false);

上面的代码还有很多漏洞，或者是可以优化的方法，例如class的表示，可以进一步改写，js中的也是，当时注重功能就没进行太多的优化。（放夹里吃灰了！！！）

代码可以直接抄，换个图片的路径就可以了 实现水波纹的效果，核心就是放几个一样的元素，然后以不同的时间触发动画，让他们由小变大，就会出现一种水波一样的效果，从图片中间撑开扩散，很美的效果，不过感觉这样写有点废内存hhh，就当一个装b的东西！

JS中有一个很少可以见得到的 函数 window.requestAnimationFrame(callback) 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行.总结一下就是在一段很小的是一段时间后执行函数。 这里用了两个提高了时间间隔。其实用一个时间很小的延时操作也可以做的到。

核心远离就是对class进行增删，重新触发动画效果 over！