Skip to main content

Transitions (View/Rescaler)

This guide will show a few basic examples of animated transitions on View/Rescaler components.

Configure inputs and output​

Start the compositor and configure 2 input streams and a single output stream as described in the "Simple scene" guide in the "Configure inputs and output" section.

Transition that changes the width of an input stream​

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  return (
    <View backgroundColor="#4d4d4d">
      <Rescaler
        width={beforeTransition ? 480 : 1280}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
    </View>
  )
}

After 2 seconds component changes state where width changes from 480 to 1280.

Output stream

Transition on one of the sibling components​

In the above scenario you saw how transition on a single component behaves, but let's see what happens with components that are not a part of the transition, but their size and position still depend on other components.

Add a second input stream wrapped with Rescaler, but without any transition options.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  return (
    <View backgroundColor="#4d4d4d">
      <Rescaler
        width={beforeTransition ? 480 : 1280}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
      <Rescaler>
        <InputStream inputId="input_2" />
      </Rescaler>
    </View>
  )
}

Output stream

Transition between different modes​

Currently, a state before the transition and after needs to use the same type of configuration. In particular:

  • It is not possible to transition a component between static and absolute positioning.
  • It is not possible to transition a component between using top and bottom fields (the same for left/right).
  • It is not possible to transition a component with known width/height to a state with dynamic width/height based on the parent layout.

Let's try the same example as in the first scenario with a single input, but instead, change the Rescaler component to be absolutely positioned in the second update.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  return (
    <View backgroundColor="#4d4d4d">
      {beforeTransition ? (
        <Rescaler width={480}>
          <InputStream inputId="input_1" />
        </Rescaler>
      ) : (
        <Rescaler width={1280} top={0} left={0} transition={{ durationMs: 2000 }} >
          <InputStream inputId="input_1" />
        </Rescaler>
      )}
    </View>
  );
}

As you can see on the resulting stream, the transition did not happen because the Rescaler component in the initial scene was using static positioning and after the update it was positioned absolutely.

Output stream

Different interpolation functions​

All of the above examples use default linear interpolation, but there are also a few other modes available.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  const top = beforeTransition ? 0 : 540;

  return (
    <View backgroundColor="#4d4d4d">
      <Rescaler
        width={320} height={180} top={top} left={0}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
      <Rescaler
        width={320} height={180} top={top} left={320}
        transition={{ durationMs: 2000, easingFunction: 'bounce' }}>
        <InputStream inputId="input_2" />
      </Rescaler>
      <Rescaler
        width={320} height={180} top={top} left={640}
        transition={{
          durationMs: 2000,
          easingFunction: {
            functionName: 'cubic_bezier',
            points: [0.65, 0, 0.35, 1],
          },
        }}>
        <InputStream inputId="input_3" />
      </Rescaler>
      <Rescaler
        width={320} height={180} top={top} left={960}
        transition={{
          durationMs: 2000,
          easingFunction: {
            functionName: 'cubic_bezier',
            points: [0.33, 1, 0.68, 1],
          },
        }}>
        <InputStream inputId="input_4" />
      </Rescaler>
    </View>
  );
}

Output stream

  • Input 1 - Linear transition
  • Input 2 - Bounce transition
  • Input 3 - Cubic Bézier transition with [0.65, 0, 0.35, 1] points (easeInOutCubic)
  • Input 4 - Cubic Bézier transition with [0.33, 1, 0.68, 1] points (easeOutCubic)

Check out other popular Cubic Bézier curves on https://easings.net.