JavaScript动画

最新推荐文章于 2022-05-06 14:38:43 发布

周游、

最新推荐文章于 2022-05-06 14:38:43 发布

阅读量124

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_53228839/article/details/117388914

版权

JavaScript 动画缓动效果定时器元素定位

关键词由CSDN通过智能技术生成

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

动画原理

核心原理：通过定时器setInterval()不断移动盒子位置

实现步骤：

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

<!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-Compatiable" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      position: absolute;
      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');
  setInterval(function (){
    if (div.offsetLeft >= 400){
      //停止动画 本质是停止定时器
      clearInterval(timer);
    }
    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-Compatiable" 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>
  //简单动画函数封装obj目标对象 target目标位置
  function animate(obj,target){
    var timer =setInterval(function (){
      if (div.offsetLeft >= target){
        //停止动画 本质是停止定时器
        clearInterval(timer);
      }
      obj.style.left=obj.offsetLeft + 1 + 'px';
    },30);
  }
  var div=document.querySelector('div');
  var span=document.querySelector('span');

  //调用函数
  animate(div,300);
  animate(span,200);

</script>
</body>
</html>

动画函数-给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器，我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）

核心原理:利用JS是一门动态语言，可以很方便地给当前对象添加属性

<!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-Compatiable" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      position: absolute;
      left: 0;
      top: 100px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    span {
      position: absolute;
      left: 0;
      top: 300px;
      display: block;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>
<body>
<button>点击按钮span才走</button>
<div></div>
<span></span>
<script>
  // var obj={};
  // obj.name='andy';
  //简单动画函数封装obj目标对象 target目标位置
  //给不同的元素指定了不同的定时器
  function animate(obj,target){
    //当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
    //解决方案就是让我们元素只有一个定时器执行
    //先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer =setInterval(function (){
      if (obj.offsetLeft >= target){
        //停止动画 本质是停止定时器
        clearInterval(obj.timer);
      }
      obj.style.left=obj.offsetLeft + 1 + 'px';
    },30);
  }
  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>

缓动动画原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢落下来

思路：

1、让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2、缓动动画公式：（目标值-现在的位置）/10 作为每次移动的距离步长

3、停止的条件是：让当前盒子位置等于目标位置就停止计时器

4、注意步长值需要取整

缓动动画基本代码实现

<!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-Compatiable" content="ie=edge">
  <title>Document</title>
  <style>
    span {
      position: absolute;
      left: 0;
      top: 100px;
      display: block;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>
<body>
<button>点击按钮span才走</button>
<span></span>
<script>
  function animate(obj,target){
    //先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer =setInterval(function (){
      //步长值写在定时器里面
      var step =(target-obj.offsetLeft)/10;
      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>

缓动动画多个目标值之间移动

可以让动画函数从800到500

当我们点击按钮时，判断步长是正值还是负值

1、如果是正值，则步长往大了取整

2、如果是负值，则步长向小了取整

<!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-Compatiable" content="ie=edge">
  <title>Document</title>
  <style>
    span {
      position: absolute;
      left: 0;
      top: 100px;
      display: block;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>
<body>
<button class="btn500">点击按钮span到500</button>
<button class="btn800">点击按钮span到800</button>
<span></span>
<script>
  function animate(obj,target){
    //先清除以前的定时器，只保留当前的一个定时器执行
    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);
      }
      //把每次加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>

缓动动画添加回调函数

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

回调函数写的位置：定时器结束的位置

<!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-Compatiable" content="ie=edge">
  <title>Document</title>
  <style>
    span {
      position: absolute;
      left: 0;
      top: 100px;
      display: block;
      width: 150px;
      height: 150px;
      background-color: purple;
    }
  </style>
</head>
<body>
<button class="btn500">点击按钮span到500</button>
<button class="btn800">点击按钮span到800</button>
<span></span>
<script>
  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();
        }
      }
      //把每次加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';
    });
  })
  //匀速动画 就是 盒子当前的位置+固定的值 10
  //缓动动画就是 盒子当前的位置+变化的值（目标值-现在的位置）/10
</script>
</body>
</html>

动画函数的使用

动画函数封装

动画函数封装到单独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>
  <script>
    window.onload = function(){
      var img1 = document.getElementById("img1");
      var imgAll = ["../images/图1.jpg","../images/图02.jpg","../images/图03.jpg"];
      var index = 0;
      setInterval(function(){
        index++;
        if (index>2){
          index = 0;
        }
        img1.src = imgAll[index];

      },3000);
    };
  </script>
</head>
<body>
<img src="../images/图1.jpg" id="img1">
</body>
</html>

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .con{
        position: absolute;
        left:0;
        top: 0;
        text-align: center;
        width: 200px;
        height: 40px;
        background-color: purple;
        z-index: -1;
      }
      .sliderbar{
        position: absolute;
        right: -150px;
        bottom: 200px;
        width: 200px;
        height: 40px;
        background-color: purple;
        z-index: -1;
      }
      .span1{
        line-height: 40px;

      }
    </style>
  <script src="animate.js"></script>
</head>
<body>
  <div class="sliderbar">
    <span class="span1">→</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(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>

周游、

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
JavaScript动画

<!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&l.
复制链接

扫一扫

专栏目录