qd-changjing/public/static/Build/Documentation/Animation.html

779 lines
56 KiB
HTML
Raw Normal View History

2022-07-05 16:56:29 +08:00
<!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: &lt;div id="animationContainer">&lt;/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> &rarr; <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>