Question

如何在Dart 2中为类似于jQuery fadeIn或fadeOut的HTML元素创建动画？

我在animate包中看到了这个dart:html方法。但是，似乎它并没有将元素的样式更改为最终状态，因此在动画完成后，该元素立即像在开始动画之前一样立即返回到第一状态。该文档还指出，调用animate不仅会创建Animation类，还会调用play()方法，因此动画在创建时会自动播放。

animate包中的dart:html是否使用Web动画，因此它根本不会更改HTML元素的样式？如果是这样，动画完成后如何保持元素的状态？我可以看到，使用jQuery fadeIn时，元素的不透明度会不时地从0变为最终状态1。因此，在动画完成后，元素的不透明度仍为1。

我希望我能避免这种情况：

elem.animate([{"opacity": 1}, {"opacity": 0}], 100); // animation is played immediately after this
elem.style.opacity = "0"; // force set the style to 0
elem.style.display = "none"; // also force set the display to none

Answer 1

Dart的动画API直接移植Web Animations API，因此您可以使用它做的任何事情，都可以在Dart中以几乎完全相同的方式进行。使用WAAPI，创建动画总是涉及两个部分：指定关键帧（也称为效果），然后指定timing parameters（或持续时间，如果不需要特定的定时效果）。

在时序参数中，有一个称为fill mode的参数会影响动画不活跃运行时元素的呈现方式。要使元素在完成后保持在动画结束时定义的状态，只需将fill参数设置为forwards。

就像Javascript中的WAAPI一样，在Dart中，动画计时参数是在animate方法的第二个参数中设置的，其中Map代替了持续时间。您还可以在此处设置延迟，缓动和动画方向等内容。

//Notice that this Dart code is entirely compatible with JS!
el.animate([{"opacity": 0}], {
  "duration": 1000,
  "fill": "forwards"
});

Here's a working example。

您还可以在元素之前上运行动画，以使其运行。 .animate方法返回一个Animation对象，您可以从中存储和控制动画。您可以创建它，立即调用.pause，然后再播放，等等。这仍然与WAAPI完全相同。

Animation fadeOutEl = el.animate([{"opacity": 0}], {
  "duration": 1000,
  "fill": "forwards"
})..pause();
// Somewhere else 
fadeOutEl.play();

Dart关于动画API的文档绝对很少，但是由于它实际上与WAAPI相同（毕竟它是基于WAAPI构建的），因此您只需查看其有关MDN的文档，然后再翻译成Dart的文档即可。实现非常简单。

在Dart 2中为HTML元素创建类似jQuery的动画

1 个答案: