React實現視覺差效果緩動輪播

效果如下（圖片幀率低看起來有點卡頓，看個大概就行）：

分享一下思路：
1.正常引入一個輪播組件（站在巨人肩膀省時省力），去除指示點、引導箭頭等不需要的元素，有些組件支持配置，不支持就手動覆蓋CSS樣式了
2.找到組件中用于顯示展示當前圖片的類名
3.添加transform效果和transition屬性

實操：
1.配置輪播組件，因為項目使用的ant design,所以這里直接使用Carousel組件
（Carousel組件也是封裝自React Slickhttps://react-slick.neostack.com/，也可以直接使用這個）

import {Carousel} from 'antd';
import style from './index.less';
import loginBgOne from "@/assets/images/login_bg_one.jpg";//背景圖
import loginBgTwo from "@/assets/images/login_bg_two.png";

const TestPage= () => {
  const carouselSetting = {
    effect: 'fade', //動畫效果：漸顯
    autoplay: true,
    autoplaySpeed: 5000, //自動播放速度（每張圖的展示時間）
    dots: false,
    draggable:false,
    speed: 1500, //切換動畫速度
  };

  return (
    <div className={style.pageBox}>
      <Carousel {...carouselSetting}>
        <div className={style.imgBox}>
          <img src={loginBgOne} />
        </div>
        <div className={style.imgBox}>
          <img src={loginBgTwo} />
        </div>
      </Carousel>
     {/*隨便搞點字，效果更明顯*/}
      <div className={style.systemName}>ZYJ's BOLG</div>
      <div className={style.desBox}>
        <p className={style.titleOne}>跨越山海·不舍*與愛</p>
        <p className={style.titleTwo}>天行健 君子以自強不息</p>
      </div>
    </div>
  );
};
export default TestPage;

2.打開控制臺，找到組件展示當前圖片的類名，添加樣式，carousel中是.slick-current

//添加縮放屬性，并配置過渡。加500ms延遲看起來不那么生硬
:global {
  .ant-carousel .slick-list .slick-slide.slick-current img {
    transform: scale(1.15, 1.15);
    transition: 5.5s ease-in 500ms;
  }
}

至此，其實已經實現效果了。但是在圖片切換的動畫期間，放大的圖片會由于丟失樣式瞬間回到一倍大小，感官上有頓挫感。雖然可以加快切換動畫的速度，但就顯得不絲滑。（畢竟咱們是追求優雅的人，233）
解決辦法還是transition屬性，通過給不活躍的圖片設置一個一倍縮放，再加一個延遲。在切換動畫期間就看不到縮小了

.imgBox {
  width: 100%;
  img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    //關鍵
    transform: scale(1, 1);
    transition: 1s ease-in 1000ms;
  }
}

總結

以上是生活随笔為你收集整理的视觉差缓动效果的轮播--React版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。