实战—用Swiper实现弧形动画效果

小黄同学926

已于 2024-04-11 09:51:13 修改

阅读量458

点赞数 6

文章标签：前端 vue html

于 2024-04-11 09:47:22 首次发布

本文链接：https://blog.csdn.net/weixin_67697081/article/details/137624070

版权

1 实现弧形动画效果图

2 在HTML中实现

2.1 进入下载Swiper文档，我选的是5.4.5版本

2.2 解压后打开demos文件夹，新建一个index.html文件

2.3 将下面代码复制粘贴到index.html文件中，运行直接可以看到效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../package/css/swiper.min.css" />

    <!-- Demo styles -->
    <style>
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 100%;
        height: auto;
        padding: 150px 0;
        margin-left: auto;
        margin-right: auto;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        height: 200px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition-property: all;
      }
    </style>
  </head>
  <body>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>

      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../package/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        loop: true, // 循环切换
        speed: 2000, // 切换速度
        //自动切换
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 2000,
        },
        slidesPerView: 7, //一组展示几个
        spaceBetween: 30, //间隔单位px
        centeredSlides: true, //当前的active slide是否居中
        watchSlidesProgress: true, //计算每个slide的progress
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        on: {
          setTranslate: function () {
            let slides = this.slides;
            for (let i = 0; i < slides.length; i++) {
              slide = slides.eq(i);
              progress = slides[i].progress;
              // 如果想微调，修改12和120
              let scaleY =
                Math.cos(
                  (Math.PI / 180) * Math.round(360 / 12) * Math.abs(progress)
                ) * 120;
              slide.transform("translate3d(0," + scaleY + "px, 0)"); //偏移
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>

3 在Vue2中实现

技术栈：vue2+swiper5.4.5 +jquery（详细看注释）

<template>
  <div class="cardBox">
    <div class="swiper-container3">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in swiperList"
          :key="index"
        >
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper"; // 注意引入的是Swiper
import "swiper/css/swiper.min.css"; // 注意这里的引入

var effect = 0;
export default {
  name: "mySwiper3",
  data() {
    return {
      swiperList: [
        {
          name: "Slide 1",
        },
        {
          name: "Slide 2",
        },
        {
          name: "Slide 3",
        },
        {
          name: "Slide 4",
        },
        {
          name: "Slide 5",
        },
        {
          name: "Slide 6",
        },
        {
          name: "Slide 7",
        },
        {
          name: "Slide 8",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getSwiper();
    });
  },
  methods: {
    // 实现swiper
    getSwiper() {
      new Swiper(".swiper-container3", {
        loop: true, //循环切换
        speed: 2000, // 切换速度
        //自动切换
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 2000,
        },
        slidesPerView: 7, //一组展示几个
        spaceBetween: 15, //间隔单位px
        centeredSlides: true, //当前的active slide是否居中
        watchSlidesProgress: true, //计算每个slide的progress
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        on: {
          setTranslate: function () {
            let slides = this.slides;
            for (let i = 0; i < slides.length; i++) {
              let slide = slides[i];
              let progress = slides[i].progress;
              //140是盒子高度，12是一圈大概多少个
              let scaleY =
                Math.cos(
                  (Math.PI / 180) * Math.round(360 / 12) * Math.abs(progress)
                ) * 140;
              slide.style.transform = "translate3d(0," + scaleY + "px, 0)"; //偏移
            }
          },
          setTransition: function (transition) {
            for (let i = 0; i < this.slides.length; i++) {
              // .eq()是query方法
              let slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cardBox {
  width: 1000px;
  overflow: hidden;
}
.swiper-container3 {
  width: 100%;
  height: auto;
  padding: 0px 0px 140px;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  background-color: antiquewhite;
  height: 140px;
  cursor: pointer;
  div {
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    color: #000;
  }
}
</style>