react 购物车小球抛物线动画

React 购物车小球抛物线动画可以通过使用 React 动画库 `react-spring` 来实现。

首先，需要在组件中定义一个状态 `ballPosition`，用于控制小球的位置。然后，在点击加入购物车按钮时，通过 `react-spring` 的 `useSpring` 钩子设置小球的初始位置和最终位置，以及动画效果的配置参数，如下所示：

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

function ShoppingCart() {
  const [ballPosition, setBallPosition] = useState({ x: 0, y: 0 });

  const [springProps, set] = useSpring(() => ({
    from: { x: 0, y: 0 },
    to: { x: ballPosition.x, y: ballPosition.y },
    config: { tension: 1000, friction: 80 },
    onRest: () => setBallPosition({ x: 0, y: 0 }),
  }));

  const handleClick = (event) => {
    const rect = event.target.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;

    setBallPosition({ x, y });
    set({ to: { x, y: 0 } });
  };

  return (
    <div>
      <button onClick={handleClick}>加入购物车</button>
      <animated.div
        className="ball"
        style={{
          transform: springProps.to((x, y) => `translate3d(${x}px, ${y}px, 0)`),
        }}
      />
    </div>
  );
}

在上面的代码中，`useSpring` 钩子的 `from` 和 `to` 属性分别表示动画的起点和终点。`config` 属性用于配置动画的张力和摩擦力，`onRest` 属性指定动画结束后执行的回调函数。`animated.div` 组件用于包裹小球元素，其中 `style` 属性使用了 `springProps.to` 方法来获取动画效果的样式。

最后，还需要在 CSS 中定义小球的样式：

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

这样，就可以实现 React 购物车小球抛物线动画了。