animate方法

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

创建一个新的AnimationEffect对象，其中目标元素是调用该方法的对象，并调用元素节点文档的文档时间线的AnimationTimeline对象的play()方法，将新创建的AnimationEffect作为方法的参数传递。返回该效果对应的Animation。

示例

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

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

frames参数是Iterable类型, where the map entries specify CSS animation effects. The timing parameter can be a double, representing the number of milliseconds for the transition, or a Map with fields corresponding to those of the timing object.

实现

@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);
}