Animations

Navand's animations are very similar to the animations in CSS and JavaScript. They are applied to widgets when they have mounted in the node tree.

Implementation

In the following code, you can see the implementation of the Animation constructor:

const Animation({
  required this.keyframes,
  this.duration = Duration.zero,
  this.startDelay = Duration.zero,
  this.endDelay = Duration.zero,
  this.easing = Easing.linear,
  this.direction = AnimationDirection.normal,
  this.fillMode = AnimationFillMode.none,
  this.iterations = 1,
});

Examples

Simple Animations

In the following snippet, the span is animated once it mounts.

const DomWidget(
  'span'
  children: [
    Text('Hello World!')
  ],
  animation: Animation(
    keyframes: [
      Keyframe(offset: 0, style: Style({'color': 'red'})),
      Keyframe(offset: 0.5, style: Style({'color': 'green'})),
      Keyframe(offset: 1, style: Style({'color': 'blue'})),
    ],
    duration: Duration(milliseconds: 500),
    easing: Easing(0.4, 0, 0.2, 1),
  ),
);

Infinite Animations

In the following snippet, the span is animated when it mounts until it unmounts.

const DomWidget(
  'span'
  children: [
    Text('Hello World!')
  ],
  animation: Animation(
    keyframes: [
      Keyframe(offset: 0, style: Style({'color': 'red'})),
      Keyframe(offset: 0.5, style: Style({'color': 'green'})),
      Keyframe(offset: 1, style: Style({'color': 'blue'})),
    ],
    duration: Duration(milliseconds: 500),
    easing: Easing(0.4, 0, 0.2, 1),
    iterations: double.infinity,
  ),
);

Animations on Updates

In the following snippet, the span is animated once it mounts and every time name is updated. This behavior is achieved by passing a key to it that serializes name.

const DomWidget(
  'span'
  children: [
    Text('Hello World!')
  ],
  key: name.toString(),
  animation: Animation(
    keyframes: [
      Keyframe(offset: 0, style: Style({'color': 'red'})),
      Keyframe(offset: 0.5, style: Style({'color': 'green'})),
      Keyframe(offset: 1, style: Style({'color': 'blue'})),
    ],
    duration: Duration(milliseconds: 500),
    easing: Easing(0.4, 0, 0.2, 1),
  ),
);