js进阶Web APIs---动画

最新推荐文章于 2022-04-22 10:47:52 发布

兰兰的小窝

最新推荐文章于 2022-04-22 10:47:52 发布

阅读量133

点赞数

分类专栏： # js 文章标签：动画

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113402412

版权

js 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

普通动画

原理

获得盒子当前位置 offsetLeft（注意：这里不带单位）
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作 setInterval()
加一个结束定时器的条件
注意此元素需要添加定位absolute，才能使用element.style.left

demo1:点击按钮，开始动画：
在这里插入图片描述

<!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>
    <input type="button" value='开始动画1' id="btn1">
    <input type="button" value='开始动画2' id="btn2">

    <div>动画1</div>
    <span>动画2</span>
    <script>
        //获取元素
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');

        btn1.addEventListener('click', function() {
            // 调用函数
            animate(div, 300);
        })
        btn2.addEventListener('click', function() {
            // 调用函数
            animate(span, 200);
        })

        // 简单动画函数封装obj目标对象， target 目标位置
        function animate(obj, target) {
            // 给不同的元素指定了不同的定时器
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            //每隔30ms重复
            obj.timer = setInterval(function() {
                // 如果盒子距离页面的距离>目标距离，就停止动画
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                //设置位置：style.left
                //得到位置：offsetLeft
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
        }
    </script>
</body>

</html>

缓动动画

就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长step
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整,否则到不了目标位置（最终与目标位置存在偏差）

function animate(obj, target) {
            
  clearInterval(obj.timer);
     
     obj.timer = setInterval(function() {
         // 如果盒子距离页面的距离>目标距离，就停止动画
         if (obj.offsetLeft >= target) {
             // 停止动画 本质是停止定时器
             clearInterval(timer);
         }
         // 步长=(目标值 - 现在的位置) / 10
         var step = Math.ceil((target - obj.offsetLeft) / 10);
         obj.style.left = obj.offsetLeft + step + 'px';
     }, 30);
 }

demo2:让动画在多个目标位置（target）处移动：
在这里插入图片描述

<script>
     //获取元素:div是要动的盒子---目标对象
     var div = document.querySelector('div');
     var btn1 = document.querySelector('#btn1');
     var btn2 = document.querySelector('#btn2');

     btn1.addEventListener('click', function() {
         animate(div, 200);
     })
     btn2.addEventListener('click', function() {
         animate(div, 500);
     })


     function animate(obj, target) {

         clearInterval(obj.timer);

         obj.timer = setInterval(function() {
             // 如果盒子距离页面的距离==目标距离，就停止动画
             if (obj.offsetLeft == target) {
                 // 停止动画 本质是停止定时器
                 clearInterval(obj.timer);
             }
             // 步长=(目标值 - 现在的位置) / 10
             var step = (target - obj.offsetLeft) / 10;
             //步长>0,取大值ceil()
             //步长>0,取小值floor()
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             obj.style.left = obj.offsetLeft + step + 'px';
         }, 30);
     }
 </script>

总结：
匀速动画：盒子当前的位置+固定的值1
缓动动画：盒子当前的位置+变化的值step

动画案例：
实现效果：
在这里插入图片描述
分析：
实现：
animate.js

//callback是回调函数（函数作为参数进行传递）：主函数先执行，结束后再执行回调函数
function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

<!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>
        // 1. 获取元素
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');
        // 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧
        // 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧
        sliderbar.addEventListener('mouseenter', function() {
            // 调用animate.js里面的函数：animate(obj, target, callback);
            animate(con, -160, function() {
                // 当我们动画执行完毕，就把 ← 改为 →
                sliderbar.children[0].innerHTML = '→';
            });

        })
        sliderbar.addEventListener('mouseleave', function() {
            // animate(obj, target, callback);
            animate(con, 0, function() {
                sliderbar.children[0].innerHTML = '←';
            });

        })
    </script>
</body>

</html>

兰兰的小窝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶Web APIs---动画

普通动画原理获得盒子当前位置 offsetLeft（注意：这里不带单位）让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作 setInterval()加一个结束定时器的条件注意此元素需要添加定位absolute，才能使用element.style.leftdemo1:点击按钮，开始动画：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫