The (Finite) State of

Reactive Animations

@davidkpiano · RxJS Live 2019

📞

🔙

🙏🤐

🅰️⚓️

🅰️🏋️‍♀️

🔭

🅰️

⚽️🎾🎱

Callbacks

Promises

Async-Await

Observables

Time is the most neglected variable.

A "reactive animation" is one involving
discrete changes, due to events.

Discrete

Continuous

- Conal Elliot and Paul Hudak, 1997

By allowing programmers to
express the "what" of an interactive
animation, one can hope to then
automate the "how" of its presentation.

~~RxJS Core Team Member~~
~~Work at Google~~
~~Google Developer Expert~~
~~Angular Developer~~

Made a PR once (rejected)
Work at Microsoft
Googles things to pretend I'm an expert developer
React Developer

@davidkpiano 🎹

keyframe.rs

https://codepen.io/davidkpiano/pen/aNKxeo

sorry conference wifi

codepen.io/davidkpiano/pen/xLKBpM

https://codepen.io/davidkpiano/pen/qarwOA

I warned you there would be lots of demos

const animFrame$ =
  interval(0, animationFrameScheduler);

const smoothMove$ = animFrame$.pipe(
  withLatestFrom(move$, (frame, move) => move)
);

Animation Frames

In RxJS

.pipe(withLatestFrom(ball$, 
  (frame, ball) => ball))

animFrame$

const lerp = (current, next) => {
  const dx = next.x - current.x;
  const dy = next.y - current.y;
  const ratio = 0.1;

  return {
    x: current.x + dx * ratio;
    y: current.y + dy * ratio;
  };
};

200

300

deltaX = 300 - 200 = 100

100 * 0.1 = 10

200 + 10 = 210

210

300

100

Linear Interpolation (LERP)

1.0

0.5

0.2

ball$.pipe(
  scan((a, b) => lerp(a, b)))

1.5

1.75

2.5

2.75

const lerp = // ...

const animFrame$ = // ...

const smoothMove$ = animFrame$.pipe(
  withLatestFrom(move$, (frame, move) => move)
  scan(lerp));

smoothMove$.subscribe(values => {
  // render values
});

https://css-tricks.com/animated-intro-rxjs/

oh my 🐐

https://codepen.io/davidkpiano/pen/vxZEoO

https://codepen.io/davidkpiano/pen/c188c1c723f79cebe74a151f64c50574

STREAM

VALUES

CUSTOM PROPERTIES

REACTIVE STYLES

Everything is a stream

...is not enough

origami.design

invisionapp.com/studio

principleformac.com

drama.app

Animations are transitions

between states

due to events

Finite state machines

and statecharts

Finite state machines

have one initial state
a finite number of states
a finite number of events
a mapping of state transitions
triggered by events
a finite number of final states

Idle

Pending

Rejected

Fulfilled

Fetch

Resolve

reject

promisejs.org/implementing

Fulfilled

Rejected

Idle

Searching...

Success

Failure

RESOLVE

REJECT

🚫

SEARCH?

Define transitions between
states & events

function searchReducer(state = 'idle', event) {
  switch (state) {
    case 'idle':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    case 'searching':
      switch (event.type) {
        case 'RESOLVE':
          return 'success';
        case 'REJECT':
          return 'failure';
        default:
          return state;
      }
    case 'success':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    case 'failure':
      switch (event.type) {
        case 'SEARCH':
          return 'searching';
        default:
          return state;
      }
    default:
      return state;
  }
}

FSMs with switch/case

const machine = {
  initial: 'idle',
  states: {
    idle: {
      on: { SEARCH: 'searching' }
    },
    searching: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        SEARCH: 'searching'
      }
    },
    success: {
      on: { SEARCH: 'searching' }
    },
    failure: {
      on: { SEARCH: 'searching' }
    }
  }
};

Define transitions between
states & events

FSMs with
object mapping

const transition = (state, event) => {
  return machine
    .states[state] // current state
    .on[event]     // next state
    || state;      // or same state
}

merge(...)

  scan(reducer, initial)

initial

pipe(

)

import { fromEvent, fromEventPattern, merge } from 'rxjs';
import { scan } from 'rxjs/operators';

const pan$ = fromEventPattern(/* ... */);
const esc$ = fromEvent(/* ... */);
const other$ = fromEventPattern(/* ... */);

const event$ = merge(pan$, esc$, other$);

const initialState = {
  // ...
}

const state$ = event$.pipe(
  scan((state, event) => {
    // state machine logic here!
  }, initialState)
);

state$.subscribe(state => {
  // render state
});

https://codepen.io/davidkpiano/pen/mAoaxP

https://codepen.io/davidkpiano/pen/vmXErw

github.com/davidkpiano/xstate

npm install xstate

xstate.js.org



const machine = {
  initial: 'idle',
  states: {
    idle: {
      on: { SEARCH: 'searching' }
    },
    searching: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        SEARCH: 'searching'
      }
    },
    success: {
      on: { SEARCH: 'searching' }
    },
    failure: {
      on: { SEARCH: 'searching' }
    }
  }
};

import { Machine } from 'xstate';

const machine = Machine({
  initial: 'idle',
  states: {
    idle: {
      on: { SEARCH: 'searching' }
    },
    searching: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        SEARCH: 'searching'
      }
    },
    success: {
      on: { SEARCH: 'searching' }
    },
    failure: {
      on: { SEARCH: 'searching' }
    }
  }
});

import { Machine } from 'xstate';

const machine = Machine({
  // ...
});

const searchingState = machine
  .transition('idle', 'searching');

searchingState.value;
// => 'searching'

import { Machine, interpret } from 'xstate';

const machine = Machine({
  // ...
});

const service = interpret(machine)
  .onTransition(state => console.log(state))
  .start();

service.send('SEARCH');
// State {
//   value: 'searching',
//   ...
// }

https://codepen.io/davidkpiano/pen/2e92f066179f26154a90870f06c004af

https://codepen.io/davidkpiano/pen/0069791abf6250e65b6a42ac8e2a213c?editors=0010

https://codepen.io/davidkpiano/pen/0069791abf6250e65b6a42ac8e2a213c

codepen.io/davidkpiano/pen/zWrRye

const weekMachine = Machine({
  // ...
  states: {
    dragging: {
      invoke: [
        { src: mouseMove$ },
        { src: mouseUp$ }
      ],
      on: {
        mousemove: {
          actions: drag
        },
        mouseup: [
          { target: "selected", cond: isNotTrashElement },
          { target: "disposed", actions: showDaysRemoved }
        ]
      }
    },
    selected: {/* ... */},
    disposed: {/* ... */}
  }
});

dragging

selected

disposed

entry: subscribe mouseMove$

entry: subscribe mouseUp$

exit: unsubscribe mouseMove$

exit: unsubscribe mouseUp$

mouseup

MOUSEMOVE

mouseMove$

mouseUp$

dragging

selected

disposed

grabbing

mouseDown$

import { interpret } from 'xstate';

const weekService = interpret(weekMachine)
  .start(); // start interpreting the machine

// services are observables!
weekService.subscribe(state => {
  console.log(state);
});