Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>dojoClass detail information</title>
        <style type="text/css">
                @import "../../../dojo/resources/dojo.css";
                @import "../../../dijit/themes/tundra/tundra.css";
                @import "../../../dijit/tests/css/dijitTests.css"; 
                #node {
                        position:absolute;
                        top:100px; left:100px; 
                        width:400px;
                        height:400px; 
                        padding:12px;
                        -moz-border-radius:5pt;
                        overflow:hidden;
                        border:1px solid #333; 
                }
        </style>
        <script type="text/javascript"
                djConfig="parseOnLoad: true"
                src="../../../dojo/dojo.js"></script>
        <script type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dojox.fx.easing");
                dojo.require("dojox.gfx");

                var surface, shape, line, node; 
                dojo.addOnLoad(function(){
                        // dojo._Line is just a simple class to hold some numbers, and return a given point
                        // on the line as a percentage, essentially
                        var _line = new dojo._Line(20,75); // a holder for the numbers 100..300
                        console.log(_line,_line.getValue(0.5 /* Float: 0..1 */)); // should return 200

                        node = dojo.byId('node');

                        surface = dojox.gfx.createSurface(node,400,400);
                        shape = surface.createCircle({ cx: 200, cy: 200, r: 20 })
                                .setFill([0,0,255])
                                .setStroke({ color:[128,128,128], width: 1});
                        
                        // so we just make a raw _Animation
                        var _anim = new dojo._Animation({
                                // the id of the shape  
                                node: node,
                                // some easing options
                                easing: dojox.fx.easing.easeInOut,
                                // our radius start and end values
                                curve:_line,
                                // call transform on the shape with the values
                                onAnimate: function(){
                                        shape.setShape({ r: arguments[0] });
                                },
                                duration:1200 // ms
                                // rate:100 // ms, so duration/rate iterations
                        });


                        dojo.connect(_anim,"onEnd",function(){
                                dojo.animateProperty({
                                        node: node,
                                        duration:1000,
                                        properties: {
                                                left: { end: 300, unit:"px" }
                                        },
                                        onEnd: function(){
                                                dojo.fadeOut({ node: node, duration:3000 }).play();
                                        }       
                                }).play(500);
                        });
                        _anim.play(2000);
                });
        </script>
</head>
<body class="tundra">
        
        <h1>animateProperty for dojox.gfx</h1>
        <div id="node"></div>

</body>
</html>