Dock magnetis

Ikon membesar saat pointer lewat, mendorong tetangganya, lalu tenang saat pointer pergi.

moveInputfollowuseAnimatedCSSmultiply

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

App.jsx

import { useRef } from 'react';
import {
  follow,
  input,
  moveInput,
  multiply,
  spring,
  useAnimated,
  useAnimatedCSS,
  useAnimatedValue,
} from '@kkwaenggwari/animated';
import './styles.css';

const apps = [
  ['M', '#2854ff'],
  ['C', '#8fb0ff'],
  ['P', '#5c7cff'],
  ['N', '#16181d'],
  ['S', '#4a6bff'],
  ['T', '#7d9bff'],
  ['F', '#1a33c7'],
  ['V', '#3d63ff'],
  ['K', '#1f3fd6'],
  ['R', '#1f2937'],
];

const size = 52;

function Icon({ letter, color, index, count, pointer, presence, magnify }) {
  // Where this icon sits on the track, in the same [-1, 1] units as the pointer.
  const center = ((index + 0.5) / count) * 2 - 1;
  const reach = 5 / count;
  const proximity = pointer.interpolate({
    inputRange: [center - reach, center, center + reach],
    outputRange: [0, 1, 0],
    extrapolate: 'clamp',
  });
  const grow = useAnimatedCSS(multiply(proximity, presence));
  const extra = size * (magnify - 1);

  return (
    <div
      className="icon"
      style={{
        background: color,
        width: `calc(${size}px + ${grow} * ${extra}px)`,
        height: `calc(${size}px + ${grow} * ${extra}px)`,
      }}
    >
      {letter}
    </div>
  );
}

export default function App({ count = 8, magnify = 1.8, stiffness = 300, damping = 26 }) {
  const track = useRef(null);
  const pointer = useAnimatedValue(0);
  const presence = useAnimatedValue(0);

  useAnimated(
    0,
    () => {
      input(track, moveInput({ x: pointer, relative: true }));
    },
    [pointer],
  );

  // The icons follow a smoothed copy of the pointer.
  const smooth = useAnimated(
    0,
    (value) => {
      follow(value, pointer, { stiffness, damping });
    },
    [pointer, stiffness, damping],
  );

  const show = (toValue) => spring(presence, { toValue, stiffness: 260, damping: 24 }).start();

  return (
    <div className="stage">
      <div
        ref={track}
        className="track"
        style={{ width: count * (size + 10) }}
        onPointerEnter={() => show(1)}
        onPointerLeave={() => show(0)}
      >
        <div className="dock">
          {apps.slice(0, count).map(([letter, color], index) => (
            <Icon
              key={letter}
              letter={letter}
              color={color}
              index={index}
              count={count}
              pointer={smooth}
              presence={presence}
              magnify={magnify}
            />
          ))}
        </div>
      </div>
      <p>Move the pointer along the dock.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 18px;
  min-height: 300px;
  padding: 28px 16px 32px;
  background: #eef2ff;
}

.track {
  position: relative;
  height: 150px;
}

.dock {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px #e4e6ef;
  transform: translateX(-50%);
}

.icon {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 28%;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.stage p {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

Cara kerjanya

moveInput menulis posisi pointer pada trek, dari -1 sampai 1, ke satu nilai.
follow membuat nilai kedua mengikutinya dengan pegas, sehingga gerak cepat tetap mulus.
Setiap ikon menginterpolasi kedekatannya sendiri dan mengalikannya dengan nilai hover menggunakan useAnimatedCSS, karena hasil kali dua nilai bukan ekspresi calc().
Lebarnya berubah, jadi tetangga bergeser dalam tata letak normal. Tidak ada yang dirender ulang saat pointer bergerak.

Dock magnetis

Cara kerjanya

Contoh lainnya

Cari