缓动动画的原理和封装

最新推荐文章于 2022-04-17 16:37:55 发布
最新推荐文章于 2022-04-17 16:37:55 发布
阅读量162 收藏
点赞数
分类专栏： Web API 文章标签： 动画 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangZhang_521/article/details/123531432
版权

01-mouseenter和mouseover的区别(经典面试题)

<!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>mouseenter和mouseover的区别(经典面试题)</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        //1. mouseover经过自身盒子触发事件，经过子盒子也会触发事件
        // father.addEventListener('mouseover', function() {
        //     console.log(1);
        // })

        //2. mouseenter只能经过自身盒子触发事件
        father.addEventListener('mouseenter', function() {
            console.log(2);
        })
    </script>
</body>

</html>

02-动画原理

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

<body>
    <div></div>
    <script>
        // 动画原理
        // 1.首先获得盒子当前的位置
        // 2.让盒子在当前位置加一个移动距离
        // 3.利用定时器不断重复这个操作
        // 4.加一个结束定时器的条件
        // 5.注意此元素需要添加定位，才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            //加一个判断条件
            if (div.offsetLeft >= 400) {
                //停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px'; //div.offsetLeft获取div当前的位置   div.style.left赋值改变div的位置
        }, 50);
    </script>
</body>

</html>

03-简单动画函数封装

<!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: 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>
        // 简单动画函数封装 obj目标对象   target目标位置
        function animate(obj, target) {
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    //停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 50);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 300);
        animate(span, 500);
    </script>
</body>

</html>

04-给不同元素添加不同定时器

<!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: 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 obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装 obj目标对象   target目标位置
        function animate(obj, target) {
            // 当我们不断地点击这个按钮，这个元素的速度会越来越快，因为开启了太多定时器
            // 解决方案：就是让元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() { //这样的写法没有var声明，不用开辟内存空间，提高执行效率
                if (obj.offsetLeft >= target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 50);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 300);
        btn.addEventListener('click', function() {
            animate(span, 200);
        })
    </script>
</body>

</html>

05-缓动动画原理

<!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>缓动动画原理</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>
        // 缓动动画函数封装 obj目标对象   target目标位置
        // 思路：1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
        // 2.核心算法：(目标位置-现在的位置) / 10 作为每次移动的距离 步长 10可以改为其他数字
        // 3.停止的条件：让当前的位置等于目标位置，就停止计时器
        // 4.注意步长值取整数
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() { //这样的写法没有var声明，不用开辟内存空间，提高执行效率
                // 步长值写到定时器里面
                // 把我们步长值改为整数 不要出现小数的问题 往上取整
                //var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                //如果步长大于0，往上取整；如果步长小于0，则往下取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标位置-现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');


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

</html>

06-缓动动画添加回调函数

<!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>缓动动画添加回调函数</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) {
            // console.log(callback); //callback=function(){} 相当于完成了赋值操作 调用的时候 callback()
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() { //这样的写法没有var声明，不用开辟内存空间，提高执行效率
                // 步长值写到定时器里面
                // 把我们步长值改为整数 不要出现小数的问题 往上取整
                //var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                //如果步长大于0，往上取整；如果步长小于0，则往下取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        // 判断里面是否有回调函数，如果有，调用函数
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标位置-现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');


        btn500.addEventListener('click', function() {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function() {
            // 调用函数
            animate(span, 800, function() {
                // alert('您好吗');
                span.style.backgroundColor = 'red'; // 等前面的执行完了背景颜色变红色      回调函数相当于一个参数
            });
        })
    </script>
</body>

</html>

07-引用aniamte动画函数

<!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>引用aniamte动画函数</title>
    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #ccc;
        }
        
        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            /* 降低层级 */
            z-index: -1;
        }
    </style>
    <!-- 引入js文件 -->
    <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.addEventListener('mouseenter', function() {
                // animate(obj,target,callback);
                animate(con, -160, function() {
                    // 当动画执行完毕，就把 ← 改为 →
                    sliderbar.children[0].innerHTML = '→';
                });
            })
            //当我们鼠标离开sliderbar这个盒子 就会让con这个盒子滑动到右侧
        sliderbar.addEventListener('mouseleave', function() {
            // animate(obj,target,callback);
            animate(con, 0, function() {
                sliderbar.children[0].innerHTML = '←';

            });
        })
    </script>
</body>

</html>

animate.js

function animate(obj, target, callback) {
    // console.log(callback); //callback=function(){} 相当于完成了赋值操作 调用的时候 callback()
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() { //这样的写法没有var声明，不用开辟内存空间，提高执行效率
        // 步长值写到定时器里面
        // 把我们步长值改为整数 不要出现小数的问题 往上取整
        //var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        //如果步长大于0，往上取整；如果步长小于0，则往下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if (callback) {
                // 判断里面是否有回调函数，如果有，调用函数
                callback();
            }
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标位置-现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}
WangZhang_521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
缓动动画封装(移动距离、元素、方向不限)
weixin_45786584的博客
05-24 317
缓动动画封装(移动距离、元素、方向不限) 1、缓动动画核心计算公式： `本次需要移动距离 = (目标距离 - 当前距离)/10 2、缓动动画封装思路介绍 <style> #box { width: 100px; height: 100px; background-color: red; position: absolute; left: 0px;
动画缓动效果
08-11
NULL 博文链接：https://jm1999.iteye.com/blog/2223016
缓动动画封装
mj_leona的博客
03-25 162
&lt;style&gt; *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; background-color: darkgoldenrod; position: absolute; t...
封装缓动动画
weixin_48030168的博客
06-01 200
在做轮播图或者返回顶部功能之前，我们可能会用到动画以实现页面切换效果的流畅性，带来更好的用户体验。 下面贴一段封装好的缓动动画函数。 /**缓动动画封装 * @param: obj:做动画的元素对象 * @param: target:目标位置 * @param: callback：回调函数，用于动画执行完毕以后运行的 */ function animate(obj, target, callback) { //清除之前存在的该对象定时器消除影响 clearInterva
WPF基础动画
11-22
在本篇文章中，我们将深入探讨WPF基础动画的原理和实践应用。 **一、动画概述** WPF中的动画系统基于故事板(Storyboard)机制，允许开发者定义对象属性随时间变化的过程。动画可以应用于各种UI元素，如位置、大小、...
简约的方式来创建JS动画
08-07
5. **动画库**：许多JavaScript库如GreenSock (GSAP)、jQuery animate、Popmotion等提供了高级动画功能，包括复杂的缓动、时间轴管理和序列化。这些库可以帮助开发者快速创建复杂的动画效果，同时处理浏览器兼容性和...
ios-视图动画.zip
07-11
4. 尝试修改`FLAnimation`的参数，或者自定义新的动画，以加深对动画原理的理解。 5. 结合GitHub上的项目文档和示例代码，学习如何将`FLAnimation`集成到自己的项目中。 通过这个项目，开发者不仅能够掌握视图动画...
易语言源码易语言动画源码.rar
02-18
易语言是一种专为中国人设计的编程语言，它以简明直观的中文编程语法著称，降低了编程的门槛，使得更多的人能够接触并学习编程...同时，通过阅读和实践源码，可以提升对动画原理和编程逻辑的理解，进一步提高编程能力。
缓动动画的封装与使用
世界和我们都不该止步于此
04-17 257
<body> <span>giao哥</span> <button type="submit" class="giaotwo">点我让giao哥运动200米</button> <button type="submit" class="giaofive">点我让giao哥运动500米</button> </body> 让元素实现匀减速运动 我们只要实现让盒子每次移动的距离慢慢变小，...
缓动动画封装 原生js
weixin_41865901的博客
01-06 154
有的人获取元素left的值可能会用到 element.offsetLeft来获取 如果盒子的position:absolute的话，这样的方式是能取到值的 但是如果不是上述情况的话，用offsetLeft获取到的值是0 这个时候我用要用到浏览器获取样式的函数 即：window.getComputedStyle(element,null)来获取样式 如果想获取left的值，即window.getComputedStyle(element,null).left 但是这个函数IE8不支持，所以我们要写一个浏览器
一个简单的函数封装--缓动动画
qq_42181069的博客
07-19 642
作为一个前端攻城狮，如果能够独立封装库的话，也说明在前端上有了一定的造诣了~~~~不过我是菜鸟，只能从小工具开始封装起来，偶然看到一个动画，就想起来了，封装一下，玩一玩这个缓动动画. 个人觉得如果只是需要用到部分功能的话，自己封装比引入一个巨大的库要好的多，废话不多说~ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; ...
缓动动画
uuulove的博客
07-24 151
begin=begin+(end-begin)*缓动系数 一般配合setintarval使用
动画缓动
蓝Buff的博客
08-18 380
线性动画有一个缺点，通常让人觉得机械和不够自然（图1、图2）。改进动画并创建更趋自然的动画的秘诀是改变变化速率。不是创建以固定不变的速率改变属性的动画，而是需要设计根据某种方式加速或减速的动画，实现更趋自然的动画的最简单方法是使用预置的缓动函数(EasingFunction)。EasyingFunction属性只能接受单个缓动函数对象，所以不能为同一个动画结合不同的缓动函数。 图1 ...
缓动动画原理--封装基本函数
吃瓜群众的博客
10-31 1251
动画速度由快到慢 div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; opac
缓动动画效果
m0_62962469的博客
04-10 842
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。 思路： 1.让盒子每次移动的距离变小，速度就会慢慢落下来 2.核心算法：（目标值-现在的位置）/ 10 作为每次一定的距离 步长 3.停止的条件就是：让当前盒子位置等于目标位置就停止定时器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值