# tween-animation-2d — 2D Tween Animation

Programmatic smooth transitions for position, scale, rotation, and opacity. Uses easing functions to create polished UI and game feel.

## Easing Functions

| Name | Effect | Best For |
|------|--------|----------|
| `linear` | Constant speed | Progress bars, counters |
| `easeIn` | Slow start, fast end | Objects falling, accelerating |
| `easeOut` | Fast start, slow end | Objects landing, decelerating |
| `easeInOut` | Smooth start and end | UI panels, modal transitions |
| `bounce` | Elastic bounce at end | Button press, item pickup |
| `elastic` | Spring overshoot | Score popup, notification |

## Common Presets

```js
// Scale pop-in (item spawn)
{ property: 'scale', from: 0, to: 1, duration: 300, easing: 'elastic' }

// Fade out
{ property: 'alpha', from: 1, to: 0, duration: 200, easing: 'easeIn' }

// Float up (score text)
{ property: 'y', from: 0, to: -60, duration: 800, easing: 'easeOut' }

// Bounce in
{ property: 'scale', from: 1.2, to: 1, duration: 400, easing: 'bounce' }
```

## Engine References

- **PlayCanvas**: `ref/playcanvas.js` — uses `pc.Tween`
- **Phaser 3**: `ref/phaser.js` — uses `this.tweens.add()`