animate method

  1. @SupportedBrowser(SupportedBrowser.CHROME, '36')
Animation animate (Iterable<Map<String, dynamic>> frames, [ dynamic timing ])
@SupportedBrowser(SupportedBrowser.CHROME, '36')
  • 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 Animation 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, 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.

Implementation

@SupportedBrowser(SupportedBrowser.CHROME, '36')
Animation 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;
  if (frames is Iterable) {
    convertedFrames = frames.map(convertDartToNative_Dictionary).toList();
  } else {
    convertedFrames = frames;
  }
  var convertedTiming =
      timing is Map ? convertDartToNative_Dictionary(timing) : timing;
  return convertedTiming == null
      ? _animate(convertedFrames)
      : _animate(convertedFrames, convertedTiming);
}