使用react实现一个简易的小球动画

import React, { useState, useRef } from 'react'
import './index.less'

export default function Drag() {

  // 此变量用来修改和定义小球的位置，小球的初始位置在左上角，位置可调
  const [balll, setBalll] = useState(0)
  const [ballt, setBallt] = useState(0)

  // 此变量用来修改和定义小球的动画
  const [tran, setTran] = useState('')

  // 获取小球DOM元素
  const ball = useRef(null)

  // 实现小球动画的函数
  const clickbtn = (e) => {
    console.log(e);
    // 修改小球位置，当触发点击事件时，将小球的位置修改为鼠标点击位置的X和Y轴
    setBalll(e.clientX)
    setBallt(e.clientY)

    // 设置小球动画
    setTran('left 0s, top 0s')

    setTimeout(() => {
      // 另一个动画
      setTran('left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in')

      // 设置小球下一个要去的位置，也就是动画中演示的左下角。
      setBalll(20)
      setBallt(700)
    }, 20)
  }

  return (
    <div>
      <div id='ball' ref={ball} style={{ top: ballt, left: balll, transition: tran }}></div>
      <button onClick={(e) => clickbtn(e)}>按钮</button>
    </div>
  )
}

样式代码

#ball {
  width: 15px;
  height: 15px;
  background: #f4ad52;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
}
button {
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 1000;
}

演示动画