animate 0.2.7

Effortless animation of HTML elements

Synopsis

Animate is a component for effortless creation of animations of CSS properties in a similar vein to jQuery's animate function.

How to use

Importing

If you don't plan on manually instantiating animations (see below), all you need is:

    import 'package:animate/animator.dart';

If you require custom easing algorithms, then add also:

    import 'package:animate/easing.dart';

Animating

Single properties

For animations of single CSS properties, use:

    Animator.create(Element  element ,
                    String   property,
                  [ Duration duration,
                    Function easing ] )

Example:

    Animator.create(node, "width: 200px", new Duration(seconds: 1));

Multiple properties

There is also a convenient method for creation of animations of multiple CSS properties, namely:

    Animator.createAll(Element       element,
                       List<String>  properties,
                     [ Duration      duration,
                       Function      easing ] )

Example:

    Animator.createAll(node,
                       [ "opacity: 1", "width: 200px" ],
                       new Duration(seconds: 1));

Default values

If duration or easing are not specified, the default values 400 and Easing.easeInQuad will be assumed, respectively.

Specifying easing algorithm

First you have to make sure you are importing the easing.dart source file:

    import 'package:animate/easing.dart';

Then it is only a matter of passing the actual static method onto the animation instantiation method. For example:

    Animator.create(node, "height: 175px", new Duration(seconds: 1), Easing.easeOutCubic);

Events

There are two events dispatched by Animation instances:

• start: triggered as the animation starts.
• end: dispatched right after the animation ends.

Listening to events is easy, as illustrated by the following snippet:

    Animator.create(node, "width: 200px", new Duration(seconds: 1))
      .on
      ..start(() => print("Animation started");
      ..end(() => print("Animation ended");

Manually creating animations

If you need manual control over animation creation, first ensure you are importing animation.dart:

    import 'packages:animate/animation.dart';

Then it is a matter of instantiating the Animation class and starting the actual animation:

    Animation myAnimation = new Animation(node, "line-height: 30px");
    myAnimation.start();

Unsupported features

So far the known unsupported features are:

• properties involving colours