Dart:Scalable Application Development
上QQ阅读APP看书,第一时间看更新

Animating slides

The fullscreen display only has one slide at any time. A new slide will be initially placed on the top of the screen and will be gently lowered into view. The old slide will, from the presentation viewer's point of view, vanish instantly.

Animating slides

Using a timer

The periodic timer in Dart should be a familiar friend of yours by now. This is used to check whether the slide has reached the final position. If it is not there yet, then the position is updated:

    new Timer.periodic(new Duration(milliseconds: 50), (timer) {
      if (isFullScreen && liveSlideY < 0) {
        liveSlide.style.top = liveSlideY.toString() + "px";
        liveSlideY += 50;
      }
    });

You may be concerned that the Timer object runs all the time, even when a presentation is not running fullscreen. In reality, they are very lightweight and the work that the animation performs is so minimal that it will have a negligible impact.