javascript实现左右缓动动画函数

2023-12-09前端开发

Javascript实现左右缓动动画函数的步骤如下：

1. 缓动函数

缓动函数用于生成一个根据时间不断递减的系数，用于产生缓慢的运动效果。常用的缓动函数有以下几种：

linear：匀速运动，即保持恒定的速度，不缓动。
easeIn：加速缓动，即运动开始较慢，然后逐渐加速。
easeOut：减速缓动，即运动开始较快，然后逐渐减速。
easeInOut：先加速后减速缓动，即运动开始和结束较慢，中间速度较快。

以下是一个实现缓动函数的示例：

function easing(t, b, c, d) {
  return c * t / d + b;
}

其中，t是当前时间，b是起始位置，c是总位移量，d是总时间。

2. 动画函数

动画函数用于控制元素运动的过程。其实现基于定时器，每隔一段时间，根据缓动函数计算出元素的当前位置，再将其应用到元素的样式中，从而实现运动效果。以下是一个实现左右缓动动画函数的示例：

function slide(element, distance, direction, duration, callback) {
  const start = element.offsetLeft;
  const end = start + distance * direction;
  let current = start;
  let previous = null;
  const animate = () => {
    const timestamp = Date.now();
    const elapsed = timestamp - previous;
    const position = easing(elapsed, start, distance, duration);
    element.style.left = `${position}px`;
    current = element.offsetLeft;
    if (current !== end) {
      previous = timestamp;
      window.requestAnimationFrame(animate);
    } else {
      callback && callback();
    }
  };
  window.requestAnimationFrame(animate);
}

其中，element是目标元素，distance是移动距离，direction是移动方向（-1表示向左，1表示向右），duration是移动时间，callback是动画结束时的回调函数。

3. 示例说明

以下是一个使用slide函数实现图片左右缓动的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Slide Demo</title>
  <style>
    #container {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    #images {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
    }
    #images img {
      float: left;
      width: 500px;
      height: 200px;
    }
    #prev,
    #next {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 30px;
      margin-top: -15px;
      background: #ccc;
      opacity: 0.5;
      text-indent: -9999px;
      cursor: pointer;
      transition: opacity 0.3s;
    }
    #prev:hover,
    #next:hover {
      opacity: 1;
    }
    #prev {
      left: 10px;
    }
    #next {
      right: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="images">
      <img src="https://picsum.photos/500/200?random=1" alt="">
      <img src="https://picsum.photos/500/200?random=2" alt="">
      <img src="https://picsum.photos/500/200?random=3" alt="">
      <img src="https://picsum.photos/500/200?random=4" alt="">
      <img src="https://picsum.photos/500/200?random=5" alt="">
    </div>
    <a id="prev" href="#">Previous</a>
    <a id="next" href="#">Next</a>
  </div>
  <script>
    const container = document.getElementById('container');
    const images = document.getElementById('images');
    const prev = document.getElementById('prev');
    const next = document.getElementById('next');
    const imgWidth = parseInt(getComputedStyle(images.firstElementChild).width);
    let currentIndex = 0;
    const slideNext = () => {
      slide(images, -imgWidth, 1, 1000, () => {
        currentIndex++;
        if (currentIndex >= images.children.length) {
          currentIndex = 0;
        }
        images.style.left = '0';
      });
    };
    const slidePrev = () => {
      slide(images, imgWidth, -1, 1000, () => {
        currentIndex--;
        if (currentIndex < 0) {
          currentIndex = images.children.length - 1;
        }
        images.style.left = `${-currentIndex * imgWidth}px`;
      });
    };
    prev.addEventListener('click', slidePrev);
    next.addEventListener('click', slideNext);
  </script>
</body>
</html>

该示例实现了一个图片轮播的效果，在一组宽度为500px、高度为200px的图片中，通过点击前后箭头来左右滑动图片。点击前后箭头时，分别调用slidePrev和slideNext来触发滑动效果。其中，currentIndex表示当前图片的下标，滑动过程中，根据当前下标来更新images的left值，使其展示正确的图片。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

网站部署https后百度地图不显示问题

微信小程序实现点击复制功能和手机拨打电话功能

js拖拽排序插件Sortable.js如何使用

热门文章

热门精品源码

最新VIP资源