Page MenuHomeCode
Files F1129574

example_Line.html
No OneTemporary
Actions

example_Line.html
View Options

<!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>

File Metadata

Mime Type
text/html
Expires
Sat, Jun 21, 01:11 (2 w, 1 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
22838
Default Alt Text
example_Line.html (2 KB)

Event Timeline