Mıknatıslı dock

İşaretçi geçerken simgeler büyür, komşularını iter ve işaretçi gidince yatışır.

moveInputfollowuseAnimatedCSSmultiply

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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;
}

Nasıl çalışır

moveInput işaretçinin şerit üzerindeki konumunu, -1'den 1'e, tek bir değere yazar.
follow ikinci bir değerin onu yayla izlemesini sağlar; hızlı hareket bile akıcı kalır.
Her simge kendi yakınlığını interpolasyonla hesaplar ve useAnimatedCSS ile bir üzerine gelme değeriyle çarpar, çünkü iki değerin çarpımı calc() ifadesi değildir.
Genişlik değişir, bu yüzden komşular normal düzende kayar. İşaretçi hareket ederken hiçbir şey yeniden render edilmez.

Mıknatıslı dock

Nasıl çalışır

Daha fazla örnek

Ara