svelte/motion

O módulo svelte/motion exporta duas funções, tweened e spring, para criação de memórias graváveis cujos valores mudam ao longo do tempo depois de set e update, ao invés de imediatamente.

tweenedpermalink

ts
function tweened<T>(
	value?: T | undefined,
	defaults?: TweenedOptions<T> | undefined
): Tweened<T>;

As memórias intercaladas atualizam seus valores sobre uma duração fixada. As seguintes opções estão disponíveis:

• delay (number, predefine 0) — milissegundos antes de começar
• duration (number | function, predefine 400) — milissegundos que a intercalação dura
• easing (function, predefine t => t) — uma função de atenuação
• interpolate (function) — consulte abaixo

store.set e store.update podem aceitar um segundo argumento options que sobreporão as opções passadas sobre a instância.

Ambas funções retornam uma promessa que resolve quando a intercalação terminar. Se a intercalação for interrompida a promessa nunca resolverá.

Fora da caixa, a Svelte interpolará entre dois números, dois vetores ou dois objetos (enquanto os vetores e objetos forem da mesma 'forma' e suas propriedades 'folha' também forem números):

<script>
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  const size = tweened(1, {
    duration: 300,
    easing: cubicOut
  });

  function handleClick() {
    // isto é equivalente ao `size.update(n => n + 1)`
    $size += 1;
  }
</script>

<button on:click={handleClick} style="transform: scale({$size}); transform-origin: 0 0">
  embiggen
</button>

Se o valor inicial for undefined ou null, a mudança do primeiro valor surtirá efeito imediatamente. Isto é útil quando temos valores intercalados que são baseados nas propriedades, e não queremos nenhum movimento quando o componente interpretar em primeiro lugar:

ts
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
 
const size = tweened(undefined, {
  duration: 300,
  easing: cubicOut
});
 
$: $size = big ? 100 : 10;

A opção interpolate permite-nos intercalar entre quaisquer valores arbitrários. Deve ser uma função (a, b) => t => value, onde a é o valor inicial, b é o valor objetivo, t é um número entre 0 e 1, e value é o resultado. Por exemplo, podemos usar o pacote d3-interpolate para interpolar suavemente entre duas cores:

<script>
  import { interpolateLab } from 'd3-interpolate';
  import { tweened } from 'svelte/motion';

  const colors = ['rgb(255, 62, 0)', 'rgb(64, 179, 255)', 'rgb(103, 103, 120)'];

  const color = tweened(colors[0], {
    duration: 800,
    interpolate: interpolateLab
  });
</script>

{#each colors as c}
  <button style="background-color: {c}; color: white; border: none;" on:click={(e) => color.set(c)}>
    {c}
  </button>
{/each}

<h1 style="color: {$color}">{$color}</h1>

springpermalink

ts
function spring<T = any>(
	value?: T | undefined,
	opts?: SpringOpts | undefined
): Spring<T>;

Uma memória spring muda gradualmente para o seu valor objetivo baseada no seus parâmetros stiffness e damping. Visto que as memórias tweened mudam seus valores sobre uma duração fixada, as memórias spring mudam sobre uma duração que é determinada por sua velocidade, permitindo movimentação de aparência mais natural em muitas situações. As seguintes opções estão disponíveis:

• stiffness (number, predefine 0.15) — um valor entre 0 e 1 onde mais alto significa um salto 'mais apertado'.
• damping (number, predefine 0.8) — um valor entre 0 e 1 onde mais baixo significa um salto 'mais enérgico'.
• precision (number, predefine 0.01) — determina o limiar no qual o salto é considerado ter 'acalmado', onde mais baixo significa mais preciso.

Todos as opções acima podem ser mudadas enquanto o salto estiver em movimento, e surtirão efeito imediato:

ts
import { spring } from 'svelte/motion';
 
const size = spring(100);
size.stiffness = 0.3;
size.damping = 0.4;
size.precision = 0.005;

Tal como acontece com as memórias tweened, set e update retornam uma promessa que resolve se o salto acalmar-se.

Ambas set e update podem receber um segundo argumento — um objeto com as propriedades hard ou soft. { hard: true } define o valor do alvo imediatamente; { soft: n } preserva a velocidade existente por n segundos antes de acalmar. { soft: true } é equivalente ao { soft: 0.5 }:

ts
import { spring } from 'svelte/motion';
 
const coords = spring({ x: 50, y: 50 });
// atualiza o valor imediatamente
coords.set({ x: 100, y: 200 }, { hard: true });
// preserva a velocidade existente por 1s
coords.update(
  (target_coords, coords) => {
    return { x: target_coords.x, y: coords.y };
  },
  { soft: 1 }
);

Consulte um exemplo completo no tutorial de salto.

<script>
  import { spring } from 'svelte/motion';

  const coords = spring(
    { x: 50, y: 50 },
    {
      stiffness: 0.1,
      damping: 0.25
    }
  );
</script>

Se o valor inicial for undefined ou null, a mudança do primeiro valor surtirá efeito imediatamente, tal como acontece com os valores tweened (consulte acima):

ts
import { spring } from 'svelte/motion';
 
const size = spring();
$: $size = big ? 100 : 10;

Tipospermalink

Springpermalink

ts
interface Spring<T> extends Readable<T> {…}

ts
set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;

ts
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;

ts
precision: number;

ts
damping: number;

ts
stiffness: number;

Tweenedpermalink

ts
interface Tweened<T> extends Readable<T> {…}

ts
set(value: T, opts?: TweenedOptions<T>): Promise<void>;

ts
update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;