我试图在反应中得到这个光标效果

Question

我试图在反应中得到这个光标效果

我是反应新手，我正在尝试在我的登陆页面上获得此光标效果，但如果不使用 jquery 就无法做到这一点...我已经查看过 React SyntheticEvents，但我不知道如何正确使用它们。

这是我想要达到的效果，但在反应中：

$(document)
  .mousemove(function(e) {
    $('.cursor')
      .eq(0)
      .css({
        left: e.pageX,
        top: e.pageY
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.pageX,
          top: e.pageY
        });
    }, 100);
  })

Run Code Online (Sandbox Code Playgroud)

body{
  background:black;
}

h1{
  color:white;
}

* {
    cursor: none;
}

.cursor {
    position: fixed;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events:none;
}
.cursors .cursor:nth-child(1) {
    background-color: #3a26fd;
    z-index: 100002;
}
.cursors .cursor:nth-child(2) {
    background-color: #f3f3f3;
    z-index: 100001;
    height: 9px;
    width: 9px;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursors">
<div class='cursor'></div>
<div class='cursor'></div>
<div class='cursor'></div>
</div>
<h1>Custom cursor</h1>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dm0*_*41e 6

我的解决方案使用 requestAnimationFrame 而不是 setTimeout 和 refs 来实现更短的绘制时间和更平滑的动画，此外，使用变换而不是绝对位置通常会提供更好的 FPS。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mouseX: 0,
      mouseY: 0,
      trailingX: 0,
      trailingY: 0,
    };
    this.cursor = React.createRef();
    this.cursorTrailing = React.createRef();
    this.animationFrame = null;
  }
  
  componentDidMount() {
    document.addEventListener('mousemove', this.onMouseMove);
    this.moveCursor();
  }
  
  componentWillUnmount() {
    document.removeEventListener('mousemove', this.onMouseMove)
    cancelAnimationFrame(this.animationFrame);
  }
  
  onMouseMove = (evt) => {
    const { clientX, clientY } = evt;
    this.setState({
      mouseX: clientX,
      mouseY: clientY,
    });
  }
  
  moveCursor = () => {
    const { mouseX, mouseY, trailingX, trailingY } = this.state;
    const diffX = mouseX - trailingX;
    const diffY = mouseY - trailingY;
    //  Number in expression is coeficient of the delay. 10 for example. You can play with it. 
    this.setState({
      trailingX: trailingX + diffX / 10,
      trailingY: trailingY + diffY / 10,
    },
    () => {
    // Using refs and transform for better performance.
      this.cursor.current.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
      this.cursorTrailing.current.style.transform = `translate3d(${trailingX}px, ${trailingY}px, 0)`;
      this.animationFrame = requestAnimationFrame(this.moveCursor);
    });
  }
  
  render = () => {
    return (
      <div className="container">
        <div className="cursors">
          <div 
            className="cursor"
            ref={this.cursor}
          />
          <div 
            className='cursor'
            ref={this.cursorTrailing}
          />
        </div>
      </div>
    );
  };
}

ReactDOM.render(<App />, document.getElementById('root'));

Run Code Online (Sandbox Code Playgroud)

* {
    cursor: none;
}

.container {
  background: black;
  min-height: 800px;
}

.cursor {
    position: fixed;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events:none;
}

.cursors .cursor:nth-child(1) {
    background-color: #3a26fd;
    z-index: 100002;
}
.cursors .cursor:nth-child(2) {
    background-color: #f3f3f3;
    z-index: 100001;
    height: 9px;
    width: 9px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>    
  </head>
  
  <body>
    <div id="root"></div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，5 月前
查看次数：	9945 次
最近记录：	5 年，6 月前