DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/Tween_SparkTable.html
/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples
<!DOCTYPE html>
<html>
<head>
<title>TweenJS Example: Spark Demo</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js" type="text/javascript"></script>
<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var stage;
var prevPoint, dataProvider, rect = new createjs.Rectangle(20,20,700,360);
var bar, container, currentClip;
var selectedFunction, selectedItem, selectedIndex = 0;
var resetRuninng = false, startTimeout;
var clips = [];
var activeTween;
function init() {
stage = new createjs.Stage("testCanvas");
var Ease = createjs.Ease; // shortcut.
dataProvider = [
{type: "divider", label: "Ease Equations"},
{type: Ease.backIn, label: "backIn"},
{type: Ease.backInOut, label: "backInOut"},
{type: Ease.backOut, label: "backOut"},
{type: Ease.bounceIn, label: "bounceIn"},
{type: Ease.bounceInOut, label: "bounceInOut"},
{type: Ease.bounceOut, label: "bounceOut"},
{type: Ease.circIn, label: "circIn"},
{type: Ease.circInOut, label: "circInOut"},
{type: Ease.circOut, label: "circOut"},
{type: Ease.cubicIn, label: "cubicIn"},
{type: Ease.cubicInOut, label: "cubicInOut"},
{type: Ease.cubicOut, label: "cubicOut"},
{type: Ease.elasticIn, label: "elasticIn"},
{type: Ease.elasticInOut, label: "elasticInOut"},
{type: Ease.elasticOut, label: "elasticOut"},
{type: Ease.linear, label: "linear/none"},
{type: Ease.quadIn, label: "quadIn"},
{type: Ease.quadInOut, label: "quadInOut"},
{type: Ease.quadOut, label: "quadOut"},
{type: Ease.quartIn, label: "quartIn"},
{type: Ease.quartInOut, label: "quartInOut"},
{type: Ease.quartOut, label: "quartOut"},
{type: Ease.quintIn, label: "quintIn"},
{type: Ease.quintInOut, label: "quintInOut"},
{type: Ease.quintOut, label: "quintOut"},
{type: Ease.sineIn, label: "sineIn"},
{type: Ease.sineInOut, label: "sineInOut"},
{type: Ease.sineOut, label: "sineOut"},
{type: "divider", label: "Custom Eases"},
{type: Ease.getBackIn(2.5), label: "getBackIn"},
{type: Ease.getBackInOut(2.5), label: "getBackInOut"},
{type: Ease.getBackOut(2.5), label: "getBackOut"},
{type: Ease.getElasticIn(2, 5), label: "getElasticIn"},
{type: Ease.getElasticInOut(2, 5), label: "getElasticInOut"},
{type: Ease.getElasticOut(2, 5), label: "getElasticOut"},
{type: Ease.getPowIn(2.5), label: "getPowIn"},
{type: Ease.getPowInOut(20.5), label: "getPowInOut"},
{type: Ease.getPowOut(2.5), label: "getPowOut"}
];
var eases = document.getElementById("eases");
var cloneElement = document.createElement("a");
cloneElement.href = "#";
for (var i = 0, l = dataProvider.length; i < l; i++) {
var item = dataProvider[i];
if (item.type == "divider") {
element = document.createElement("span");
element.innerHTML = item.label;
eases.appendChild(element);
continue;
}
var element = cloneElement.cloneNode(true);
element.id = i;
element.onclick = selectItem;
element.innerHTML = item.label;
eases.appendChild(element);
if (item.label == "linear") {
selectedItem = element;
element.className = "selected";
}
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
prevPoint = new createjs.Point(rect.x, rect.y);
container = stage.addChild(new createjs.Container());
bar = container.addChild(new createjs.Shape()
.set({alpha:0.7, x:rect.x, y:rect.y}));
bar.graphics.f("#000").setStrokeStyle(1)
.drawRect(-2, 0, 4, 15)
.drawRect(-2, rect.height-15, 4, 15)
.setStrokeStyle(1)
.beginFill("#000")
.drawRect(-1, 15, 2, rect.height-15*2);
var bounds = container.addChild(new createjs.Shape()
.set({alpha:0.7, x:0.5, y:0.5}));
bounds.graphics.setStrokeStyle(1)
.beginStroke("#000")
.drawRect(rect.x, rect.y, rect.width, rect.height);
stage.update();
startTimeout = setTimeout(run, 1000);
}
function stop() {
Ticker.off("tick", tick);
}
function selectItem() {
clearTimeout(startTimeout);
if (clips.length > 0) { fade(); }
if (selectedItem != null && selectedItem != this) {
selectedItem.className = "";
}
selectedItem = this;
selectedIndex = this.id;
selectedItem.className = "selected";
selectedFunction = dataProvider[selectedIndex].type;
resetRuninng = true;
createjs.Tween.get(bar, {override: true}).to({x: rect.x}, 500).call(resetComplete);
return false;
}
function run(easeType) {
currentClip = stage.addChild(new createjs.Shape());
clips.push(currentClip);
prevPoint.setValues(rect.x, rect.y);
activeTween = createjs.Tween.get(bar, {override: true}).to({x: rect.x+rect.width}, 1500, easeType);
}
function resetComplete() {
bar.x = rect.x;
resetRuninng = false;
currentClip = null;
prevPoint.setValues(rect.x, rect.y);
run(selectedFunction);
}
function tick(event) {
if (!resetRuninng && currentClip != null) {
var hue = (selectedIndex / dataProvider.length) * 360;
var g = currentClip.graphics
.setStrokeStyle(1, "round", "round")
.beginStroke(createjs.Graphics.getHSL(hue, 50, 50))
.moveTo(prevPoint.x, prevPoint.y);
prevPoint.x = bar.x;
prevPoint.y = rect.x+ activeTween.position/1500 * rect.height;
g.lineTo(prevPoint.x, prevPoint.y)
.beginStroke(createjs.Graphics.getHSL(hue, 100, 50))
.beginFill(createjs.Graphics.getHSL(hue, 100, 50))
.drawCircle(prevPoint.x, prevPoint.y, 2)
.endFill();
stage.update(event);
} else if (resetRuninng) {
stage.update(event);
}
}
function fade() {
for (var i = 0; i < clips.length; i++) {
var clip = clips[i];
createjs.Tween.get(clip, {override: true})
.to({alpha: clip.alpha - 0.4}, 1000)
.call(fadeTweenComplete);
}
}
function fadeTweenComplete(tween) {
var clip = tween._target;
if (clip.alpha <= 0) {
stage.removeChild(clip);
var index = clips.indexOf(clip);
clips.splice(index, 1);
}
}
</script>
<style type="text/css">
.content {
position: relative;
width: 960px;
padding: 0;
}
#eases {
position: absolute;
right: 0;
width: 220px;
height: 400px;
border-left: 2px solid #777;
padding: 5px 10px;
}
#eases SPAN {
font-weight: bold;
clear: left;
display: block;
padding-top: 10px;
}
#eases A {
font-size: 0.9em;
float: left;
padding: 1px 3px;
}
#eases A:after {
content: ", ";
}
#eases A:last-child:after {
content: "";
}
#eases A.selected {
background-color: #f90;
color: #333;
}
.content {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body onload="init();" bgcolor="#000000">
<header class="TweenJS">
<h1>Spark Table</h1>
<p>Preview a number of different ease functions.</p>
</header>
<div class="content">
<div id="eases" class="content"></div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer