DIR : /home/kozerus/public_html/pn/uize/site-source/examples/animate-size-in-javascript.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animate Size in JavaScript | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="animation Uize.Fx"/>
<meta name="description" content="See how to animate the size of an HTML element and how to apply amazingly realistic physics effects like easing, elasticity, bounce, and many more."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.tabs.css"/>
<link rel="stylesheet" href="css/selector-links.css"/>
<link rel="stylesheet" href="css/params-table.css"/>
<link rel="stylesheet" href="css/params-inspector.css"/>
<style type="text/css">
#page-paramsInspector .tabShell {
width: 400px;
}
#page_paramsInspector_curve {
width: 320px;
height: 251px;
font-size: 12px;
}
#page_paramsInspector_preview {
width: 386px;
}
.previewPaneShell {
position: relative;
width: 300px;
height: 300px;
border-width: 30px;
border-style: solid;
cursor: not-allowed;
}
.previewPane, .previewPaneEventGrabber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.previewPane {
background: url(../images/brushed-metal.jpg) no-repeat;
}
.previewPaneEventGrabber {
cursor: crosshair;
}
.objectToAnimate {
position: absolute;
left: 150px;
top: 150px;
width: 0;
height: 0;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
background: url(../images/page-contents-bg.gif) repeat;
box-shadow: 10px 10px 10px rgba(0,0,0,.6);
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.6);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.6);
}
.objectToAnimateGhost {
opacity: .2;
filter: alpha(opacity=20);
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Animate Size in JavaScript
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/animate-size-in-javascript.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>In this example, the <code>Uize.Fx.fadeStyle</code> method of the <a href="../reference/Uize.Fx.html"><code>Uize.Fx</code></a> module is animating the size of an object. Move the mouse around inside the brushed metal square and you'll see a faint preview for a new size for the object. Click and the object will animate to that new size. How the object transitions is decided by the curve(s) used. You can change the curve(s) by clicking on one of the links in the <b>"PRESETS"</b> tab. When you choose a preset, a random new size will be chosen and the object will animate to that size using the new curve(s). To animate the object again, click a preset link repeatedly, or click the <b>"PREVIEW ANIMATION"</b> button repeatedly, or click anywhere on the metal square. To fool around with a preset's settings, switch over to the <b>"PARAMS"</b> tab to tweak values and click the <b>"PREVIEW ANIMATION"</b> button to preview changes.</p>
</div>
<!-- page layout's "wireframe" with slot for params inspector -->
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div class="previewPaneShell insetBorderColor">
<div id="page-previewPane" class="previewPane">
<div id="page-objectToAnimate" class="objectToAnimate"></div>
<div id="page-objectToAnimateGhost" class="objectToAnimate objectToAnimateGhost"></div>
</div>
<div id="page-previewPaneEventGrabber" class="previewPaneEventGrabber"></div>
</div>
</td>
<td id="page-paramsInspector"></td>
</tr>
</table>
</div>
<textarea id="page_paramsInspector-inlinePresets" style="display:none;">
Linear
curve: null
duration: 300
Picking Up Speed
curve: Uize.Curve.easeInPow (4)
duration: 500
Really Slow to Get Started
curve: Uize.Curve.easeInPow (10)
duration: 1000
Decelerating Towards the End
curve: Uize.Curve.easeOutPow (4)
duration: 500
Decelerating to a Crawl at the End
curve: Uize.Curve.easeOutPow (10)
duration: 3000
Starting Off Slow, Decelerating Towards the End
curve: Uize.Curve.easeInOutPow (7)
duration: 1000
Taking a Breather in the Middle
curve: Uize.Curve.easeMiddlePow (4)
duration: 800
Pull Back First
curve: Uize.Curve.Rubber.easeInBack (2)
duration: 600
Overshoot at the End
curve: Uize.Curve.Rubber.easeOutBack (2)
duration: 600
Pull Back First, Then Overshoot at the End
curve: Uize.Curve.Rubber.easeInOutBack (3)
duration: 800
Gentle Elastic Ease Out
curve: Uize.Curve.Rubber.easeOutElastic (.3)
duration: 1500
Super Elastic Ease Out
curve: Uize.Curve.Rubber.easeOutElastic (.1)
duration: 1500
Loose and Sloppy Elastic
curve::
Uize.Curve.Mod.blend (
Uize.Curve.Rubber.easeOutElastic (.2),
Uize.Curve.Rubber.easeOutElastic (.1)
)
duration: 2800
Pull and Release
curve::
Uize.Curve.Mod.repeat (
[
Uize.Curve.Mod.band (
Uize.Curve.easeOutPow (5),
1,
0,
-.3,
0
),
Uize.Curve.Rubber.easeOutElastic (.1)
],
2
)
duration: 2200
Muffled Bounce
curve: Uize.Curve.Rubber.easeOutBounce (3,-4,1.7)
duration: 800
More Bouncy
curve: Uize.Curve.Rubber.easeOutBounce (4,1.5)
duration: 1200
Super Bouncy
curve: Uize.Curve.Rubber.easeOutBounce (9,4,1.25)
duration: 2000
Decelerate Into Coin Settle Effect
curve::
Uize.Curve.Mod.bend (
Uize.Curve.Mod.rotate (
Uize.Curve.Mod.multiply (
Uize.Curve.easeInPow (3),
Uize.Curve.Mod.repeat (
Uize.Curve.easeInCircular (),
45,
0,
true
)
)
),
2
)
duration: 4000
Decelerate Into Bounce
curve::
Uize.Curve.Mod.repeat (
[
Uize.Curve.easeInSweetPow (1/5),
Uize.Curve.Rubber.easeOutBounce (4,2)
],
2,
1
)
duration: 1300
Ease Slowly Into Short Bounce
curve::
Uize.Curve.Mod.bend (
Uize.Curve.Rubber.easeOutBounce (10,-2,2,2.5),
Uize.Curve.easeInOutPow (2)
)
duration: 1500
Third Time's a Charm
curve::
Uize.Curve.Rubber.easeInBounce (
3,
1.3,
1,
Uize.Curve.easeInCircular ()
)
duration: 2000
Quickly to Middle, Pull Back, Then Quickly to End
curve::
Uize.Curve.Mod.blend (
Uize.Curve.easeInSweetPow (1/6),
Uize.Curve.easeOutSweetPow (1/12),
Uize.Curve.line (0,1)
)
duration: 1100
Stop and Go, Stop and Go, Stop and Go
curve::
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutPow (3),
3,
1
)
duration: 1200
Wobbling on its Way
curve::
Uize.Curve.Mod.redraw (
Uize.Curve.easeInOutPow (4),
12,
Uize.Curve.Rubber.easeInOutBack (4)
)
duration: 1700
Bouncing on its Way
curve::
Uize.Curve.Mod.blend (
Uize.Curve.easeInPow (3),
Uize.Curve.easeOutPow (1.5),
Uize.Curve.Rubber.easeOutBounce (10,4,1.1)
)
duration: 3000
Hopping on its Way
curve::
Uize.Curve.Mod.blend (
Uize.Curve.Mod.band (1,1,0,.8,0),
Uize.Curve.Mod.band (1,1,0,.8,1),
Uize.Curve.Rubber.easeOutBounce (
6,
Uize.Curve.Mod.band (1,0,0),
1,
-2
)
)
duration: 2500
Horizontal First, Then Vertical
curve::
{
width:Uize.Curve.easeOutPow (10),
height:Uize.Curve.easeInPow (10)
}
duration: 500
Vertical First, Then Horizontal
curve::
{
width:Uize.Curve.easeInPow (10),
height:Uize.Curve.easeOutPow (10)
}
duration: 500
Elastic Horizontal First, Then Vertical
curve::
{
width:
Uize.Curve.Rubber.easeOutElastic (.5,2),
height:
Uize.Curve.Rubber.easeInElastic (.5,1.5)
}
duration: 750
Elastic Vertical First, Then Horizontal
curve::
{
width:
Uize.Curve.Rubber.easeInElastic (.5,1.5),
height:
Uize.Curve.Rubber.easeOutElastic (.5,2)
}
duration: 750
Snappy Elastic Vertical First, Then Horizontal
curve::
{
width:
Uize.Curve.Rubber.easeInElastic (1.2),
height:
Uize.Curve.Rubber.easeInOutElastic (.5)
}
duration: 500
Alternating Horizontal and Vertical Swagger
curve::
{
width:
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutPow (3),
3,
1
),
height:
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutPow (4),
5,
1
)
}
duration: 1200
Alternating Horizontal and Vertical Stepping
curve::
{
width:
Uize.Curve.Mod.repeat (
Uize.Curve.Mod.band (1,.4,0),
4,
1
),
height:
Uize.Curve.Mod.repeat (
Uize.Curve.Mod.band (1,.4,1),
4,
1
)
}
duration: 1400
Nervous Horizontal and Vertical Wobbling
curve::
{
width:
Uize.Curve.Mod.redraw (
Uize.Curve.easeInOutPow (4),
12,
Uize.Curve.Rubber.easeInOutBack (4)
),
height:
Uize.Curve.Mod.redraw (
Uize.Curve.easeInOutPow (5),
14,
Uize.Curve.Rubber.easeInOutBack (4)
)
}
duration: 1700
Eccentric Elasticity Pounce
curve::
{
width:
Uize.Curve.easeOutPow (10),
height:
Uize.Curve.Rubber.easeOutElastic ()
}
duration: 500
Jelly Wobble
curve::
{
width:
Uize.Curve.Mod.blend (
Uize.Curve.Rubber.easeOutElastic (.2),
Uize.Curve.Rubber.easeOutElastic (.1)
),
height:
Uize.Curve.Mod.blend (
Uize.Curve.Rubber.easeOutElastic (.18),
Uize.Curve.Rubber.easeOutElastic (.12)
)
}
duration: 2800
Hyperactive Excited Bouncing
curve::
{
width:
Uize.Curve.Rubber.easeOutBounce (4,3,1.5),
height:
Uize.Curve.Rubber.easeOutBounce (5,4,1)
}
duration: 750
Horizontal Deceleration, Vertical Bouncing
curve::
{
width:Uize.Curve.easeOutPow (3),
height:
Uize.Curve.Mod.blend (
Uize.Curve.easeInPow (3),
Uize.Curve.easeOutPow (5),
Uize.Curve.Rubber.easeOutBounce (10,3,1.4)
)
}
duration: 3000
Hectic Independent Horizontal and Vertical Bouncing
curve::
{
width:
Uize.Curve.Mod.blend (
Uize.Curve.easeInPow (3),
Uize.Curve.easeOutPow (5),
Uize.Curve.Rubber.easeOutBounce (10,3,1.5)
),
height:
Uize.Curve.Mod.blend (
Uize.Curve.easeInPow (3),
Uize.Curve.easeOutPow (5),
Uize.Curve.Rubber.easeOutBounce (10,3,.5)
)
}
duration: 3000
Horizontal to Vertical With Direction Change Twist
curve::
{
width:Uize.Curve.Rubber.easeOutBack (4),
height:Uize.Curve.Rubber.easeInBack (4)
}
duration: 700
Horizontal to Vertical to Horizontal With Two Twists
curve::
{
width:Uize.Curve.Rubber.easeMiddleBack (5),
height:Uize.Curve.Rubber.easeInOutBack (5)
}
duration: 1200
Ease Into Accelerating Direction Change Twirls
curve::
{
width:
Uize.Curve.Mod.bend (
Uize.Curve.Mod.blend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutCircular (),
5,
0,
true,
false
),
1,
.5
),
3
),
height:
Uize.Curve.Mod.bend (
Uize.Curve.Mod.blend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutCircular (),
5,
0,
true,
false
),
1,
.5
),
4
)
}
duration: 1200
</textarea>
<!-- JavaScript code to make the static HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.ParamsInspector.InlinePresets',
'Uize.Curve',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Fx',
'Uize.Json',
'Uize.Dom.Pos'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
var minDimEachAxis = 40;
function getSizeAndPositionStyleProperties (dims) {
var previewPaneCoords = Uize.Dom.Pos.getCoords (page.getNode ('previewPane'));
return {
left:(previewPaneCoords.width - dims.width) >> 1,
top:(previewPaneCoords.height - dims.height) >> 1,
width:dims.width,
height:dims.height
};
}
/*** code for positioning ghost ***/
function sizeGhost (dims) {
page.setNodeStyle ('objectToAnimateGhost',getSizeAndPositionStyleProperties (dims));
}
/*** create the params inspector widget ***/
var
lastCurve,
curveObject,
values
;
function fadeSize (dims) {
sizeGhost (dims);
var curve = (values = page.children.paramsInspector.getValues ()).curve;
if (curve != lastCurve)
curveObject = Uize.Json.from (lastCurve = curve)
;
Uize.Fx.fadeStyle (
page.getNode ('objectToAnimate'),
null,
getSizeAndPositionStyleProperties (dims),
+values.duration,
{
curve:
curveObject &&
(
Uize.isFunction (curveObject)
? curveObject
: Uize.copy (
curveObject,
curveObject.width ? {left:curveObject.width} : null,
curveObject.height ? {top:curveObject.height} : null
)
)
}
);
}
page.addChild (
'paramsInspector',
UizeSite.ParamsInspector.InlinePresets,
{
params:{curve:'string-multiline',duration:'integer'},
previewButtonText:'PREVIEW ANIMATION',
settingsPropertyName:'curve'
}
).wire (
'Preset Selected',
function () {
var previewPaneCoords = Uize.Dom.Pos.getCoords (page.getNode ('previewPane'));
fadeSize ({
width:minDimEachAxis + Math.round (Math.random () * (previewPaneCoords.width - minDimEachAxis)),
height:minDimEachAxis + Math.round (Math.random () * (previewPaneCoords.height - minDimEachAxis))
});
}
);
/*** wire clicking on preview pane to trigger animation to new size ***/
function getDimPropertiesFromEvent (e) {
var
eventAbsPos = Uize.Dom.Pos.getEventAbsPos (e),
previewPaneCoords = Uize.Dom.Pos.getCoords (page.getNode ('previewPane'))
;
return {
width:
Math.max (
Math.abs (previewPaneCoords.left + previewPaneCoords.width / 2 - eventAbsPos.left) * 2,
minDimEachAxis
),
height:
Math.max (
Math.abs (previewPaneCoords.top + previewPaneCoords.height / 2 - eventAbsPos.top) * 2,
minDimEachAxis
)
};
}
page.wireNode (
'previewPaneEventGrabber',
{
click:function (e) {fadeSize (getDimPropertiesFromEvent (e))},
mousemove:function (e) {sizeGhost (getDimPropertiesFromEvent (e))}
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer