dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
131 lines (111 loc) • 3.07 kB
HTML
<html>
<head>
<title>dojox.fx.easing functions:</title>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="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("dojo.fx.easing");
var allAnim = null;
dojo.addOnLoad(function(){
var easeInAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeIn',
duration:2000,
easing: dojo.fx.easing.easeIn
}),
dojo.fadeIn({
node: 'easeIn',
duration:2000,
easing: dojo.fx.easing.easeIn
})
]);
var easeOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeOut',
duration:2000,
easing: dojo.fx.easing.easeOut
}),
dojo.fadeIn({
node: 'easeOut',
duration:2000,
easing: dojo.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: dojo.fx.easing.linear
}),
dojo.fadeIn({
node: 'linearEase',
duration:2000,
easing: dojo.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");
allAnim = { play: function(){
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">dojo.fx.easing.easeIn</div>
<br><br>
<div id="easeOut" class="block">dojo.fx.easing.easeOut</div>
<br><br>
<div id="linearEase" class="block">dojo.fx.easing.linear</div>
<br><br>
<div id="easeInOut" class="block">dojo default easing</div>
<p>
dojo.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>
</body>
</html>