779 lines
56 KiB
HTML
779 lines
56 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
<title>Animation - Cesium Documentation</title>
|
||
|
|
||
|
<!--[if lt IE 9]>
|
||
|
<script src="javascript/html5.js"></script>
|
||
|
<![endif]-->
|
||
|
<link href="styles/jsdoc-default.css" rel="stylesheet">
|
||
|
<link href="styles/prism.css" rel="stylesheet">
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<div id="main">
|
||
|
|
||
|
<h1 class="page-title">
|
||
|
<a href="index.html"><img src="Images/CesiumLogo.png" class="cesiumLogo"></a>
|
||
|
Animation
|
||
|
<div class="titleCenterer"></div>
|
||
|
</h1>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<section>
|
||
|
|
||
|
<header>
|
||
|
|
||
|
</header>
|
||
|
|
||
|
<article>
|
||
|
<div class="container-overview">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="Animation">
|
||
|
<a href="#Animation" class="doc-link"></a>
|
||
|
new Cesium.Animation<span class="signature">(container, viewModel)</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L434">Widgets/Animation/Animation.js 434</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
<span style="display: block; text-align: center;">
|
||
|
<img src="Images/AnimationWidget.png" width="211" height="142" alt="" />
|
||
|
<br />Animation widget
|
||
|
</span>
|
||
|
<br /><br />
|
||
|
The Animation widget provides buttons for play, pause, and reverse, along with the
|
||
|
current time and date, surrounded by a "shuttle ring" for controlling the speed of animation.
|
||
|
<br /><br />
|
||
|
The "shuttle ring" concept is borrowed from video editing, where typically a
|
||
|
"jog wheel" can be rotated to move past individual animation frames very slowly, and
|
||
|
a surrounding shuttle ring can be twisted to control direction and speed of fast playback.
|
||
|
Cesium typically treats time as continuous (not broken into pre-defined animation frames),
|
||
|
so this widget offers no jog wheel. Instead, the shuttle ring is capable of both fast and
|
||
|
very slow playback. Click and drag the shuttle ring pointer itself (shown above in green),
|
||
|
or click in the rest of the ring area to nudge the pointer to the next preset speed in that direction.
|
||
|
<br /><br />
|
||
|
The Animation widget also provides a "realtime" button (in the upper-left) that keeps
|
||
|
animation time in sync with the end user's system clock, typically displaying
|
||
|
"today" or "right now." This mode is not available in <a href="global.html#ClockRange#.CLAMPED"><code>ClockRange.CLAMPED</code></a> or
|
||
|
<a href="global.html#ClockRange#.LOOP_STOP"><code>ClockRange.LOOP_STOP</code></a> mode if the current time is outside of <a href="Clock.html"><code>Clock</code></a>'s startTime and endTime.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<table class="params">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
|
||
|
<th>Name</th>
|
||
|
|
||
|
|
||
|
<th>Type</th>
|
||
|
|
||
|
|
||
|
|
||
|
<th class="last">Description</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
|
||
|
<tbody>
|
||
|
|
||
|
|
||
|
<tr>
|
||
|
|
||
|
<td class="name"><code>container</code></td>
|
||
|
|
||
|
|
||
|
<td class="type">
|
||
|
|
||
|
|
||
|
<span class="param-type">Element</span>
|
||
|
|
|
||
|
|
||
|
<span class="param-type">String</span>
|
||
|
|
||
|
|
||
|
|
||
|
</td>
|
||
|
|
||
|
|
||
|
|
||
|
<td class="description last">
|
||
|
|
||
|
The DOM element or ID that will contain the widget.</td>
|
||
|
</tr>
|
||
|
|
||
|
|
||
|
|
||
|
<tr>
|
||
|
|
||
|
<td class="name"><code>viewModel</code></td>
|
||
|
|
||
|
|
||
|
<td class="type">
|
||
|
|
||
|
|
||
|
<span class="param-type"><a href="AnimationViewModel.html">AnimationViewModel</a></span>
|
||
|
|
||
|
|
||
|
|
||
|
</td>
|
||
|
|
||
|
|
||
|
|
||
|
<td class="description last">
|
||
|
|
||
|
The view model used by this widget.</td>
|
||
|
</tr>
|
||
|
|
||
|
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h5>Throws:</h5>
|
||
|
<ul>
|
||
|
<li>
|
||
|
|
||
|
<div class="param-desc">
|
||
|
|
||
|
<span class="param-type"><a href="DeveloperError.html">DeveloperError</a></span>
|
||
|
|
||
|
: Element with id "container" does not exist in the document.
|
||
|
</div>
|
||
|
|
||
|
</li>
|
||
|
</ul>
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h5>Example:</h5>
|
||
|
|
||
|
<pre><code class="language-javascript">// In HTML head, include a link to Animation.css stylesheet,
|
||
|
// and in the body, include: <div id="animationContainer"></div>
|
||
|
|
||
|
const clock = new Cesium.Clock();
|
||
|
const clockViewModel = new Cesium.ClockViewModel(clock);
|
||
|
const viewModel = new Cesium.AnimationViewModel(clockViewModel);
|
||
|
const widget = new Cesium.Animation('animationContainer', viewModel);
|
||
|
|
||
|
function tick() {
|
||
|
clock.tick();
|
||
|
Cesium.requestAnimationFrame(tick);
|
||
|
}
|
||
|
Cesium.requestAnimationFrame(tick);</code></pre>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h5>See:</h5>
|
||
|
<ul class="see-list">
|
||
|
<li><a href="AnimationViewModel.html">AnimationViewModel</a></li>
|
||
|
|
||
|
<li><a href="Clock.html">Clock</a></li>
|
||
|
</ul>
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h3 class="subsection-title">Members</h3>
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="container">
|
||
|
<a href="#container" class="doc-link"></a>
|
||
|
<span class="type-signature attribute-readonly">readonly</span> container<span class="type-signature"> : Element</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L716">Widgets/Animation/Animation.js 716</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
Gets the parent container.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="viewModel">
|
||
|
<a href="#viewModel" class="doc-link"></a>
|
||
|
<span class="type-signature attribute-readonly">readonly</span> viewModel<span class="type-signature"> : <a href="AnimationViewModel.html">AnimationViewModel</a></span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L729">Widgets/Animation/Animation.js 729</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
Gets the view model.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h3 class="subsection-title">Methods</h3>
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="applyThemeChanges">
|
||
|
<a href="#applyThemeChanges" class="doc-link"></a>
|
||
|
applyThemeChanges<span class="signature">()</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L865">Widgets/Animation/Animation.js 865</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
Updates the widget to reflect any modified CSS rules for theming.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h5>Example:</h5>
|
||
|
|
||
|
<pre><code class="language-javascript">//Switch to the cesium-lighter theme.
|
||
|
document.body.className = 'cesium-lighter';
|
||
|
animation.applyThemeChanges();</code></pre>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="destroy">
|
||
|
<a href="#destroy" class="doc-link"></a>
|
||
|
destroy<span class="signature">()</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L747">Widgets/Animation/Animation.js 747</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
Destroys the animation widget. Should be called if permanently
|
||
|
removing the widget from layout.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="isDestroyed">
|
||
|
<a href="#isDestroyed" class="doc-link"></a>
|
||
|
isDestroyed<span class="signature">()</span> → <span class="type-signature returnType">Boolean</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L739">Widgets/Animation/Animation.js 739</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<h5>Returns:</h5>
|
||
|
|
||
|
|
||
|
<div class="param-desc">
|
||
|
true if the object has been destroyed, false otherwise.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="nameContainer">
|
||
|
<h4 class="name" id="resize">
|
||
|
<a href="#resize" class="doc-link"></a>
|
||
|
resize<span class="signature">()</span>
|
||
|
|
||
|
|
||
|
<div class="source-link rightLinks">
|
||
|
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Widgets/Animation/Animation.js#L813">Widgets/Animation/Animation.js 813</a>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</h4>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<div class="description">
|
||
|
Resizes the widget to match the container size.
|
||
|
This function should be called whenever the container size is changed.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<dl class="details">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</dl>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</article>
|
||
|
|
||
|
</section>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<footer>
|
||
|
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a>
|
||
|
</footer>
|
||
|
</div>
|
||
|
|
||
|
<div class="nav">
|
||
|
<div class="menu">
|
||
|
<input type="text" class="classFilter" id="ClassFilter" placeholder="Search">
|
||
|
<ul id="ClassList"><li data-name="Animation"><a href="Animation.html">Animation</a></li><li data-name="AnimationViewModel"><a href="AnimationViewModel.html">AnimationViewModel</a></li><li data-name="Appearance"><a href="Appearance.html">Appearance</a></li><li data-name="ArcGisMapServerImageryProvider"><a href="ArcGisMapServerImageryProvider.html">ArcGisMapServerImageryProvider</a></li><li data-name="ArcGISTiledElevationTerrainProvider"><a href="ArcGISTiledElevationTerrainProvider.html">ArcGISTiledElevationTerrainProvider</a></li><li data-name="ArcType"><a href="global.html#ArcType">ArcType</a></li><li data-name="AssociativeArray"><a href="AssociativeArray.html">AssociativeArray</a></li><li data-name="Axis"><a href="global.html#Axis">Axis</a></li><li data-name="AxisAlignedBoundingBox"><a href="AxisAlignedBoundingBox.html">AxisAlignedBoundingBox</a></li><li data-name="backFaceCulling"><a href="global.html#backFaceCulling">backFaceCulling</a></li><li data-name="barycentricCoordinates"><a href="global.html#barycentricCoordinates">barycentricCoordinates</a></li><li data-name="BaseLayerPicker"><a href="BaseLayerPicker.html">BaseLayerPicker</a></li><li data-name="BaseLayerPickerViewModel"><a href="BaseLayerPickerViewModel.html">BaseLayerPickerViewModel</a></li><li data-name="Billboard"><a href="Billboard.html">Billboard</a></li><li data-name="BillboardCollection"><a href="BillboardCollection.html">BillboardCollection</a></li><li data-name="BillboardGraphics"><a href="BillboardGraphics.html">BillboardGraphics</a></li><li data-name="BillboardVisualizer"><a href="BillboardVisualizer.html">BillboardVisualizer</a></li><li data-name="binarySearch"><a href="global.html#binarySearch">binarySearch</a></li><li data-name="binarySearchComparator"><a href="global.html#binarySearchComparator">binarySearchComparator</a></li><li data-name="BingMapsGeocoderService"><a href="BingMapsGeocoderService.html">BingMapsGeocoderService</a></li><li data-name="BingMapsImageryProvider"><a href="BingMapsImageryProvider.html">BingMapsImageryProvider</a></li><li data-name="BingMapsStyle"><a href="global.html#BingMapsStyle">BingMapsStyle</a></li><li data-name="BlendEquation"><a href="global.html#BlendEquation">BlendEquation</a></li><li data-name="BlendFunction"><a href="global.html#BlendFunction">BlendFunction</a></li><li data-name="BlendingState"><a href="BlendingState.html">BlendingState</a></li><li data-name="BlendOption"><a href="global.html#BlendOption">BlendOption</a></li><li data-name="BoundingRectangle"><a href="BoundingRectangle.html">BoundingRectangle</a></li><li data-name="BoundingSphere"><a href="BoundingSphere.html">BoundingSphere</a></li><li data-name="boundingSphere"><a href="global.html#boundingSphere">boundingSphere</a></li><li data-name="BoxEmitter"><a href="BoxEmitter.html">BoxEmitter</a></li><li data-name="BoxGeometry"><a href="BoxGeometry.html">BoxGeometry</a></li><li data-name="BoxGeometryUpdater"><a href="BoxGeometryUpdater.html">BoxGeometryUpdater</a></li><li data-name="BoxGraphics"><a href="BoxGraphics.html">BoxGraphics</a></li><li data-name="BoxOutlineGeometry"><a href="BoxOutlineGeometry.html">BoxOutlineGeometry</a></li><li data-name="buildModuleUrl"><a href="global.html#buildModuleUrl">buildModuleUrl</a></li><li data-name="CallbackProperty"><a href="CallbackProperty.html">CallbackProperty</a></li><li data-name="Camera"><a href="Camera.html">Camera</a></li><li data-name="CameraEventAggregator"><a href="CameraEventAggregator.html">CameraEventAggregator</a></li><li data-name="CameraEventType"><a href="global.html#CameraEventType">CameraEventType</a></li><li data-name="cancelAnimationFrame"><a href="global.html#cancelAnimationFrame">cancelAnimationFrame</a></li><li data-name="Cartesian2"><a href="Cartesian2.html">Cartesian2</a></li><li data-name="Cartesian3"><a href="Cartesian3.html">Cartesian3</a></li><li data-name="Cartesian4"><a href="Cartesian4.html">Cartesian4</a></li><li data-name="Cartographic"><a href="Cartographic.html">Cartographic</a></li><li data-name="CartographicGeocoderService"><a href="CartographicGeocoderServic
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<script>
|
||
|
if (window.frameElement) {
|
||
|
document.body.className = 'embedded';
|
||
|
|
||
|
var ele = document.createElement('a');
|
||
|
ele.className = 'popout';
|
||
|
ele.target = '_blank';
|
||
|
ele.href = window.location.href;
|
||
|
ele.title = 'Pop out';
|
||
|
document.getElementById('main').appendChild(ele);
|
||
|
}
|
||
|
|
||
|
// Set targets on external links. Sandcastle and GitHub shouldn't be embedded in any iframe.
|
||
|
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
|
||
|
if (/^https?:/i.test(a.getAttribute('href'))) {
|
||
|
a.target='_blank';
|
||
|
}
|
||
|
});
|
||
|
</script>
|
||
|
|
||
|
<script src="javascript/prism.js"></script>
|
||
|
<script src="javascript/cesiumDoc.js"></script>
|
||
|
|
||
|
</body>
|
||
|
</html>
|