当前位置：首页 > news >正文

React 实现老虎机滚动动画效果实例

news 2025/7/16 7:22:09

场景

React+css 实现老虎机滚筒动画效果

核心

核心在于，useRef、transition 、transform ,ref操作dome 控制背景transform 向下移动，添加动画的平滑过度

效果图

在这里插入图片描述

操作

1.滚动图片（自定义）
在这里插入图片描述
2、结构

开始/暂停

const rollersRef = useRef([]);  
//开始/暂停
const [isAnimating, setIsAnimating] = useState(false);// 开始/停止动画useEffect(() => {let interval;if (isAnimating) {resetRollers(); // 立即执行一次interval = setInterval(() => resetRollers(), 500);}//isAnimating为false时清除定时滚动 clearIntervalreturn () => {clearInterval(interval);};}, [isAnimating]);//滚动控制，初始为回到原位
const resetRollers = () => {
//初始无动画 位置为0rollersRef.current.style.transition = "none";rollersRef.current.style.transform = `translateY(${0}px)`;//时间戳 10后 感动到-2000位置setTimeout(() => {//滚动的效果，添加2S 动画过渡rollersRef.current.style.transition = `transform ${2}s cubic-bezier(0.17, 0.84, 0.44,  1)`;rollersRef.current.style.transform = `translateY(-${2000}px)`;}, 10);//与上面的循环执行相对于}

div

<div className="image-roller"><divclassName="image-list"ref={rollersRef}>//可以固定也可以动态<div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div><div className="ywbg"></div></div></div><div><button className={`btn ${isAnimating ? "btn-stop" : "btn-start"}`}onClick={() => setIsAnimating(!isAnimating)} >{isAnimating ? "停止滚动" : "开始滚动"}</button></div>

css

        .image-roller {position: relative;width: 200px;height: 100px;background: linear-gradient(to bottom, #444, #222);border-radius: 8px;color: white;font-size: 40px;font-weight: bold;text-align: center;line-height: 100px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);display: inline-block;margin: 5px;}.image-list {position: absolute;top: 0;left: 0;width: 100%;height: 100%;//   transition: transform 2s cubic-bezier(0.17, 0.84, 0.44, 1);}.ywbg {background: url(${YW}) no-repeat; //固定背景图，也可以动态赋值background-size: 100% 100%;width: 100%;height: 100%;}

      images: ["😀","🍎","🐶","🚗","😃","🍐","🐱","🚕","😄","🍊","🐭","🚙","😁","🍋","🐹","🚌","😆","🍌","🐰","🚎","😅","🍉","🦊","🏎","😂","🍇","🐻","🚓","🤣","🍓","🐼","🚑","😊","🍈","🐨","🚒","😇","🍒","🐯","🚐","🙂","🍑","🦁","🚚","🙃","🥭","🐮","🚛","😉","🍍","🐷","🚜","😌","🥥","🐸","🛴","😍","🥝","🐵","🚲","🥰","🍅","🐔","🛵",],