视觉差缓动效果的轮播--React版
<h1 id="react实现视觉差效果缓动轮播">React实现视觉差效果缓动轮播</h1><p>效果如下（图片帧率低看起来有点卡顿，看个大概就行）：<br>
<img src="https://img2023.cnblogs.com/blog/3321008/202311/3321008-20231122144652303-360839809.gif" alt="" loading="lazy"><br>
分享一下思路：<br>
<strong>1.正常引入一个轮播组件（站在巨人肩膀省时省力），去除指示点、引导箭头等不需要的元素，有些组件支持配置，不支持就手动覆盖CSS样式了</strong><br>
<strong>2.找到组件中用于显示展示当前图片的类名</strong><br>
<strong>3.添加transform效果和transition属性，通过不同选择器优先级控制展示</strong></p>
<p>实操：<br>
1.配置轮播组件，因为项目使用的ant design,所以这里直接使用Carousel组件<br>
（Carousel组件也是封装自React Slickhttps://react-slick.neostack.com/，也可以直接使用这个）</p>
<pre><code>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;
</code></pre>
<p>2.打开控制台，找到组件展示当前图片的类名，添加样式，carousel中是.slick-current</p>
<pre><code>//添加缩放属性，并配置过渡。加500ms延迟看起来不那么生硬
:global {
.ant-carousel .slick-list .slick-slide.slick-current img {
transform: scale(1.15, 1.15);
transition: 5.5s ease-in 500ms;
}
}
</code></pre>
<p>至此，其实已经实现效果了。但是在图片切换的动画期间，放大的图片会由于丢失样式瞬间回到一倍大小，感官上有顿挫感。虽然可以加快切换动画的速度，但就显得不丝滑。（毕竟咱们是追求优雅的人，233）<br>
解决办法还是transition属性，通过给不活跃的图片设置一个一倍缩放，再加一个延迟。在切换动画期间就看不到缩小了</p>
<pre><code>.imgBox {
width: 100%;
img {
width: 100%;
height: 100vh;
object-fit: cover;
pointer-events: none;
//关键
transform: scale(1, 1);
transition: 1s ease-in 1000ms;
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/zyj-Blogs/p/17849020.html
頁:
[1]