[What's New in RxJS 7] RxJS 7 animationFrames #blog #rxjs

rxjs-7_animationFrames.ts

import { animationFrames, combineLatest, concat } from "rxjs";
import { endWith, map, takeWhile } from "rxjs/operators";

const h1 = document.querySelector("h1")!;

combineLatest({
  x: tween(0, 200, 3600),
  y: wave(25, 1200, 3)
}).subscribe(({ x, y }) => {
  h1.style.transform = `translate3d(${x}px, ${y}px, 0)`;
});

function tween(start: number, end: number, duration: number) {
  const delta = end - start;

  return animationFrames().pipe(
    map(({ elapsed }) => elapsed / duration),
    takeWhile(percentage => percentage < 1),
    endWith(1),
    map(percentage => percentage * delta + start)
  );
}

function wave(length: number, duration: number, repeat = 1) {
  const tweens = [
    tween(0, length, duration / 4),
    tween(length, -length, duration / 2),
    tween(-length, 0, duration / 4)
  ];

  const animation = Array(repeat)
    .fill(tweens)
    .flat();

  return concat(...animation);
}