- A+
所属分类:Web前端
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; } }