纯js属于自己的运动函数

最新推荐文章于 2023-01-13 15:15:33 发布

江呱呱

最新推荐文章于 2023-01-13 15:15:33 发布

阅读量164

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108467975

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

属于自己的运动函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
            //封装动画函数的目的就是为了以后简化操作

        //封装一个函数 让他运动
        //参数一 执行动画的元素
        //参数二 目的地
        //参数三 持续时间
        //参数四 回调函数
        function animate(ele, obj, duration, callback) {
            //1.得到终点-起点=要移动的总距离
            //起点
            var start = {};
            for (var i in obj) {
                start[i] = parseInt(getComputedStyle(ele)[i]);
            }
            //要移动的总距离
            var stepDistance = {};
            for (var i in start) {
                stepDistance[i] = obj[i] - start[i];
            }
            //动画的频率
            let interval = 20;
            //走的次数
            let stepCount = duration / interval;
            //一步走的距离
            let oneDistance = {};
            for (var i in stepDistance) {
                oneDistance[i] = stepDistance[i] / stepCount;
            }
            // console.log(oneDistance);
            var count = 0;
            let timer = setInterval(function() {
                count++;
                for (var i in oneDistance) {
                    if (i.toLocaleLowerCase() == 'opacity') {
                        ele.style[i] = start[i] + oneDistance[i] * count
                    } else {
                        ele.style[i] = start[i] + oneDistance[i] * count + 'px'
                    }
                    // console.log(i);
                }
                if (count >= stepCount) {
                    clearInterval(timer);
                    callback && callback();
                    // console.log(callback);
                }
            }, interval)
        }
        animate(div, {
            left: 200,
            top: 200,

        }, 500, function() {
            div.style.opacity = '0'
        })




        //算法:1.移动的距离=终点的位置-起点的位置
        // 2.走的次数=持续的时间/执行的频率
        //3.每次走的距离=移动的距离/走的次数
        //用定时器 把每次走的距离*执行的次数 就是当前的位置
    </script>
</body>

</html>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js属于自己的运动函数

属于自己的运动函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫

专栏目录