animation 0.5.24

  • README.md
  • Installing
  • Versions
  • 58

Animation

Animate elements on a web page with Dart. Similar to jQuery's animate().

Features

  • Simple and quick animations via the simple animate() function.
  • More powerful ElementAnimation class for "low level" operations.
    • Pause, stop, resume, delay, forward, finish, reset.
  • Queueing animations with AnimationQueue.
    • Clearing the queue.
    • Jumping between animations in the queue.
    • Supports the same pause, stop, resume, finish features as with ElementAnimation.
    • Manipulating the queue (remove, add).
  • Run multiple animations at the same time (why not?).
  • Uses requestAnimationFrame() instead of setTimeout() for optimal performance and smoother animations.
  • Different easing options available (easy-in, ease-out, ease-in-out, linear) and with different algorithms (quadratic, sine, etc.).

Changelog

#####Breaking changes with v0.5.20

  • Renamed StyleAnimation to ElementAnimation. Reason: we now also animate non-styles such as scrollTop. The class was always HTMLElement-specific so the new name makes sense.
  • Renamed easingType parameter for animate() to easing for better UX. Also renamed EasingType class to Easing.

Missing features

Effects (fade, drop, slide, etc.)

Support for effects will come at some point.

Color and box/text-shadow animations

Currently you can't animate colors or shadows, this will change at some point.

Examples

Let's assume we have this HTML:

<div id="box" style="left: 100px;"></div>

Quick and simple

The simplest way to animate elements is to use the top-level helper function animate():

import 'dart:html';
import 'package:animation/animation.dart');

main() {
  var el = query('#box');
  
  var properties = {
    'left': 1000,
    'top': 350
  };

  animate(el, properties: properties, duration: 5000);
}

Using ElementAnimation class

The animate() function uses ElementAnimation class internally. This class is more useful in "advanced" scenarios. The following example will not run the animation directly, instead the animation will be instantiated first, and after 2 seconds we run the animation.

import 'dart:html';
import 'package:animation/animation.dart');

main() {
  var el = query('#box');
  
  var anim = new ElementAnimation(el)
    ..duration = 5000
    ..properties = {
      'left': 1000,
      'top': 350
    };

  // Let's wait 2 seconds before we run the animation for the sake of demoing this for you.
  new Timer(2000, anim.run);
}

Manipulating animations

You may manipulate animations in a few ways. In this example we will run an animation for 2.5 seconds, pause it for 2.5 seconds and then let it finish.

import 'dart:html';
import 'package:animation/animation.dart');

main() {
  var el = query('#box');
  
  var anim = new ElementAnimation(el)
    ..duration = 5000
    ..properties = {
      'left': 1000,
      'top': 350
    }
    ..run(); // Run immediately.

  // Let the animation run for 2.5 seconds, then we pause it.
  new Timer(2500, () {
    anim.pause();

    // Let it be paused for 2.5 seconds, then resume.
    new Timer(2500, anim.resume);
  });
}

animate() helper returns an ElementAnimation

The previous code could also be written using the animate() function if you will:

import 'dart:html';
import 'package:animation/animation.dart');

main() {
  var el = query('#box');
  
  // These two lines are different from previous example:
  var properties = {'left': 1000, 'top': 350};
  var anim = animate(element: el, properties: properties, duration: 5000);

  // Let the animation run for 2.5 seconds, then we pause it.
  new Timer(2500, () {
    anim.pause();

    // Let it be paused for 2.5 seconds, then resume.
    new Timer(2500, anim.resume);
  });
}

In case you wonder, animate() is just a simple helper function that produces an ElementAnimation. Use it if it works for you. Note: using animate() will run the animation immediately after calling it. If you use ElementAnimation, you only construct a class instance and you can start the animation later by calling run() on it.

Using AnimationQueue class

Sometimes you want to queue up a few animations. This can be done easily:

import 'dart:html';
import 'package:animation/animation.dart');

main() {
  var el = query('#box');
  
  // The first animation moves the box.
  var anim = new ElementAnimation(el)
    ..duration = 1000
    ..properties = {
      'left': 500,
      'top': 250
    };

  // The second animation makes the box taller.
  var anim2 = new ElementAnimation(el)
    ..duration = 500
    ..properties = {
      'height': 250
    };

  // Create a queue, add both animations to it and run the queue.
  var queue = new AnimationQueue()
    ..addAll([anim, anim2])
    ..run();
}

You may also pause() the queue, finish() it or stop() it. You can add() or remove() animations at any point. You may also jump() to a specific position if you wanted to skip some animations for instance.

License

This library is licensed under MIT.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  animation: "^0.5.24"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


      import 'package:animation/animation.dart';
  
Version Uploaded Documentation Archive
0.5.24 Sep 22, 2014 Go to the documentation of animation 0.5.24 Download animation 0.5.24 archive
0.5.23 Feb 14, 2014 Go to the documentation of animation 0.5.23 Download animation 0.5.23 archive
0.5.22 Feb 14, 2014 Go to the documentation of animation 0.5.22 Download animation 0.5.22 archive
0.5.21 Nov 13, 2013 Go to the documentation of animation 0.5.21 Download animation 0.5.21 archive
0.5.20 Jun 23, 2013 Go to the documentation of animation 0.5.20 Download animation 0.5.20 archive
0.5.6 Jun 6, 2013 Go to the documentation of animation 0.5.6 Download animation 0.5.6 archive
0.5.5 May 28, 2013 Go to the documentation of animation 0.5.5 Download animation 0.5.5 archive
0.3.0 May 5, 2013 Go to the documentation of animation 0.3.0 Download animation 0.3.0 archive
0.2.7 Jan 26, 2013 Go to the documentation of animation 0.2.7 Download animation 0.2.7 archive
0.2.5 Jan 26, 2013 Go to the documentation of animation 0.2.5 Download animation 0.2.5 archive

All 13 versions...

Analysis

We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
79 / 100
Health:
Code health derived from static analysis. [more]
62 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0 / 100
Overall score:
Weighted score of the above. [more]
58
Learn more about scoring.

Platforms

Detected platforms: unsure

Suggestions

  • Fix platform conflicts.

  • Maintain CHANGELOG.md.

    Changelog entries help clients to follow the progress in your code.

  • Package is too old.

    The package was released more than two years ago.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 10 errors 1 warning 19 hints.

    Make sure that the imported libraries are not in conflict. Detected components: html, isolate. null

    Make sure that the imported libraries are not in conflict. Detected components: html, isolate. null

    Similar analysis of the following files failed:

    • lib/src/element_animation.dart (error)
    • lib/src/effect/slide.dart (warning)
    • lib/src/animation.dart (hint)
    • lib/src/animation_queue.dart (hint)
    • lib/src/easing.dart (hint)
    • lib/src/easing_engine.dart (hint)
    • lib/src/helpers.dart (hint)
  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use animation.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=0.8.10+6 <2.0.0
browser >=0.9.0 <0.11.0 0.10.0+3
Dev dependencies
unittest >=0.9.0 <0.10.0