3. Ext JS Tutorial - Animation
Last updated Apr 7th, 2019 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$305 per month—let's make that $500!
Learn moreAnimations¶
Once again, we include the required JS and CSS:
<link rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
And then we add some controls that will perform a simple animation that will resize a div:
<script type="text/javascript">
Ext.onReady(function() {
var myDiv1 = Ext.get('div1');
myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
});
</script>
To get the div ready and make our animation easier to see, we need to provide some styling:
<style type="text/css">
.myDiv {
border: 1px solid #AAAAAA;
background: yellow;
width: 200px;
height: 35px;
}
</style>
Finally, actually create the div down in your HTML body:
<div id="div1" class="myDiv"></div>
When your finished, this page should look something like this:
<html>
<title>My Ext JS Test Page : Animations</title>
<link rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myDiv1 = Ext.get('div1');
myDiv1.setHeight(200);
myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
});
</script>
<style type="text/css">
.myDiv {
border: 1px solid #AAAAAA;
background: yellow;
width: 200px;
height: 35px;
}
</style>
<body>
<h1>Animations</h1>
<div id="div1" class="myDiv"></div>
</body>
</html>
When you view this in a browser, you should see your div grow in size to become a square.
Other Commands¶
You can also use the setHeight or setWidth methods, e.g.:
myDiv1.setHeight(200);
Easing¶
One of the keys to this trick is the "easing" property. The available easing options depend on which library is loaded, but here is a short list of easing options that are available
Easing Type | Description |
---|---|
easeNone | Uniform speed between points. |
easeIn | Begins slowly and accelerates towards end. (quadratic) |
easeOut | Begins quickly and decelerates towards end. (quadratic) |
easeBoth | Begins slowly and decelerates towards end. (quadratic) |
easeInStrong | Begins slowly and accelerates towards end. (quartic) |
easeOutStrong | Begins quickly and decelerates towards end. (quartic) |
easeBothStrong | Begins slowly and decelerates towards end. (quartic) |
elasticIn | Snap in elastic effect. |
elasticOut | Snap out elastic effect. |
elasticBoth | Snap both elastic effect. |
backIn | Backtracks slightly, then reverses direction and moves to end. |
backOut | Overshoots end, then reverses and comes back to end. |
backBoth | Backtracks slightly, then reverses direction, overshoots end, then reverses and comes back to end. |
bounceIn | Bounce off of start. |
bounceOut | Bounces off end. |
bounceBoth | Bounces off start and end. |
- Ext JS Tutorial - Message Boxes
- Ext JS Tutorial - Ajax Include
- Ext JS Tutorial - Animation
- Ext JS Tutorial - Manipulating Nodes
- Ext JS Tutorial - Panels
- Ext JS Tutoral - Advanced Grid
- Ext JS Tutorial - Inside a CMP
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$305 per month—let's make that $500!
Learn more