aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html149
1 files changed, 0 insertions, 149 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html b/contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html
deleted file mode 100644
index 451836a..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/animationqueue.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!--
-Copyright 2007 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>