animate method
- @SupportedBrowser(SupportedBrowser.CHROME, '36')
@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 - 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);
}