• 【JavaScript-动画原理】如何使用js进行动画效果的实现

     

    • 💂 个人主页：Aic山鱼 

    •  个人社区：山鱼社区

    • 💬 如果文章对你有所帮助请点个👍吧!
    • 欢迎关注、点赞、收藏(一键三连)和订阅专哦

    目录

    前言

    1.动画原理

    2.动画函数的封装

    3.给不同元素添加定时器

    4.缓动动画原理

    5.给动画添加回调函数

    6.动画函数的使用

     写在最后

    前言

    动画对于我们来说都不陌生，css里面就有很多动画，2d，3d等各种动画，本篇主要是如何使用js实现动画效果，如果本篇文章对你有帮助，点赞支持一下吧！

    1.动画原理


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

    1. <body>
    2.     <div>
    3.  
    4.     div>
    5.     <script>
    6.  
    7.         var div = document.querySelector('div');
    8.         var timer = setInterval(function () {
    9.             if (div.offsetLeft >= 500) {
    10.                 clearInterval(timer);
    11.             }
    12.             div.style.left = div.offsetLeft + 2 + 'px';
    13.         }, 30)
    14.     script>
    15. body>

    主要核心就是利用定时器进行动画的实现

    2.动画函数的封装

    1. <script>
    2.         // 简单动画函数封装
    3.         function animate(obj, rug) {
    4.             var timer = setInterval(function () {
    5.                 if (obj.offsetLeft >= rug) {
    6.                     clearInterval(timer);
    7.                 }
    8.                 obj.style.left = obj.offsetLeft + 2 + 'px';
    9.             }, 30)
    10.         }
    11.         var div = document.querySelector('div');
    12.     animate(div,300);
    13.     script>

    把这个动画封装成一个函数，方便以后的使用，该封装函数里的obj是哪个元素要进行动画的实现rug是该元素要移动多少距离

    3.给不同元素添加定时器

    1. <body>
    2.     <div>
    3.  
    4.     div>
    5.     <button>点击走button>
    6.     <script>
    7.         // 简单动画函数封装
    8.         // 给不同元素添加定时器
    9.         function animate(obj, rug) {
    10.             clearInterval(obj.timer);
    11.             obj.timer = setInterval(function () {
    12.                 if (obj.offsetLeft >= rug) {
    13.                     clearInterval(obj.timer);
    14.                 } else {
    15.                     obj.style.left = obj.offsetLeft + 2 + 'px';
    16.                 }
    17.             }, 30)
    18.         }
    19.         var div = document.querySelector('div');
    20.         var but = document.querySelector('button');
    21.         but.addEventListener('click', function () {
    22.             animate(div, 200);
    23.         })
    24.     script>

    这样就能实现多个元素进行动画的使用了，并且每个元素都有属于自己的定时器

    4.缓动动画原理

    公式：目标值-现在的位置/10 ，作为每次的移动距离

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             position: absolute;
    12.             left: 0;
    13.             width: 100px;
    14.             height: 100px;
    15.             background-color: pink;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <button>点击button>
    21.     <div>div>
    22.     <script>
    23.         function animate(obj, rug) {
    24.             clearInterval(obj.timer);
    25.             obj.timer = setInterval(function () {
    26.                 // 步长值
    27.                 var step = (rug - obj.offsetLeft) / 10;
    28.                 if (obj.offsetLeft == rug) {
    29.                     clearInterval(obj.timer);
    30.                 } else {
    31.                     obj.style.left = obj.offsetLeft + step + 'px';
    32.                 }
    33.             }, 15)
    34.         }
    35.         var div = document.querySelector('div');
    36.         var but = document.querySelector('button');
    37.         but.addEventListener('click', function () {
    38.             animate(div, 500);
    39.         })
    40.     script>
    41. body>
    42.  
    43. html>

     

    5.给动画添加回调函数

    回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面 ,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。

    当跑完800米后，会弹出一个框“hello”，这个就是在执行完800米这个动画后再次进行的函数，这就是回调函数

     6.动画函数的使用

    实现侧边栏滑动效果

    当鼠标经过slider就会让con这 个盒子滑动到左侧

    当鼠标离开slider就会让con这 个盒子滑动到右侧

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <script src="./js/animate.js">script>
    10.     <style>
    11.         .silder {
    12.             margin-left: 1600px;
    13.             text-align: center;
    14.             position: relative;
    15.             line-height: 100px;
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: aqua;
    19.         }
    20.         span {}
    21.  
    22.         .con {
    23.             position: absolute;
    24.             top: 0;
    25.             left: 0;
    26.             z-index: -1;
    27.             width: 200px;
    28.             height: 100px;
    29.             background-color: rgb(132, 0, 255);
    30.         }
    31.     style>
    32. head>
    33. <body>
    34.     <div class="silder">
    35.         <span>←span>
    36.         <div class="con">问题反馈div>
    37.     div>
    38.     <script>
    39.         var silder = document.querySelector('.silder');
    40.         var con = document.querySelector('.con');
    41.         var span = document.querySelector('span');
    42.         silder.addEventListener('mouseenter', function () {
    43.             animate(con, -200, function () {
    44.                 span.innerHTML = '→';
    45.             });
    46.         })
    47.         silder.addEventListener('mouseleave', function () {
    48.             animate(con, 0, function () {
    49.                 span.innerHTML = '←';
    50.             });
    51.         })
    52.     script>
    53. body>
    54.  
    55. html>

    1. function animate(obj, rug, callback) {
    2.     clearInterval(obj.timer);
    3.     obj.timer = setInterval(function () {
    4.         // 步长值
    5.         // var step = Math.ceil((rug - obj.offsetLeft) / 10);
    6.         var step = (rug - obj.offsetLeft) / 10;
    7.         step = step > 0 ? Math.ceil(step) : Math.floor(step);
    8.         if (obj.offsetLeft == rug) {
    9.             clearInterval(obj.timer);
    10.             if (callback) {
    11.                 callback();
    12.             }
    13.         } else {
    14.             obj.style.left = obj.offsetLeft + step + 'px';
    15.         }
    16.         // 回调函数写道计时器结束里
    17.     }, 15)
    18. }
    '
    运行

     写在最后

    我是Aic山鱼，感谢您的支持
    ​原 创 不 易 ✨还希望支持一下
    点赞👍：您的赞赏是我前进的动力！
    收藏⭐：您的支持我是创作的源泉！
    评论✍：您的建议是我改进的良药！
    山鱼🦈社区：山鱼社区💌💌

    希望三连下👍⭐✍支持一下博主🌊

  • 相关阅读:
    nestJs(一) 创建node项目
    LeetCode算法心得——和可被 K 整除的子数组（前缀和+HashMap）
    vscode的窗口下拉显示行数不够
    10月19日，每日信息差
    这个Python库助力pandas智能可视化分析
    【云原生之Docker实战】部署轻量级容器云管理平台Humpback
    10.0 SpringMVC源码分析之MVC 模型由来
    2023年中国功效护肤品市场发展概况分析：行业市场成熟度高[图]
    猿创征文｜Spring Boot 整合分布式调度框架：xxl-job
    Linux入门教程：P14-＞进程管理类
  • 原文地址：https://blog.csdn.net/zhaochen1127/article/details/127043662