method animate


  1. Experimental()
  2. SupportedBrowser(SupportedBrowser.CHROME, '36')
AnimationPlayer animate(Iterable<Map<String, dynamic>> frames, [timing])

Creates a new AnimationEffect object whose target element is the object on which the method is called, and calls the play() method of the AnimationTimeline object of the document timeline of the node document of the element, passing the newly created AnimationEffect as the argument to the method. Returns an AnimationPlayer for the effect.

Examples

var animation = elem.animate([{"opacity": 75}, {"opacity": 0}], 200);

var animation = elem.animate([
  {"transform": "translate(100px, -100%)"},
  {"transform" : "translate(400px, 500px)"}
], 1500);

The frames parameter is an Iterable<Map>, where the map entries specify CSS animation effects. The timing paramter can be a double, representing the number of milliseconds for the transition, or a Map with fields corresponding to those of the Timing object.

Source

@Experimental()
@SupportedBrowser(SupportedBrowser.CHROME, '36')
AnimationPlayer animate(Iterable<Map<String, dynamic>> frames, [timing]) {
  if (frames is! Iterable || !(frames.every((x) => x is Map))) {
    throw new ArgumentError("The frames parameter should be a List of Maps "
        "with frame information");
  }
  var convertedFrames = frames;
  if (convertedFrames is Iterable) {
    convertedFrames = convertDartToNative_List(
        frames.map(convertDartToNative_Dictionary).toList());
  }
  var convertedTiming = timing;
  if (convertedTiming is Map) {
    convertedTiming = convertDartToNative_Dictionary(convertedTiming);
  }
  return convertedTiming == null
    ? _animate(convertedFrames)
    : _animate(convertedFrames, convertedTiming);
}