source: Dev/trunk/src/client/dojox/gfx/tests/test_fx_shapes.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.0 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html lang="en">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Animate rectangles</title>
6        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>-->
7        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
8        <script type="text/javascript" charset="utf-8">
9            dojo.require("dojox.gfx");
10            dojo.require("dojo.fx");
11            dojo.require("dojo.fx.easing");
12           
13            var WIDTH = 600, HEIGHT = 400,
14                BAR_GAP = 20, BAR_WIDTH = 76,
15                BAR_FILL = "red", BAR_STROKE = "black",
16                CHAIN_DURATION = 250, COMBINE_DURATION = 1000;
17           
18            var rects = [];
19           
20            var enable = function(enabled){
21                // enable/disable controls on the page
22                dojo.query("input, select, button, textarea").attr("disabled", !enabled);
23            };
24           
25            var empty = {};
26            var populateSelect = function(from, select){
27                var module = dojo.getObject(from);
28                for(var name in module){
29                    if(name in empty){ continue; }
30                    var fun = module[name];
31                    if(dojo.isFunction(fun)){
32                        dojo.create("option", {
33                            value:     from + "." + name,
34                            selected:  name == "backOut",
35                            innerHTML: from + "." + name
36                        }, select);
37                    }
38                }
39            };
40           
41            var animate = function(){
42                // disable controls
43                enable(false);
44               
45                // get old heights
46                var oldHeights = dojo.map(rects, function(rect){ return rect.getShape().height; });
47               
48                // generate new heights (can't be 0 on IE/VML!)
49                var newHeights = dojo.map(rects, function(){ return 1 + Math.random() * (HEIGHT - 1); });
50               
51                // get parameters
52                var duration = dojo.byId("chain").checked ? CHAIN_DURATION : COMBINE_DURATION,
53                    easing = dojo.getObject(dojo.byId("easing").value);
54               
55                // create animations between heights
56                var animations = dojo.map(rects, function(rect, i){
57                    // create animation
58                    var anim = new dojo._Animation({
59                        duration: duration,
60                        easing:   easing,
61                        curve:    [oldHeights[i], newHeights[i]]
62                    });
63                    // update the rectangle on every tick
64                    dojo.connect(anim, "onAnimate", function(height){
65                        var shape = rect.getShape();
66                        shape.y = HEIGHT - height;
67                        shape.height = height;
68                        rect.setShape(shape);
69                    });
70                    return anim;
71                });
72                // combine all animations
73                var masterAnimation = dojo.byId("chain").checked ?
74                        dojo.fx.chain(animations) : dojo.fx.combine(animations);
75                // enable controls when they are done
76                dojo.connect(masterAnimation, "onEnd", function(){ enable(true); });
77                // start the animation
78                masterAnimation.play();
79            }
80           
81            var init = function(surface){
82                // create rectangles
83                for(var w = BAR_GAP; w < WIDTH - BAR_WIDTH; w += BAR_WIDTH + BAR_GAP){
84                    rects.push(surface.createRect({
85                        x: w, y: HEIGHT, width: BAR_WIDTH, height: 1
86                    }).setFill(BAR_FILL).setStroke(BAR_STROKE));
87                }
88                // IE/VML doesn't allow height to be 0!
89               
90                // prepare and enable controls
91                populateSelect("dojo.fx.easing", "easing");
92                dojo.attr("chain", "checked", false);
93                dojo.connect(dojo.byId("animate"), "onclick", animate);
94                enable(true);
95            };
96           
97                        function createSurface(){
98                var surface = dojox.gfx.createSurface(dojo.byId("surface"), 600, 400);
99                                surface.whenLoaded(init);
100                        };
101
102            dojo.addOnLoad(createSurface);
103        </script>
104    </head>
105    <body>
106        <p>
107            <button id="animate" disabled="disabled">Animate!</button>&nbsp;
108            <label>Easing:&nbsp;<select id="easing" disabled="disabled"></select></label>&nbsp;
109            <label><input id="chain" type="checkbox" disabled="disabled">&nbsp;Chain (otherwise Combine)</label>
110        </p>
111        <div id="surface" style="width: 600px; height: 400px; border:1px solid #000;"></div>
112    </body>
113</html>
Note: See TracBrowser for help on using the repository browser.