diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/tests/test_fx.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/gfx/tests/test_fx.html')
| -rw-r--r-- | includes/js/dojox/gfx/tests/test_fx.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/tests/test_fx.html b/includes/js/dojox/gfx/tests/test_fx.html new file mode 100644 index 0000000..c7b5b81 --- /dev/null +++ b/includes/js/dojox/gfx/tests/test_fx.html @@ -0,0 +1,113 @@ +<!doctype html> +<html> +<head> +<title>Testing animation</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; +</style> +<!-- +The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend +<script type="text/javascript" src="Silverlight.js"></script> +--> +<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> +<!-- +<script type="text/javascript" src="../_base.js"></script> +<script type="text/javascript" src="../shape.js"></script> +<script type="text/javascript" src="../path.js"></script> +<script type="text/javascript" src="../arc.js"></script> +<script type="text/javascript" src="../fx.js"></script> +--> +<!--<script type="text/javascript" src="../vml.js"></script>--> +<!--<script type="text/javascript" src="../svg.js"></script>--> +<!--<script type="text/javascript" src="../canvas.js"></script>--> +<!--<script type="text/javascript" src="../silverlight.js"></script>--> + +<script type="text/javascript"> +dojo.require("dojox.gfx"); +dojo.require("dojox.gfx.fx"); +dojo.require("dojo.colors"); + +var rect, text; + +var makeShapes = function(){ + var surface = dojox.gfx.createSurface("test", 500, 500); + rect = surface.createRect({x: 100, y: 100, width: 300, height: 300}) + .setFill("yellow").setStroke({ + color: "green", + width: 5, + join: "round" + }); + text = surface.createText({x: 250, y: 250, text: "Hello!", align: "middle"}) + .setFill("black").setFont({family: "serif", size: "10pt"}); +}; + +dojo.addOnLoad(makeShapes); + +var animateStroke = function(){ + var anim = dojox.gfx.fx.animateStroke({ + duration: 5000, + shape: rect, + color: {start: "green", end: "red"}, + width: {start: 5, end: 15}, + join: {values: ["miter", "bevel", "round"]} + }); + dojo.byId("stroke").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("stroke").disabled = ""; }); + anim.play(); +}; + +var animateFill = function(){ + var anim = dojox.gfx.fx.animateFill({ + duration: 5000, + shape: rect, + color: {start: "yellow", end: "blue"} + }); + dojo.byId("fill").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("fill").disabled = ""; }); + anim.play(); +}; + +var animateFont = function(){ + var anim = dojox.gfx.fx.animateFont({ + duration: 5000, + shape: text, + variant: {values: ["normal", "small-caps"]}, + size: {start: 10, end: 50, unit: "pt"} + }); + dojo.byId("font").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("font").disabled = ""; }); + anim.play(); +}; + +var animateTransform = function(){ + var anim = dojox.gfx.fx.animateTransform({ + duration: 5000, + shape: text, + transform: [ + {name: "rotategAt", start: [0, 250, 250], end: [360, 350, 350]}, + {name: "translate", start: [0, 0], end: [100, 100]} + ] + }); + dojo.byId("transform").disabled = "disabled"; + dojo.connect(anim, "onEnd", function(){ dojo.byId("transform").disabled = ""; }); + anim.play(); +}; +</script> +</head> +<body> +<h1>Testing animation</h1> +<p> + <button id="stroke" onclick="animateStroke();">Stroke</button> + + <button id="fill" onclick="animateFill();">Fill</button> + + <button id="font" onclick="animateFont();">Font</button> + + <button id="transform" onclick="animateTransform();">Transform</button> +</p> +<div id="test" style="width: 500px; height: 500px;"></div> +<p>That's all Folks!</p> +</body> +</html> |