89 lines
18 KiB
HTML
Executable File
89 lines
18 KiB
HTML
Executable File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0014)about:internet --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../style.css" type="text/css" media="screen"><link rel="stylesheet" href="../../../print.css" type="text/css" media="print"><link rel="stylesheet" href="../../../override.css" type="text/css"><meta name="keywords" content="SlowMo,com.greensock.easing.SlowMo,ease,ease,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeIn,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeInOut,easeNone,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,easeOut,config,config,find,getRatio,getRatio,getRatio"><title>com.greensock.easing.SlowMo</title><script src="../../../AC_OETags.js" type="text/javascript"></script></head><body><script language="javascript" type="text/javascript" src="../../../asdoc.js"></script><script language="javascript" type="text/javascript" src="../../../help.js"></script><script language="javascript" type="text/javascript" src="../../../cookies.js"></script><script language="javascript" type="text/javascript"><!--
|
|
asdocTitle = 'SlowMo - GreenSock JavaScript Documentation';
|
|
var baseRef = '../../../';
|
|
window.onload = configPage;
|
|
--></script>
|
|
<script type="text/javascript">
|
|
scrollToNameAnchor();
|
|
</script><table class="titleTable" cellpadding="0" cellspacing="0" id="titleTable" style="display:none"><tr><td class="titleTableTitle" align="left">GreenSock JavaScript API Docs</td><td class="titleTableTopNav" align="right"><a href="../../../package-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Packages</a> | <a href="../../../class-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Classes</a> | <a href="../../../all-index-A.html" onclick="loadClassListFrame('../../../index-list.html')">Index</a> | <a id="framesLink1" href="../../../index.html?com/greensock/easing/SlowMo.html&com/greensock/easing/class-list.html">Frames</a><a id="noFramesLink1" style="display:none" href="" onclick="parent.location=document.location"> No Frames </a></td><td class="titleTableLogo" align="right" rowspan="3"><img src="../../../images/logo.jpg" class="logoImage" alt=" Adobe Logo " title=" Adobe Logo "></td></tr><tr class="titleTableRow2"><td class="titleTableSubTitle" id="subTitle" align="left">SlowMo</td><td class="titleTableSubNav" id="subNav" align="right"><a href="#propertySummary">Properties</a> | <a href="#methodSummary">Methods</a> | <a href="#includeExamplesSummary">Examples</a></td></tr><tr class="titleTableRow3"><td colspan="3"> </td></tr></table><script language="javascript" type="text/javascript" xml:space="preserve">
|
|
<!--
|
|
|
|
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("SlowMo"); titleBar_setSubNav(false,true,false,false,false,false,false,false,true,true,false ,false,false,false,false,false);}
|
|
-->
|
|
</script><div xmlns:fn="http://www.w3.org/2005/xpath-functions" class="MainContent"><table class="classHeaderTable" cellpadding="0" cellspacing="0"><tr><td class="classHeaderTableLabel">Package</td><td><a href="package-detail.html" onclick="javascript:loadClassListFrame('class-list.html')">com.greensock.easing</a></td></tr><tr><td class="classHeaderTableLabel">Class</td><td class="classSignature">public class SlowMo</td></tr><tr><td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">SlowMo <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> <a href="../../../com/greensock/easing/Ease.html">Ease</a> <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> Object</td></tr></table><p></p><p></p><p></p>
|
|
SlowMo is a configurable ease that produces a slow-motion effect that decelerates initially, then moves
|
|
linearly for a certain portion of the ease (which you can choose) and then accelerates again at the end;
|
|
it's great for effects like zooming text onto the screen, smoothly moving it long enough for people to
|
|
read it, and then zooming it off the screen. Without SlowMo, animators would often try to get the same
|
|
effect by sequencing 3 tweens, one with an easeOut, then another with a Linear.easeNone, and finally
|
|
an easeIn but the problem was that the eases didn't smoothly transition into one another, so you'd see
|
|
sudden shifts in velocity at the joints. SlowMo solves this problem and gives you complete control over
|
|
how strong the eases are on each end and what portion of the movement in the middle is linear.
|
|
|
|
<p>The first parameter, <code>linearRatio</code>, determines the proportion of the ease during which
|
|
the rate of change will be linear (steady pace). This should be a number between 0 and 1. For example,
|
|
0.5 would be half, so the first 25% of the ease would be easing out (decelerating), then 50% would be
|
|
linear, then the final 25% would be easing in (accelerating). If you choose 0.8, that would mean 80%
|
|
of the ease would be linear, leaving 10% on each end to ease. The default is 0.7.</p>
|
|
|
|
<p>The second parameter, <code>power</code>, determines the strength of the ease at each end.
|
|
If you define a value greater than 1, it will actually reverse the linear portion in the middle
|
|
which can create interesting effects. The default is 0.7.</p>
|
|
|
|
<p>The third parameter, <code>yoyoMode</code>, provides an easy way to create companion tweens that
|
|
sync with normal SlowMo tweens. For example, let's say you have a SlowMo tween that is zooming some
|
|
text onto the screen and moving it linearly for a while and then zooming off, but you want to
|
|
tween that alpha of the text at the beginning and end of the positional tween. Normally, you'd need
|
|
to create 2 separate alpha tweens, 1 for the fade-in at the beginning and 1 for the fade-out at the
|
|
end and you'd need to calculate their durations manually to ensure that they finish fading in
|
|
by the time the linear motion begins and then they start fading out at the end right when the linear
|
|
motion completes. But to make this whole process much easier, all you'd need to do is create a separate
|
|
tween for the alpha and use the same duration but a SlowMo ease that has its <code>yoyoMode</code>
|
|
parameter set to <code>true</code>.</p>
|
|
|
|
<p></p><p><a href="#includeExamplesSummary">View the examples</a></p><br/><hr></div><a name="propertySummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Properties</div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableProperty"><tr><th> </th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a href="#ease" class="signatureLink">ease</a> : <a href="../../../com/greensock/easing/SlowMo.html">SlowMo</a><div class="summaryTableDescription">[static] The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time.</div></td><td class="summaryTableOwnerCol">SlowMo</td></tr></table></div><a name="methodSummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Methods </div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableMethod"><tr><th> </th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#SlowMo()" class="signatureLink">SlowMo</a>(linearRatio:Number = 0.7, power:Number = 0.7, yoyoMode:Boolean = false)</div><div class="summaryTableDescription">
|
|
Constructor
|
|
|
|
</div></td><td class="summaryTableOwnerCol">SlowMo</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#config()" class="signatureLink">config</a>(linearRatio:Number = 0.7, power:Number = 0.7, yoyoMode:Boolean = false):<a href="../../../com/greensock/easing/SlowMo.html">SlowMo</a></div><div class="summaryTableDescription">
|
|
Permits customization of the ease with various parameters.</div></td><td class="summaryTableOwnerCol">SlowMo</td></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getRatio()" class="signatureLink">getRatio</a>(p:Number):Number</div><div class="summaryTableDescription">[override]
|
|
Translates the tween's progress ratio into the corresponding ease ratio.</div></td><td class="summaryTableOwnerCol">SlowMo</td></tr></table></div><script language="javascript" type="text/javascript"><!--
|
|
showHideInherited();
|
|
--></script><div class="MainContent"><div class="detailSectionHeader">Property Detail</div><a name="propertyDetail"></a><a name="ease"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">ease</td><td class="detailHeaderType">property</td></tr></table><div class="detailBody"><code>public static var ease:<a href="../../../com/greensock/easing/SlowMo.html">SlowMo</a></code><p></p><p></p><p> The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time. </p></div><a name="constructorDetail"></a><div class="detailSectionHeader">Constructor Detail</div><a name="SlowMo()"></a><a name="SlowMo(Number,Number,Boolean)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">SlowMo</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">Constructor</td></tr></table><div class="detailBody"><code>public function SlowMo(linearRatio:Number = 0.7, power:Number = 0.7, yoyoMode:Boolean = false)</code><p></p><p>
|
|
Constructor
|
|
|
|
</p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">linearRatio</span>:Number</code> (default = <code>0.7</code>)<code></code> — the proportion of the ease during which the rate of change will be linear (steady pace). This should be a number between 0 and 1. For example, 0.5 would be half, so the first 25% of the ease would be easing out (decelerating), then 50% would be linear, then the final 25% would be easing in (accelerating). If you choose 0.8, that would mean 80% of the ease would be linear, leaving 10% on each end to ease. The default is 0.7.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">power</span>:Number</code> (default = <code>0.7</code>)<code></code> — The strength of the ease at each end. If you define a value above 1, it will actually reverse the linear portion in the middle which can create interesting effects. The default is 0.7.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">yoyoMode</span>:Boolean</code> (default = <code>false</code>)<code></code> — If <code>true</code>, the ease will reach its destination value mid-tween and maintain it during the entire linear mode and then go back to the original value at the end (like a yoyo of sorts). This can be very useful if, for example, you want the alpha (or some other property) of some text to fade at the front end of a SlowMo positional ease and then back down again at the end of that positional SlowMo tween. Otherwise you would need to create separate tweens for the beginning and ending fades that match up with that positional tween. Example: <code>TweenLite.to(myText, 5, {x:600, ease:SlowMo.ease.config(0.7, 0.7, false)}); TweenLite.from(myText, 5, {alpha:0, ease:SlowMo.ease.config(0.7, 0.7, true)});</code>
|
|
</td></tr></table></div><a name="methodDetail"></a><div class="detailSectionHeader">Method Detail</div><a name="config()"></a><a name="config(Number,Number,Boolean)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">config</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td></tr></table><div class="detailBody"><code> public function config(linearRatio:Number = 0.7, power:Number = 0.7, yoyoMode:Boolean = false):<a href="../../../com/greensock/easing/SlowMo.html">SlowMo</a></code><p></p><p></p><p>
|
|
Permits customization of the ease with various parameters.
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">linearRatio</span>:Number</code> (default = <code>0.7</code>)<code></code> — the proportion of the ease during which the rate of change will be linear (steady pace). This should be a number between 0 and 1. For example, 0.5 would be half, so the first 25% of the ease would be easing out (decelerating), then 50% would be linear, then the final 25% would be easing in (accelerating). If you choose 0.8, that would mean 80% of the ease would be linear, leaving 10% on each end to ease. The default is 0.7.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">power</span>:Number</code> (default = <code>0.7</code>)<code></code> — The strength of the ease at each end. If you define a value above 1, it will actually reverse the linear portion in the middle which can create interesting effects. The default is 0.7.
|
|
</td></tr><tr><td class="paramSpacer"> </td></tr><tr><td width="20px"></td><td><code><span class="label">yoyoMode</span>:Boolean</code> (default = <code>false</code>)<code></code> — If <code>true</code>, the ease will reach its destination value mid-tween and maintain it during the entire linear mode and then go back to the original value at the end (like a yoyo of sorts). This can be very useful if, for example, you want the alpha (or some other property) of some text to fade at the front end of a SlowMo positional ease and then back down again at the end of that positional SlowMo tween. Otherwise you would need to create separate tweens for the beginning and ending fades that match up with that positional tween. Example: <code>TweenLite.to(myText, 5, {x:600, ease:SlowMo.ease.config(0.7, 0.7, false)}); TweenLite.from(myText, 5, {alpha:0, ease:SlowMo.ease.config(0.7, 0.7, true)});</code>
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code><a href="../../../com/greensock/easing/SlowMo.html">SlowMo</a></code> — new SlowMo instance that is configured according to the parameters provided
|
|
</td></tr></table></div><a name="getRatio()"></a><a name="getRatio(Number)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getRatio</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule"> </td></tr></table><div class="detailBody"><code>override public function getRatio(p:Number):Number</code><p></p><p></p><p>
|
|
Translates the tween's progress ratio into the corresponding ease ratio. This is the heart of the Ease, where it does all its work.
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">p</span>:Number</code> — progress ratio (a value between 0 and 1 indicating the progress of the tween/ease)
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>Number</code> — translated number
|
|
</td></tr></table></div><a name="includeExamplesSummary"></a><div class="detailSectionHeader">Examples</div><div class="detailBody">Example AS3 example:<div class="listing" version="3.0"><pre>
|
|
import com.greensock.*;
|
|
import com.greensock.easing.*;
|
|
|
|
//use the default SlowMo ease (linearRatio of 0.7 and power of 0.7)
|
|
TweenLite.to(myText, 5, {x:600, ease:SlowMo.ease});
|
|
|
|
//use a new SlowMo ease with 50% of the tween being linear (2.5 seconds) and a power of 0.8
|
|
TweenLite.to(myText, 5, {x:600, ease:new SlowMo(0.5, 0.8)});
|
|
|
|
//this gives the exact same effect as the line above, but uses a different syntax
|
|
TweenLite.to(myText, 5, {x:600, ease:SlowMo.ease.config(0.5, 0.8)});
|
|
|
|
//now let's create an alpha tween that syncs with the above positional tween, fading it in at the beginning and out at the end
|
|
myText.alpha = 0;
|
|
TweenLite.to(myText, 5, {alpha:1, ease:SlowMo.ease.config(0.5, 0.8, true)});
|
|
</pre></div>
|
|
|
|
<p><b>Copyright 2012, GreenSock. All rights reserved.</b> This work is subject to the terms in <a href="http://www.greensock.com/terms_of_use.html" target="">http://www.greensock.com/terms_of_use.html</a> or for <a href="http://www.greensock.com/club/" target="">Club GreenSock</a> members, the software agreement that was issued with the membership.</p>
|
|
|
|
</div><br/><br/><hr><br/><p></p><center class="copyright"><footer></footer><br/>Thu Dec 20 2012, 04:30 PM -06:00 </center></div></body></html><!--<br/>Thu Dec 20 2012, 04:30 PM -06:00 --> |