animationqueue.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
  <head>
    <script src="../base.js"></script>

    <script>
      goog.require('goog.dom');
      goog.require('goog.fx');
      goog.require('goog.fx.dom');
      goog.require('goog.fx.AnimationQueue');
    </script>
    <script>
      var sx = 5;
      var sy = 5;

      var isForward = false;

      var parallelForward;
      var parallelBackward;
      var serialForward;
      var serialBackward;
      var currentlyPlaying;

      function createAnimations() {
        parallelForward = new goog.fx.AnimationParallelQueue();
        parallelBackward = new goog.fx.AnimationParallelQueue();
        serialForward = new goog.fx.AnimationSerialQueue();
        serialBackward = new goog.fx.AnimationSerialQueue();

        // move forward at the same time
        parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
            [5, 5], [55, 50], 2000, goog.fx.easing.easeOut));
        parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
            [10, 5], [60, 50], 2000, goog.fx.easing.easeOut));
        parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
            [15, 5], [65, 50], 2000, goog.fx.easing.easeOut));
        parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
            [20, 5], [70, 50], 2000, goog.fx.easing.easeOut));
        parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
            [25, 5], [75, 50], 2000, goog.fx.easing.easeOut));

        // move backward at the same time
        parallelBackward.add(new goog.fx.dom.Slide(
            goog.dom.getElement("block1"),
            [55, 50], [5, 5], 2000, goog.fx.easing.easeOut));
        parallelBackward.add(new goog.fx.dom.Slide(
            goog.dom.getElement("block2"),
            [60, 50], [10, 5], 2000, goog.fx.easing.easeOut));
        parallelBackward.add(new goog.fx.dom.Slide
            (goog.dom.getElement("block3"),
            [65, 50], [15, 5], 2000, goog.fx.easing.easeOut));
        parallelBackward.add(new goog.fx.dom.Slide(
            goog.dom.getElement("block4"),
            [70, 50], [20, 5], 2000, goog.fx.easing.easeOut));
        parallelBackward.add(new goog.fx.dom.Slide(
            goog.dom.getElement("block5"),
            [75, 50], [25, 5], 2000, goog.fx.easing.easeOut));

        // move forward in order
        serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
            [5, 5], [55, 50], 400, goog.fx.easing.easeOut));
        serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
            [10, 5], [60, 50], 400, goog.fx.easing.easeOut));
        serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
            [15, 5], [65, 50], 400, goog.fx.easing.easeOut));
        serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
            [20, 5], [70, 50], 400, goog.fx.easing.easeOut));
        serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
            [25, 5], [75, 50], 400, goog.fx.easing.easeOut));

        // move backward in order
        serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
            [55, 50], [5, 5], 400, goog.fx.easing.easeOut));
        serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
            [60, 50], [10, 5], 400, goog.fx.easing.easeOut));
        serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
            [65, 50], [15, 5], 400, goog.fx.easing.easeOut));
        serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
            [70, 50], [20, 5], 400, goog.fx.easing.easeOut));
        serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
            [75, 50], [25, 5], 400, goog.fx.easing.easeOut));
      }

      function demoParallel() {
        if (isForward) {
          parallelBackward.play();
          currentlyPlaying = parallelBackward;
        } else {
          parallelForward.play();
          currentlyPlaying = parallelForward;
        }
        isForward = !isForward;
      }

      function demoSerial() {
        if (isForward) {
          serialBackward.play();
          currentlyPlaying = serialBackward;
        } else {
          serialForward.play();
          currentlyPlaying = serialForward;
        }
        isForward = !isForward;
      }

      function pause() {
        currentlyPlaying.pause();
      }

      function resume(doRestart) {
        currentlyPlaying.play(doRestart);
      }
    </script>

    <style>
      .block {
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="block1" class="block" style="left:  5px; top: 5px"></div>
    <div id="block2" class="block" style="left: 10px; top: 5px"></div>
    <div id="block3" class="block" style="left: 15px; top: 5px"></div>
    <div id="block4" class="block" style="left: 20px; top: 5px"></div>
    <div id="block5" class="block" style="left: 25px; top: 5px"></div>

    <script>
      createAnimations();
    </script>

    <div style="margin-top:70px">
      <a href="javascript:demoParallel();">play parallel</a> |
      <a href="javascript:demoSerial();">play serial</a> | <br/>
      <a href="javascript:pause();">pause</a> |
      <a href="javascript:resume(false);">resume</a> |
      <a href="javascript:resume(true);">resume + restart</a>
    </div>
  </body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/animationqueue.html
