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

简介: 使用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;

演示动画

相关文章
|
3月前
|
前端开发 Java API
【第49期】一文了解React动画
【第49期】一文了解React动画
75 0
|
3月前
|
前端开发
React 购物车小球动画
React 购物车小球动画
|
4月前
|
前端开发
react函数组件购物车小球动画实现
react函数组件购物车小球动画实现
33 0
react函数组件购物车小球动画实现
|
6月前
|
前端开发
React-组件-原生动画 和 React-组件-性能优化
React-组件-原生动画 和 React-组件-性能优化
40 0
|
8月前
|
前端开发
react路由动画?
react路由动画?
|
前端开发
滚动页面触发相应位置动画 ---react
滚动页面触发相应位置动画 ---react
|
10月前
|
前端开发 容器
React动画
React动画
48 0
|
11月前
|
JavaScript 前端开发 API
前端动画必知必会:React 和 Vue 都在用的 FLIP 思想实战。
在 Vue 的官网中的过渡动画章节中,可以看到一个很酷炫的动画效果
|
前端开发
React滚动页面触发相应位置动画
滚动过的距离+当前窗口的高度>元素到顶部窗口的距离 ===>则触发动画
|
移动开发 前端开发 JavaScript
ReactNative动画研究与实践
本次文章的题目为《ReactNative动画研究与实践》,既然叫研究,那我们就争取一次将RN动画相关的内容都说清楚,提出问题-论证问题-解决问题的方式来研究。RN动画之前在work上面写过一次,不过感觉写得不是很好,本次重新捋一次思路重写整理下分享给大家。 ### 问题 - ReactNative动画支持的怎么样? - ReactNative的动画使用起来方便吗? - ReactNat
4942 0