Andreas Hocevar
150 lines
5.5 KiB
HTML
150 lines
5.5 KiB
HTML
<!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>
|