Transitions

Animating the swap of two nodes.

Partial. What is here is accurate, but the page is below its depth floor.

Examples#

Cut#

RouteNode buildRoute(Color color) {
  return RouteNode(
    transition: CutTransition(),
    children: [
      ShapeNode(paint: Paint()..color = color),
    ],
  );
}

final router = RouterNode(children: [buildRoute(RED)]);
final taps = TapInput(shape: .rectangle(DEMO_SIZE));
int state = 0;

taps.onTap(() {
  state += 1;
  router.go(buildRoute(state.isEven ? RED : GREEN));
});

addAll([router, taps]);

transitions.dart

Loading the scene…

Try tapping!

Fade#

RouteNode buildRoute(Color color) {
  return RouteNode(
    transition: FadeTransition(crossFade: true),
    children: [
      ShapeNode(paint: Paint()..color = color),
    ],
  );
}

final router = RouterNode(children: [buildRoute(RED)]);
final taps = TapInput(shape: .rectangle(DEMO_SIZE));
int state = 0;

taps.onTap(() {
  state += 1;
  router.go(buildRoute(state.isEven ? RED : GREEN));
});

addAll([router, taps]);

transitions.dart

Loading the scene…

Try tapping!

Slide#

RouteNode buildRoute(Color color) {
  return RouteNode(
    transition: SlideTransition(),
    children: [
      ShapeNode(paint: Paint()..color = color),
    ],
  );
}

final router = RouterNode(children: [buildRoute(RED)]);
final taps = TapInput(shape: .rectangle(DEMO_SIZE));
int state = 0;

taps.onTap(() {
  state += 1;
  router.go(buildRoute(state.isEven ? RED : GREEN));
});

addAll([router, taps]);

transitions.dart

Loading the scene…

Try tapping!

Curtain#

RouteNode buildRoute(Color color) {
  return RouteNode(
    transition: CurtainTransition(
      veil: ShapeNode(paint: Paint()..color = BLACK),
    ),
    children: [
      ShapeNode(paint: Paint()..color = color),
    ],
  );
}

final router = RouterNode(children: [buildRoute(RED)]);
final taps = TapInput(shape: .rectangle(DEMO_SIZE));
int state = 0;

taps.onTap(() {
  state += 1;
  router.go(buildRoute(state.isEven ? RED : GREEN));
});

addAll([router, taps]);

transitions.dart

Loading the scene…

Try tapping!

Wipe#

RouteNode buildRoute(Color color) {
  return RouteNode(
    transition: WipeTransition(
      panel: ShapeNode(paint: Paint()..color = BLACK),
    ),
    children: [
      ShapeNode(paint: Paint()..color = color),
    ],
  );
}

final router = RouterNode(children: [buildRoute(RED)]);
final taps = TapInput(shape: .rectangle(DEMO_SIZE));
int state = 0;

taps.onTap(() {
  state += 1;
  router.go(buildRoute(state.isEven ? RED : GREEN));
});

addAll([router, taps]);

transitions.dart

Loading the scene…

Try tapping!

Reference