JS（基础）动画

最新推荐文章于 2024-07-26 11:41:15 发布

web扶风仁

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量93

点赞数

分类专栏： HTML 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55345305/article/details/114760795

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、动画实现原理？

1.核心原理

通过定时器setlnterval() 不断移动盒子位置

实现步骤

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /*  记住一定要加定位 */
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<script>
    var div = document.querySelector('div'); // 获取页面标签
    var timer = setInterval(function(){
        if(div.offsetLeft>=400){  // 条件
            //  停止动画
            clearInterval(timer);
        }
    
        div.style.left = div.offsetLeft + 1 +'px';  //赋值
    },30)

</script>

2.缓动效果原理

思路

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法: (目标值-现在的位置)/10 作为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /*  记住一定要加定位 */
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;

        }
        button{
            margin-top: 200px;
            width: 100px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <button>点击</button>
</body>

</html>
<script>
    var div = document.querySelector('div');
    var btn = document.querySelector('button');

    function move(a, b) {
        // 先清理以前的定时器,只保留当前的一个定时器执行
        clearInterval(a.timer)
        a.timer = setInterval(function () {
            //  步长值写在定时器的里面
            //  把步长值改为整数 不要出现小数的问题
            var step = Math.ceil((b - a.offsetLeft) / 10);
            if (a.offsetLeft == b) {
                //  停止动画  本质是停止定时器
                clearInterval(a.timer);
            }
            //  把步长值改为一个慢慢变小的值  步长公式：()
            a.style.left = a.offsetLeft  + step + 'px';
        }, 30)
    }


    btn.addEventListener('click', function () {
        move(div,300)
    })

    //  匀速动画 就是 盒子当前的位置 + 固定的值
    //  缓动动画就是 盒子当前的位置 + 变化的值(（目标值 - 现在的位置）/10)
</script>

3.引用动画函数

如果以后经常使用这个函数，可以单独封装一个JS 文件里面使用的时候引用这个JS 文件即可

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /*  记住一定要加定位 */
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;

        }

        button {
            margin-top: 200px;
            width: 100px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <button>点击</button>
</body>

</html>
<script>
    var div = document.querySelector('div');
    var btn = document.querySelector('button');
//============================================================================
// 封装动画函数
    function move(a, b, c) {
        // 先清理以前的定时器,只保留当前的一个定时器执行
        clearInterval(a.timer)
        a.timer = setInterval(function () {
            //  步长值写在定时器的里面
            //  把步长值改为整数 不要出现小数的问题
            var step = Math.ceil((b - a.offsetLeft) / 10);
            if (a.offsetLeft == b) {
                //  停止动画  本质是停止定时器
                clearInterval(a.timer);
                //  回调函数写在计时器结束后
                //  有就调用 没有就不用
                if(c){
                    c();
                }
            }
            //  把步长值改为一个慢慢变小的值  步长公式：()
            a.style.left = a.offsetLeft + step + 'px';
        }, 30)
    }

//==================================================================
    btn.addEventListener('click', function () {
        // 第一个参数 调用的元素 
        // 第二个参数  目标长度
        // 第三个参数  回调函数
        move(div, 300, function(){
            // 当动画执行结束改变元素的样式
        })
    })

    //  匀速动画 就是 盒子当前的位置 + 固定的值
    //  缓动动画就是 盒子当前的位置 + 变化的值(（目标值 - 现在的位置）/10)
</script>

web扶风仁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（基础）动画

一、动画实现原理？1.核心原理通过定时器setlnterval() 不断移动盒子位置实现步骤获得盒子当前的位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用 element.style.left<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=
复制链接

扫一扫