Pile à balayer

Faites glisser la carte du dessus. Au-delà du seuil, elle s’envole ; sinon, elle revient avec un ressort.

dragInputuseAnimatedListenerAnimated.div

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

App.jsx

import { useRef, useState } from 'react';
import {
  Animated,
  dragInput,
  input,
  useAnimated,
  useAnimatedListener,
} from '@kkwaenggwari/animated';
import './styles.css';

const cards = [
  { id: 1, title: 'Kyoto', color: '#2854ff' },
  { id: 2, title: 'Lisbon', color: '#8fb0ff' },
  { id: 3, title: 'Oaxaca', color: '#5c7cff' },
  { id: 4, title: 'Tromsø', color: '#16181d' },
  { id: 5, title: 'Busan', color: '#4a6bff' },
];

function TopCard({ card, threshold, rotation, onGone }) {
  const node = useRef(null);
  const gone = useRef(false);

  const drag = useAnimated(
    { x: 0, y: 0 },
    (point) => {
      input(
        node,
        dragInput({
          x: point.x,
          y: point.y,
          settle: ({ projected }) =>
            Math.abs(projected.x) > threshold
              ? { x: Math.sign(projected.x) * 560, y: projected.y }
              : { x: 0, y: 0 },
        }),
      );
    },
    [threshold],
  );

  // Remove the card once it has flown away.
  useAnimatedListener(drag.x, ({ value }) => {
    if (!gone.current && Math.abs(value) > 540) {
      gone.current = true;
      onGone(value > 0 ? 'Keep' : 'Skip');
    }
  });

  const rotate = drag.x.interpolate({
    inputRange: [-300, 300],
    outputRange: [`${-rotation}deg`, `${rotation}deg`],
  });
  const keep = drag.x.interpolate({
    inputRange: [0, threshold],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });
  const skip = drag.x.interpolate({
    inputRange: [-threshold, 0],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });

  return (
    <div
      ref={node}
      className="card top"
      style={{
        background: card.color,
        transform: `translate(calc(${drag.x} * 1px), calc(${drag.y} * 1px)) rotate(${rotate})`,
      }}
    >
      <strong>{card.title}</strong>
      <span className="stamp keep" style={{ opacity: keep }}>
        Keep
      </span>
      <span className="stamp skip" style={{ opacity: skip }}>
        Skip
      </span>
    </div>
  );
}

export default function App({ threshold = 120, rotation = 16 }) {
  const [deck, setDeck] = useState(cards);
  const [last, setLast] = useState('Swipe the top card');

  const gone = (verdict) => {
    setLast(`${deck[0].title}: ${verdict}`);
    setDeck((list) => list.slice(1));
  };

  return (
    <div className="stage">
      <div className="deck">
        {deck.map((card, depth) => (
          <Animated.div
            key={card.id}
            className="slot"
            style={{ zIndex: deck.length - depth }}
            pose={{
              opacity: depth < 3 ? 1 : 0,
              transform: [{ translateY: depth * 16 }, { scale: 1 - depth * 0.06 }],
            }}
            tempo={{ spring: { stiffness: 260, damping: 22 } }}
          >
            {depth === 0 ? (
              <TopCard card={card} threshold={threshold} rotation={rotation} onGone={gone} />
            ) : (
              <div className="card" style={{ background: card.color }}>
                <strong>{card.title}</strong>
              </div>
            )}
          </Animated.div>
        ))}
        {deck.length === 0 && (
          <button type="button" className="reset" onClick={() => setDeck(cards)}>
            Deal again
          </button>
        )}
      </div>
      <output>{last}</output>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 32px 16px;
  overflow: hidden;
}

.deck {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 320px;
}

.slot {
  position: absolute;
  inset: 0;
}

.card {
  display: grid;
  align-content: end;
  width: 100%;
  height: 100%;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  font-size: 22px;
  user-select: none;
}

.card.top {
  position: relative;
  cursor: grab;
}

.stamp {
  position: absolute;
  top: 22px;
  padding: 4px 12px;
  border: 3px solid currentColor;
  border-radius: 10px;
  font-weight: 800;
  font-size: 18px;
}

.keep {
  left: 22px;
  color: #ffffff;
}

.skip {
  right: 22px;
  color: #d6e0ff;
}

.reset {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

output {
  color: #5b6070;
  font-size: 14px;
}

Comment ça marche

dragInput écrit le glisser dans x et y. settle choisit le point de repos à partir de la position projetée au relâchement.
La rotation et les tampons Keep et Skip sont des interpolations de la même valeur x.
useAnimatedListener retire la carte de l’état une fois qu’elle a quitté l’écran.
Les cartes du dessous sont des éléments Animated.div dont la pose dépend de leur profondeur : elles remontent en place quand la carte du dessus s’en va.

Pile à balayer

Comment ça marche

Plus d’exemples

Rechercher