diff options
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, 0 insertions, 113 deletions
diff --git a/includes/js/dojox/gfx/tests/test_fx.html b/includes/js/dojox/gfx/tests/test_fx.html deleted file mode 100644 index c7b5b81..0000000 --- a/includes/js/dojox/gfx/tests/test_fx.html +++ /dev/null @@ -1,113 +0,0 @@ -<!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> |