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