phaser/docs/Phaser.Tween.html
2014-07-10 20:39:17 +01:00

3924 lines
No EOL
59 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phaser Class: Tween</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="index.html">Phaser</a>
<ul class="nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-0">
<a href="Phaser.html">Phaser</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1">
<a href="Phaser.Animation.html">Animation</a>
</li>
<li class="class-depth-1">
<a href="Phaser.AnimationManager.html">AnimationManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.AnimationParser.html">AnimationParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ArrayList.html">ArrayList</a>
</li>
<li class="class-depth-1">
<a href="Phaser.BitmapData.html">BitmapData</a>
</li>
<li class="class-depth-1">
<a href="Phaser.BitmapText.html">BitmapText</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Button.html">Button</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Cache.html">Cache</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Camera.html">Camera</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Canvas.html">Canvas</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Circle.html">Circle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Color.html">Color</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Device.html">Device</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Easing.html">Easing</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Back.html">Back</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Bounce.html">Bounce</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Circular.html">Circular</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Cubic.html">Cubic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Elastic.html">Elastic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Exponential.html">Exponential</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Linear.html">Linear</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quartic.html">Quartic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quintic.html">Quintic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Ellipse.html">Ellipse</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Events.html">Events</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Filter.html">Filter</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Frame.html">Frame</a>
</li>
<li class="class-depth-1">
<a href="Phaser.FrameData.html">FrameData</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Game.html">Game</a>
</li>
<li class="class-depth-1">
<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
</li>
<li class="class-depth-1">
<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Gamepad.html">Gamepad</a>
</li>
<li class="class-depth-1">
<a href="Phaser.GamepadButton.html">GamepadButton</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Graphics.html">Graphics</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Group.html">Group</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Image.html">Image</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Input.html">Input</a>
</li>
<li class="class-depth-1">
<a href="Phaser.InputHandler.html">InputHandler</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Key.html">Key</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Keyboard.html">Keyboard</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Line.html">Line</a>
</li>
<li class="class-depth-1">
<a href="Phaser.LinkedList.html">LinkedList</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Loader.html">Loader</a>
</li>
<li class="class-depth-1">
<a href="Phaser.LoaderParser.html">LoaderParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Math.html">Math</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Mouse.html">Mouse</a>
</li>
<li class="class-depth-1">
<a href="Phaser.MSPointer.html">MSPointer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Net.html">Net</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Particle.html">Particle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Particles.html">Particles</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Physics.html">Physics</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.Arcade.html">Arcade</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Arcade.Body.html">Body</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.Ninja.html">Ninja</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Body.html">Body</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.P2.html">P2</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Body.html">Body</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Material.html">Material</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Spring.html">Spring</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Plugin.html">Plugin</a>
</li>
<li class="class-depth-1">
<a href="Phaser.PluginManager.html">PluginManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Point.html">Point</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Pointer.html">Pointer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Polygon.html">Polygon</a>
</li>
<li class="class-depth-1">
<a href="Phaser.QuadTree.html">QuadTree</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Rectangle.html">Rectangle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RenderTexture.html">RenderTexture</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RetroFont.html">RetroFont</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ScaleManager.html">ScaleManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Signal.html">Signal</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SignalBinding.html">SignalBinding</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SinglePad.html">SinglePad</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Sound.html">Sound</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SoundManager.html">SoundManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Sprite.html">Sprite</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Stage.html">Stage</a>
</li>
<li class="class-depth-1">
<a href="Phaser.State.html">State</a>
</li>
<li class="class-depth-1">
<a href="Phaser.StateManager.html">StateManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Text.html">Text</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tile.html">Tile</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tilemap.html">Tilemap</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TilemapParser.html">TilemapParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tileset.html">Tileset</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TileSprite.html">TileSprite</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Time.html">Time</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Timer.html">Timer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TimerEvent.html">TimerEvent</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Touch.html">Touch</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tween.html">Tween</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TweenManager.html">TweenManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Utils.html">Utils</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Utils.Debug.html">Debug</a>
</li>
<li class="class-depth-1">
<a href="Phaser.World.html">World</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<h1 class="page-title">Class: Tween</h1>
<section>
<header>
<h2>
<span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
Tween
</h2>
<div class="class-description"><p>Phaser.Tween</p></div>
</header>
<article>
<div class="container-overview">
<dt>
<h4 class="name" id="Tween"><span class="type-signature"></span>new Tween<span class="signature">(object, game, manager)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Tween constructor
Create a new &lt;code&gt;Tween&lt;/code&gt;.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>object</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>Target object will be affected by this tween.</p></td>
</tr>
<tr>
<td class="name"><code>game</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>
</td>
<td class="description last"><p>Current game instance.</p></td>
</tr>
<tr>
<td class="name"><code>manager</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.TweenManager.html">Phaser.TweenManager</a></span>
</td>
<td class="description last"><p>The TweenManager responsible for looking after this Tween.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-17">line 17</a>
</li></ul></dd>
</dl>
</dd>
</div>
<h3 class="subsection-title">Members</h3>
<dl>
<dt>
<h4 class="name" id="game"><span class="type-signature"></span>game<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>game</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>
</td>
<td class="description last"><p>A reference to the currently running Game.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-29">line 29</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="isRunning"><span class="type-signature"></span>isRunning<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>isRunning</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>If the tween is running this is set to true, otherwise false. Tweens that are in a delayed state, waiting to start, are considered as being running.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-187">line 187</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="onComplete"><span class="type-signature"></span>onComplete<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>onComplete</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Signal.html">Phaser.Signal</a></span>
</td>
<td class="description last"><p>The onComplete event is fired when the Tween completes. Does not fire if the Tween is set to loop.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-181">line 181</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="onLoop"><span class="type-signature"></span>onLoop<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>onLoop</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Signal.html">Phaser.Signal</a></span>
</td>
<td class="description last"><p>The onLoop event is fired if the Tween loops.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-176">line 176</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="onStart"><span class="type-signature"></span>onStart<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>onStart</code></td>
<td class="type">
<span class="param-type"><a href="Phaser.Signal.html">Phaser.Signal</a></span>
</td>
<td class="description last"><p>The onStart event is fired when the Tween begins.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-171">line 171</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="pendingDelete"><span class="type-signature"></span>pendingDelete<span class="type-signature"></span></h4>
</dt>
<dd>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>pendingDelete</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>If this tween is ready to be deleted by the TweenManager.</p></td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-default">Default Value:</dt>
<dd class="tag-default"><ul class="dummy"><li>false</li></ul></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-160">line 160</a>
</li></ul></dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="chain"><span class="type-signature"></span>chain<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>You can chain tweens together by passing a reference to the chain function. This enables one tween to call another on completion.
You can pass as many tweens as you like to this function, they will each be chained in sequence.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-548">line 548</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="delay"><span class="type-signature"></span>delay<span class="signature">(amount)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Sets a delay time before this tween will start.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>amount</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The amount of the delay in ms.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-469">line 469</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="easing"><span class="type-signature"></span>easing<span class="signature">(easing)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Set easing function this tween will use, i.e. Phaser.Easing.Linear.None.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>easing</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>The easing function this tween will use, i.e. Phaser.Easing.Linear.None.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-519">line 519</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="from"><span class="type-signature"></span>from<span class="signature">(properties, <span class="optional">duration</span>, <span class="optional">ease</span>, <span class="optional">autoStart</span>, <span class="optional">delay</span>, <span class="optional">repeat</span>, <span class="optional">yoyo</span>)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Sets this tween to be a <code>from</code> tween on the properties given. A <code>from</code> tween starts at the given value and tweens to the current values.
For example a Sprite with an <code>x</code> coordinate of 100 could be tweened from <code>x: 200</code> by giving a properties object of <code>{ x: 200 }</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>properties</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>Properties you want to tween from.</p></td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1000
</td>
<td class="description last"><p>Duration of this tween in ms.</p></td>
</tr>
<tr>
<td class="name"><code>ease</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
null
</td>
<td class="description last"><p>Easing function. If not set it will default to Phaser.Easing.Linear.None.</p></td>
</tr>
<tr>
<td class="name"><code>autoStart</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Whether this tween will start automatically or not.</p></td>
</tr>
<tr>
<td class="name"><code>delay</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Delay before this tween will start, defaults to 0 (no delay). Value given is in ms.</p></td>
</tr>
<tr>
<td class="name"><code>repeat</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Should the tween automatically restart once complete? If you want it to run forever set as Number.MAX_VALUE. This ignores any chained tweens.</p></td>
</tr>
<tr>
<td class="name"><code>yoyo</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>A tween that yoyos will reverse itself and play backwards automatically. A yoyo'd tween doesn't fire the Tween.onComplete event, so listen for Tween.onLoop instead.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-263">line 263</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>This Tween object.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="generateData"><span class="type-signature"></span>generateData<span class="signature">(<span class="optional">frameRate</span>, <span class="optional">data</span>)</span><span class="type-signature"> &rarr; {array}</span></h4>
</dt>
<dd>
<div class="description">
<p>This will generate an array populated with the tweened object values from start to end.
It works by running the tween simulation at the given frame rate based on the values set-up in Tween.to and similar functions.
It ignores delay and repeat counts and any chained tweens. Just one play through of tween data is returned, including yoyo if set.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>frameRate</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
60
</td>
<td class="description last"><p>The speed in frames per second that the data should be generated at. The higher the value, the larger the array it creates.</p></td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>If given the generated data will be appended to this array, otherwise a new array will be returned.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-341">line 341</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>An array of tweened values.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">array</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="interpolation"><span class="type-signature"></span>interpolation<span class="signature">(interpolation)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Set interpolation function the tween will use, by default it uses Phaser.Math.linearInterpolation.
Also available: Phaser.Math.bezierInterpolation and Phaser.Math.catmullRomInterpolation.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>interpolation</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>The interpolation function to use (Phaser.Math.linearInterpolation by default)</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-533">line 533</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="loop"><span class="type-signature"></span>loop<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Loop a chain of tweens</p>
<p>Usage:
game.add.tween(p).to({ x: 700 }, 1000, Phaser.Easing.Linear.None, true)
.to({ y: 300 }, 1000, Phaser.Easing.Linear.None)
.to({ x: 0 }, 1000, Phaser.Easing.Linear.None)
.to({ y: 0 }, 1000, Phaser.Easing.Linear.None)
.loop();</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-562">line 562</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="onUpdateCallback"><span class="type-signature"></span>onUpdateCallback<span class="signature">(callback, callbackContext)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Sets a callback to be fired each time this tween updates.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last"><p>The callback to invoke each time this tween is updated.</p></td>
</tr>
<tr>
<td class="name"><code>callbackContext</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>The context in which to call the onUpdate callback.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-581">line 581</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="pause"><span class="type-signature"></span>pause<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Pauses the tween.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-598">line 598</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="repeat"><span class="type-signature"></span>repeat<span class="signature">(times)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Sets the number of times this tween will repeat.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>times</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>How many times to repeat.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-483">line 483</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="resume"><span class="type-signature"></span>resume<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Resumes a paused tween.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-626">line 626</a>
</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Starts the tween running. Can also be called by the autoStart parameter of Tween.to.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-291">line 291</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Stops the tween if running and removes it from the TweenManager. If there are any onComplete callbacks or events they are not dispatched.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-451">line 451</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="to"><span class="type-signature"></span>to<span class="signature">(properties, <span class="optional">duration</span>, <span class="optional">ease</span>, <span class="optional">autoStart</span>, <span class="optional">delay</span>, <span class="optional">repeat</span>, <span class="optional">yoyo</span>)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Sets this tween to be a <code>to</code> tween on the properties given. A <code>to</code> tween starts at the current value and tweens to the destination value given.
For example a Sprite with an <code>x</code> coordinate of 100 could be tweened to <code>x</code> 200 by giving a properties object of <code>{ x: 200 }</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>properties</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The properties you want to tween, such as <code>Sprite.x</code> or <code>Sound.volume</code>. Given as a JavaScript object.</p></td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1000
</td>
<td class="description last"><p>Duration of this tween in ms.</p></td>
</tr>
<tr>
<td class="name"><code>ease</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
null
</td>
<td class="description last"><p>Easing function. If not set it will default to Phaser.Easing.Linear.None.</p></td>
</tr>
<tr>
<td class="name"><code>autoStart</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Whether this tween will start automatically or not.</p></td>
</tr>
<tr>
<td class="name"><code>delay</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Delay before this tween will start, defaults to 0 (no delay). Value given is in ms.</p></td>
</tr>
<tr>
<td class="name"><code>repeat</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Should the tween automatically restart once complete? If you want it to run forever set as Number.MAX_VALUE. This ignores any chained tweens.</p></td>
</tr>
<tr>
<td class="name"><code>yoyo</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>A tween that yoyos will reverse itself and play backwards automatically. A yoyo'd tween doesn't fire the Tween.onComplete event, so listen for Tween.onLoop instead.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-193">line 193</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>This Tween object.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(time)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
</dt>
<dd>
<div class="description">
<p>Core tween update function called by the TweenManager. Does not need to be invoked directly.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>time</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>A timestamp passed in by the TweenManager.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-662">line 662</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>false if the tween has completed and should be deleted from the manager, otherwise true (still active).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="yoyo"><span class="type-signature"></span>yoyo<span class="signature">(yoyo)</span><span class="type-signature"> &rarr; {<a href="Phaser.Tween.html">Phaser.Tween</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>A tween that has yoyo set to true will run through from start to finish, then reverse from finish to start.
Used in combination with repeat you can create endless loops.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>yoyo</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>Set to true to yoyo this tween.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Tween.js.html">tween/Tween.js</a>, <a href="Tween.js.html#sunlight-1-line-498">line 498</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="Phaser.Tween.html">Phaser.Tween</a></span>
</dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<span class="copyright">
Phaser Copyright © 2012-2014 Photon Storm Ltd.
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
on Thu Jul 10 2014 20:19:16 GMT+0100 (BST) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<script src="scripts/sunlight.js"></script>
<script src="scripts/sunlight.javascript.js"></script>
<script src="scripts/sunlight-plugin.doclinks.js"></script>
<script src="scripts/sunlight-plugin.linenumbers.js"></script>
<script src="scripts/sunlight-plugin.menu.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.scrollTo.js"></script>
<script src="scripts/jquery.localScroll.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
<script>
$( function () {
$( "#toc" ).toc( {
anchorName : function(i, heading, prefix) {
return $(heading).attr("id") || ( prefix + i );
},
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
</script>
</body>
</html>