視覺差緩動效果的輪播--React版

波特卡斯D發表於2023-11-23
視覺React

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;
  }
}

相關文章