143 lines
3.4 KiB
HTML
143 lines
3.4 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dojox.fx.easing functions:</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "../../../dijit/themes/dijit.css";
|
||
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
||
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
||
|
|
|
||
|
|
.bounce {
|
||
|
|
position:absolute;
|
||
|
|
top:300px;
|
||
|
|
left:400px;
|
||
|
|
width:25px;
|
||
|
|
height:25px;
|
||
|
|
border:1px solid #b7b7b7;
|
||
|
|
background:#ededed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.block {
|
||
|
|
width:200px;
|
||
|
|
height:100px;
|
||
|
|
background:#666;
|
||
|
|
border:1px solid #ccc;
|
||
|
|
display:block;
|
||
|
|
color:#fff;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
|
||
|
|
dojo.require("dojox.fx.easing");
|
||
|
|
|
||
|
|
|
||
|
|
var allAnim = null;
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
|
||
|
|
var easeInAnim = dojo.fx.chain([
|
||
|
|
dojo.fadeOut({
|
||
|
|
node: 'easeIn',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.easeIn
|
||
|
|
}),
|
||
|
|
dojo.fadeIn({
|
||
|
|
node: 'easeIn',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.easeIn
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
var easeOutAnim = dojo.fx.chain([
|
||
|
|
dojo.fadeOut({
|
||
|
|
node: 'easeOut',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.easeOut
|
||
|
|
}),
|
||
|
|
dojo.fadeIn({
|
||
|
|
node: 'easeOut',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.easeOut
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
|
||
|
|
var easeInOutAnim = dojo.fx.chain([
|
||
|
|
dojo.fadeOut({
|
||
|
|
node: 'easeInOut',
|
||
|
|
duration:2000
|
||
|
|
}),
|
||
|
|
dojo.fadeIn({
|
||
|
|
node: 'easeInOut',
|
||
|
|
duration:2000
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
|
||
|
|
var linearEaseAnim = dojo.fx.chain([
|
||
|
|
dojo.fadeOut({
|
||
|
|
node: 'linearEase',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.linear
|
||
|
|
}),
|
||
|
|
dojo.fadeIn({
|
||
|
|
node: 'linearEase',
|
||
|
|
duration:2000,
|
||
|
|
easing: dojox.fx.easing.linear
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
|
||
|
|
dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
|
||
|
|
dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
|
||
|
|
dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
|
||
|
|
dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play");
|
||
|
|
dojo.connect(window,"onclick",function(e){
|
||
|
|
dojo.fx.slideTo({
|
||
|
|
node:"bounce",
|
||
|
|
top:e.pageY, left:e.pageX,
|
||
|
|
easing: dojox.fx.easing.easeOutBack
|
||
|
|
}).play();
|
||
|
|
});
|
||
|
|
|
||
|
|
// argh! FIXME: combine and chain are destructive to the animations. :(
|
||
|
|
// allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]);
|
||
|
|
allAnim = { play: function(){
|
||
|
|
console.log("can't do this via fx.combine - destructive");
|
||
|
|
easeInAnim.play();
|
||
|
|
easeOutAnim.play();
|
||
|
|
easeInOutAnim.play();
|
||
|
|
linearEaseAnim.play();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
}); // dojo.addOnLoad
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="tundra">
|
||
|
|
|
||
|
|
<h1 class="testTitle">dojox.fx.easing function tests:</h1>
|
||
|
|
|
||
|
|
(click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
|
||
|
|
|
||
|
|
<div id="easeIn" class="block">dojox.fx.easing.easeIn</div>
|
||
|
|
<br><br>
|
||
|
|
<div id="easeOut" class="block">dojox.fx.easing.easeOut</div>
|
||
|
|
<br><br>
|
||
|
|
<div id="linearEase" class="block">dojox.fx.easing.linear</div>
|
||
|
|
<br><br>
|
||
|
|
<div id="easeInOut" class="block">dojo default easing</div>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart
|
||
|
|
of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div id="bounce" class="bounce">bounce</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|