1

JavaScript 动画

动画原理
<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var tinner = setInterval(function () {
            if (div.offsetLeft > 400) {
                clearInterval(tinner);
            }
            div.style.left = div.offsetLeft + 1 + 'px'

        }, 30)

    </script>
</body>

</html>
动画原理
<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <span>夏雨荷</span>
    <script>
       function animate(obj, target) {
           var inner = setInterval(function () {
               if (obj.offsetLeft >= target) {
                   clearInterval(inner)
               }
               obj.style.left = obj.offsetLeft + 1 + 'px'
           },30)
       }
       var div = document.querySelector('div');
       var span = document.querySelector('span');
       animate(div, 200);
       animate(span, 300);

    </script>
</body>

</html>
动画封装
<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        function move(obj, target) {
            clearInterval(obj.tinner); // 防止多次点击
            obj.tinner = setInterval(function () {
                if (obj.offsetLeft >=target) {
                clearInterval(tinner)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px'
            },10)
        }
        move(div, 300);

        btn.addEventListener('click', function () {
            move(span,400)
        })


    </script>
</body>

</html>
不同动画
缓动动画
<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <span>夏雨荷</span>
    <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                var step = (target - obj.offsetLeft) / 30;
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
                // 调用函数
                animate(span, 500);
            })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>
</body>

</html>
原理
<!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>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target) {
        // 清理定时器，防止多次点击
        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            // 把我们步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            // 到达目标就清除
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }

    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800);
    }


    </script>
</body>

</html>
缓动动画数值间移动
<!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>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target, callback) {
        // 清理定时器，防止多次点击
        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            // 把我们步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            // 到达目标就清除
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);

                // 回调函数
                if (callback){
                    callback()
                }
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }

    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800, function () {
            span.style.backgroundColor = 'red';  // 回调函数
        });
    }


    </script>
</body>

</html>
缓动动画回调函数
<!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>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>

    <script>
        // 获取元素
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');

        sliderbar.onmouseenter = function () {
            animate(con, -160, function() {
                // 当我们动画执行完毕，就把 ← 改为 →
                sliderbar.children[0].innerHTML = '→';
            });
        };

        sliderbar.onmouseleave = function () {
            animate(con, 0, function() {
                // 当我们动画执行完毕，就把 → 改为 ←
                sliderbar.children[0].innerHTML = '←';
            });
        }



    </script>
</body>

</html>
缓动动画底部


相关资料: https://github.com/1515806183/html-code/tree/master/wapapi-04

posted @ 2020-03-18 14:09  小白森  阅读(539)  评论(0)  编辑  收藏  举报