Liikejuliste

Silmukkana toistuva juliste, jossa jokainen elementti on raita yhdellä siirrettävällä aikajanalla.

useTimeline

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

App.jsx

import { useTimeline } from '@kkwaenggwari/animated';
import './styles.css';

const bars = [0.35, 0.8, 0.55, 1, 0.7, 0.45, 0.9, 0.6];

export default function App({ duration = 4000, repeat = true }) {
  const poster = useTimeline(
    {
      open: { values: [0, 1, 1, 0], times: [0, 0.3, 0.8, 1] },
      spin: ['0deg', '180deg', '360deg'],
      ring: { values: [0.4, 1], at: duration * 0.2, duration: duration * 0.4 },
      title: { values: ['40px', '0px'], at: duration * 0.45, duration: duration * 0.3 },
      fade: { values: [0, 1], at: duration * 0.45, duration: duration * 0.3 },
    },
    { duration, repeat: repeat ? Infinity : 0, repeatDelay: 600 },
    [duration, repeat],
  );
  const { open, spin, ring, title, fade } = poster.values;

  return (
    <div className="stage">
      <div className="poster">
        <span className="ring" style={{ transform: `rotate(${spin}) scale(${ring})` }} />
        <div className="bars">
          {bars.map((height, index) => (
            <i key={index} style={{ transform: `scaleY(calc(${open} * ${height}))` }} />
          ))}
        </div>
        <h2 style={{ opacity: fade, transform: `translateY(${title})` }}>Night Signal</h2>
      </div>
      <div className="player">
        <button type="button" onClick={() => poster.play()}>
          Play
        </button>
        <button type="button" onClick={() => poster.reverse()}>
          Reverse
        </button>
        <button type="button" onClick={() => poster.pause()}>
          Pause
        </button>
        <span className="progress">
          <b style={{ transform: `scaleX(${poster.progress})` }} />
        </span>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.poster {
  position: relative;
  display: grid;
  place-items: center;
  height: 360px;
  border-radius: 20px;
  background: #0b1440;
  overflow: hidden;
}

.ring {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 18px solid #8fb0ff;
  border-right-color: #5c7cff;
  border-bottom-color: #2854ff;
  border-radius: 50%;
}

.bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.bars i {
  width: 14px;
  height: 100%;
  border-radius: 7px;
  background: #fff;
  transform-origin: bottom;
}

.poster h2 {
  position: absolute;
  bottom: 28px;
  margin: 0;
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.player button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.progress {
  flex: 1;
  min-width: 120px;
  height: 8px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.progress b {
  display: block;
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

Miten se toimii

useTimeline määrittelee nimetyt raidat avainruutuineen, alkuaikoineen ja kestoineen millisekunteina.
Kaikki raidat johdetaan yhdestä edistymismuuttujasta, joten koko juliste kirjoittaa yhden arvon ruutua kohden.
play, reverse ja pause ohjaavat kelloa; edistymispalkki on sama arvo.

Liikejuliste

Miten se toimii

Lisää esimerkkejä

Haku