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 (
    

    服务器托管网  
        

          
        
        

          
        
      
     {/*随便搞点字，效果更明显*/}
      
ZYJ's BOLG
      

        
跨越山海不舍自由与爱
        
天行健 君子以自强不息
      
    
  );
};
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;
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Java 21 新特性：虚拟线程（Virtual Threads）

在Java 21中，引入了虚拟线程（Virtual Threads）来简化和增强并发性，这使得在Java中编程并发程序更容易、更高效。 虚拟线程，也称为“用户模式线程（user-mode threads）”或“纤程（fibers）”。该功能旨服务器托管网在简化…