弹跳动画

弹跳的活泼动画

弹跳动画

弹跳（Bounce）动画为元素添加弹跳的生动效果。

使用方法

import { transition } from '@ssgoi/react';
import { bounce } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...bounce()
    })}>
      Bounce me!
    </div>
  );
}

选项

interface BounceOptions {
  times?: number;       // 弹跳次数（默认：2）
  scale?: number;       // 弹跳时的缩放（默认：1.2）
  opacity?: boolean;    // 包含透明度效果（默认：true）
  spring?: {
    stiffness?: number; // 弹簧刚度（默认：500）
    damping?: number;   // 阻尼系数（默认：15）
  };
}

使用示例

// 多次弹跳
bounce({ times: 3 })

// 更大弹跳
bounce({ scale: 1.5 })

// 仅弹跳（无透明度）
bounce({ opacity: false })

// 柔和弹跳
bounce({ spring: { stiffness: 300, damping: 20 } })