promise基本使用——简单的运动效果

一开始接触到promise的时候也是比较懵逼的，不太理解他们的奥秘在哪儿，以及我们为什么要使用它，随着深入的了解，觉得他很大程度了解决了我们之前的回调地域的问题，还有关于数据请求异步的方式，promise极大程度的解决了我们的代码多层嵌套难以阅读理解的问题。

接着入正题，现在我们要实现一个边框的划入效果。这个效果实现起来也是很容易的，css3基本上就能够实现了，这里我们不讨论css3.只讨论js的使用。下面贴代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 100px;
                position: relative;
            }

            li {
                list-style: none;
                width: 100px;
                position: absolute;
            }

            .box ul li:first-child {
                left: -3px;
                bottom: -3px;
                width: 1px;
                height: 0px;
                background-color: black;
            }

            .box ul li:nth-child(2) {
                right: -3px;
                top: -3px;
                width: 1px;
                height: 0px;
                background-color: black;
            }

            .box ul li:nth-child(3) {
                left: -3px;
                top: -3px;
                width: 0px;
                height: 1px;
                background-color: black;
            }

            .box ul li:nth-child(4) {
                bottom: -3px;
                width: 0px;
                height: 1px;
                background-color: black;
                right: -3px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="box_left"></li>
                <li class="box_right"></li>
                <li class="box_top"></li>
                <li class="box_bottom"></li>
            </ul>
        </div>
        <script>
            function $_(name) {
                return document.querySelector(name);
            }
            function getStyle(obj, attr) {
                return getComputedStyle(obj)[attr];
            }
            function animate(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var bstop = true;
                    for (var key in json) {
                        var icur;
                        if (key == "opacity") {
                            icur = Math.round(getComputedStyle(obj)[key] * 100);
                        }
                        else {
                            icur = parseInt(getComputedStyle(obj)[key]);
                        }
                        var speed = (parseInt(json[key]) - icur) / 6;
                        if (speed !== 0) {
                            bstop = false;
                        }
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if (key == "opacity") {
                            obj.style[key] = (icur + speed) / 100;
                        } else {
                            obj.style[key] = icur + speed + "px";
                        }
                    }
                    if (bstop) {
                        clearInterval(obj.timer);
                        fn && fn()
                    }
                }, 30)
            }
            animate($_(".box ul li:first-child"), {
                height: "106px"
            },function(){
                animate($_(".box ul li:nth-child(3)"),{
                    width:"106px"
                },function(){
                    animate($_(".box ul li:nth-child(2)"),{
                        height:"106px"
                    },function(){
                        animate($_(".box ul li:nth-child(4)"),{
                            width:"106px"
                        })
                    })
                })
            })
        </script>
    </body>
</html>

效果演示如下

promise基本使用——简单的运动效果

猜你喜欢