React-簡單通用的拋物線動畫

一個簡單通用的 React 拋物線動畫
demoreact

Usage

import { parabola } from "./parabola"

...

onAnimate = () => {
  const config = {
    ballWrapper: this.$wrapper, //小球的父容器
    origin: this.$origin, //動畫起點DOM
    target: this.$target, //動畫目標DOM
    time: 600, //[可選]持續時間
    a: 0.02, //[可選]拋物線參數
    callback: this.updateLocation, //回調函數
    finish: animationDone, //[可選]動畫完成執行函數
    offset: 8 //[可選]動畫尺寸
  }
  parabola(config)
}
  
...

parabola方法簡易試圖

GitHub set up-w200

Github地址
相關文章
相關標籤/搜索