为基本的 React 老虎机创建动画

Question

我对反应还很陌生，一个简单的老虎机是我的第一个迷你项目。目前我已经完成了按下按钮后显示随机表情符号的逻辑。对我来说，下一步是在设计和添加获胜/失败的逻辑以及硬币计数器等之前添加动画。

https://codepen.io/fmressel/pen/vRLerN

这个codepen正是我想要的东西，但正如你所看到的，它的结构与我的代码（如下）完全不同，我正在抓紧时间试图找出如何获得类似的东西来工作对于我的项目。

非常感谢任何帮助！

import React, { Component } from 'react'
import Contents from './Contents'
import './mainslots.css'


class Slots extends Component {
    static defaultProps = {
        fruits: ["", "", "", "", "", ""]
    };

    

    constructor(props) {
        super(props);
        this.state = {fruit1: '', fruit2: '', fruit3: '', rolling: false};
        this.roll = this.roll.bind(this);
    };

    roll = () => {
        const dFruit1 = this.props.fruits[
            Math.floor(Math.random() * this.props.fruits.length)
        ];
        const dFruit2 = this.props.fruits[    
            Math.floor(Math.random() * this.props.fruits.length)
        ];

        const dFruit3 = this.props.fruits[    
            Math.floor(Math.random() * this.props.fruits.length)
        ];


        this.setState({fruit1: dFruit1, fruit2: dFruit2, fruit3: dFruit3, rolling: true});
        setTimeout(() => {
            this.setState({ rolling: false });
        }, 700)
    }
    

    render(){
        return(
            <div className="SlotMachine">
                <div className="SlotsContainer">
                {this.state.fruit1}
                {this.state.fruit2}
                {this.state.fruit3}
                </div>

                <button className="spinner" onClick={this.roll} disabled={this.state.rolling}>
                {this.state.rolling ? "Spinning..." : "Spin"}
                </button>
            </div>
        );
    }
}

export default Slots;

import React, { Component } from 'react'

class Contents extends Component {

    Fruits = ["", "", "", "", "", ""];


    render() {
        return(
            <div className="emptys">
                {this.props.roll}

            </div>
        )
    }
}

export default Contents

Answer 1

干得好，

开发起来很有趣:)，你可以运行下面的代码片段来查看，我已经在代码中添加了注释，这将使事情变得清晰，请看一下，

希望这会有所帮助，

const { createRef , Component } = React;

class Slots extends Component {
  static defaultProps = {
    fruits: ["", "", "", "", "", ""]
  };

  constructor(props) {
    super(props);
    this.state = { fruit1: "", fruit2: "", fruit3: "", rolling: false };

    // get ref of dic onn which elements will roll
    this.slotRef = [createRef(), createRef(), createRef()];
  }

  // to trigger roolling and maintain state
  roll = () => {
    this.setState({
      rolling: true
    });
    setTimeout(() => {
      this.setState({ rolling: false });
    }, 700);

    // looping through all 3 slots to start rolling
    this.slotRef.forEach((slot, i) => {
      // this will trigger rolling effect
      const selected = this.triggerSlotRotation(slot.current);
      this.setState({ [`fruit${i + 1}`]: selected });
    });

  };

  // this will create a rolling effect and return random selected option
  triggerSlotRotation = ref => {
    function setTop(top) {
      ref.style.top = `${top}px`;
    }
    let options = ref.children;
    let randomOption = Math.floor(
      Math.random() * Slots.defaultProps.fruits.length
    );
    let choosenOption = options[randomOption];
    setTop(-choosenOption.offsetTop + 2);
    return Slots.defaultProps.fruits[randomOption];
  };

  render() {
    return (
      <div className="SlotMachine">
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[0]}>
              {Slots.defaultProps.fruits.map((fruit, i) => (
                <div key={i}>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[1]}>
              {Slots.defaultProps.fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={this.slotRef[2]}>
              {Slots.defaultProps.fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div
          className={!this.state.rolling ? "roll rolling" : "roll"}
          onClick={!this.state.rolling && this.roll}
          disabled={this.state.rolling}
        >
          {this.state.rolling ? "Rolling..." : "ROLL"}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Slots />, document.getElementById('react-root'));

.App {
  font-family: sans-serif;
  text-align: center;
}

.slot {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 80px;
}

section {
  position: absolute;
  border-radius: 15px !important;
  border: 3px solid black !important;
  width: 70px;
  height: 70px;
  overflow: hidden;
  background-color: grey;
  border-radius: 2px;
  border: 1px solid lightgrey;
  color: white;
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  line-height: 60px;
  cursor: default;
}

.container {
  position: absolute;
  top: 2px;
  width: 100%;
  transition: top ease-in-out 0.5s;
  text-align: center;
}

.roll {
  width: 215px;
  cursor: pointer;
  background-color: yellow;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border-radius: 20px;
  border: 3px solid black;
}

.rolling {
  animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
  0% {
    color: #000;
  }
  49% {
    color: #000;
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: #000;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

我将 @VivekDoshi 的答案重新创建为反应 FC。

const { useRef, useState} = React;

function Slots(){
  const [fruit1,setFruit1] = useState("");
  const [fruit2,setFruit2] = useState("");
  const [fruit3,setFruit3] = useState("");
  const [rolling,setRolling] = useState(false);
  let slotRef = [useRef(null), useRef(null), useRef(null)];
  const fruits = ["", "", "", "", "", ""]
  
  // to trigger roolling and maintain state
  const roll = () => {
    setRolling(true);
    setTimeout(() => {
      setRolling(false);
    }, 700);

    // looping through all 3 slots to start rolling
    slotRef.forEach((slot, i) => {
      // this will trigger rolling effect
      const selected = triggerSlotRotation(slot.current);
      if(i+1 == 1)
        setFruit1(selected);
      else if(i+1 == 2)
        setFruit2(selected);
      else 
        setFruit3(selected);
     });
  };
  
  // this will create a rolling effect and return random selected option
  const triggerSlotRotation = ref => {
    function setTop(top) {
      ref.style.top = `${top}px`;
    }
    let options = ref.children;
    let randomOption = Math.floor(
      Math.random() * fruits.length
    );
    let choosenOption = options[randomOption];
    setTop(-choosenOption.offsetTop + 2);
    return fruits[randomOption];
  };

  return (
      <div className="SlotMachine">
        <div className="slot">
          <section>
            <div className="container" ref={slotRef[0]}>
              {fruits.map((fruit, i) => (
                <div key={i}>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={slotRef[1]}>
              {fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="slot">
          <section>
            <div className="container" ref={slotRef[2]}>
              {fruits.map(fruit => (
                <div>
                  <span>{fruit}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div
          className={!rolling ? "roll rolling" : "roll"}
          onClick={!rolling && roll}
          disabled={rolling}>
          {rolling ? "Rolling..." : "ROLL"}
        </div>
      </div>
    ); 
};

ReactDOM.render(<Slots />, document.getElementById('react-root'));

.App {
  font-family: sans-serif;
  text-align: center;
}

.slot {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 80px;
}

section {
  position: absolute;
  border-radius: 15px !important;
  border: 3px solid black !important;
  width: 70px;
  height: 70px;
  overflow: hidden;
  background-color: grey;
  border-radius: 2px;
  border: 1px solid lightgrey;
  color: white;
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  line-height: 60px;
  cursor: default;
}

.container {
  position: absolute;
  top: 2px;
  width: 100%;
  transition: top ease-in-out 0.5s;
  text-align: center;
}

.roll {
  width: 215px;
  cursor: pointer;
  background-color: yellow;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border-radius: 20px;
  border: 3px solid black;
}

.rolling {
  animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
  0% {
    color: #000;
  }
  49% {
    color: #000;
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: #000;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>