Cesium JS API
AppearanceArcGisMapServerImageryProviderArcGISTiledElevationTerrainProviderArcTypeAssociativeArrayAxisAxisAlignedBoundingBoxbarycentricCoordinatesBillboardBillboardCollectionBillboardGraphicsBillboardVisualizerbinarySearchbinarySearchComparatorBingMapsGeocoderServiceBingMapsImageryProviderBingMapsStyleBlendEquationBlendFunctionBlendingStateBlendOptionBoundingRectangleBoundingSphereBoxEmitterBoxGeometryBoxGeometryUpdaterBoxGraphicsBoxOutlineGeometrybuildModuleUrlCallbackPropertyCameraCameraEventAggregatorCameraEventTypeCartesian2Cartesian3Cartesian4CartographicCartographicGeocoderServiceCatmullRomSplineCesium3DTileCesium3DTileColorBlendModeCesium3DTileContentCesium3DTileFeatureCesium3DTilePointFeatureCesium3DTilesetCesium3DTilesetGraphicsCesium3DTilesetVisualizerCesium3DTileStyleCesium3DTilesVoxelProviderCesiumTerrainProviderCesiumWidgetCheckerboardMaterialPropertyCircleEmitterCircleGeometryCircleOutlineGeometryClassificationPrimitiveClassificationTypeClippingPlaneClippingPlaneCollectionClockClockRangeClockStepcloneCloudCollectionCloudTypeColorColorBlendModeColorGeometryInstanceAttributeColorMaterialPropertycombineComponentDatatypeCompositeEntityCollectionCompositeMaterialPropertyCompositePositionPropertyCompositePropertyCompressedTextureBufferConditionsExpressionConeEmitterConstantPositionPropertyConstantPropertyConstantSplineContextOptionsCoplanarPolygonGeometryCoplanarPolygonOutlineGeometryCornerTypeCorridorGeometryCorridorGeometryUpdaterCorridorGraphicsCorridorOutlineGeometrycreateElevationBandMaterialcreateElevationBandMaterialBandcreateElevationBandMaterialEntrycreateGuidcreateOsmBuildingscreateTangentSpaceDebugPrimitivecreateWorldImagerycreateWorldTerrainCreditCreditDisplayCubicRealPolynomialCullFaceCullingVolumeCumulusCloudCustomDataSourceCustomHeightmapTerrainProviderCustomShaderCustomShaderModeCustomShaderTranslucencyModeCylinderGeometryCylinderGeometryUpdaterCylinderGraphicsCylinderOutlineGeometryCzmlDataSourceDataSourceDataSourceClockDataSourceCollectionDataSourceDisplayDebugAppearanceDebugCameraPrimitiveDebugModelMatrixPrimitiveDefaultProxydefaultValuedefinedDepthFunctiondestroyObjectDeveloperErrorDirectionalLightDirectionUpDiscardEmptyTileImagePolicyDiscardMissingTileImagePolicyDistanceDisplayConditionDistanceDisplayConditionGeometryInstanceAttributeEasingFunctionEllipseGeometryEllipseGeometryUpdaterEllipseGraphicsEllipseOutlineGeometryEllipsoidEllipsoidGeodesicEllipsoidGeometryEllipsoidGeometryUpdaterEllipsoidGraphicsEllipsoidOutlineGeometryEllipsoidRhumbLineEllipsoidSurfaceAppearanceEllipsoidTangentPlaneEllipsoidTerrainProviderEntityEntityClusterEntityCollectionEntityViewEventEventHelperexcludesReverseAxisexportKmlexportKmlModelCallbackexportKmlResultKmlexportKmlResultKmzExpressionExtrapolationTypeFeatureDetectionFogformatErrorFrameRateMonitorFrustumGeometryFrustumOutlineGeometryFullscreenGeocoderServiceGeocodeTypeGeographicProjectionGeographicTilingSchemeGeoJsonDataSourceGeometryGeometryAttributeGeometryAttributesGeometryFactoryGeometryInstanceGeometryInstanceAttributeGeometryPipelineGeometryUpdaterGeometryVisualizergetAbsoluteUrigetBaseUrigetExtensionFromUriGetFeatureInfoFormatgetFilenameFromUrigetImagePixelsgetTimestampGlobeGlobeTranslucencyGoogleEarthEnterpriseImageryProviderGoogleEarthEnterpriseMapsProviderGoogleEarthEnterpriseMetadataGoogleEarthEnterpriseTerrainDataGoogleEarthEnterpriseTerrainProviderGpxDataSourceGregorianDateGridImageryProviderGridMaterialPropertyGroundGeometryUpdaterGroundPolylineGeometryGroundPolylinePrimitiveGroundPrimitiveHeadingPitchRangeHeadingPitchRollHeadingPitchRollValuesHeightmapEncodingHeightmapTerrainDataHeightReferenceHermitePolynomialApproximationHermiteSplineHilbertOrderHorizontalOriginI3SDataProviderI3SFeatureI3SFieldI3SGeometryI3SLayerI3SNodeImageBasedLightingImageMaterialPropertyImageryLayerImageryLayerCollectionImageryLayerFeatureInfoImageryProviderImageryTypesincludesReverseAxisIndexDatatypeIntersectIntersections2DIntersectionTestsIntervalIonIonGeocoderServiceIonImageryProviderIonResourceIonWorldImageryStyleisLeapYearIso8601JulianDateKeyboardEventModifierKmlCameraKmlDataSourceKmlFeatureDataKmlLookAtKmlTourKmlTourFlyToKmlTourWaitLabelLabelCollectionLabelGraphicsLabelStyleLabelVisualizerLagrangePolynomialApproximationLeapSecondLightLightingModelLinearApproximationLinearSplineMapboxImageryProviderMapboxStyleImageryProviderMapMode2DMapProjectionMaterialMaterialAppearanceMaterialSupportMaterialPropertyMathMatrix2Matrix3Matrix4mergeSortmergeSortComparatorMetadataClassMetadataClassPropertyMetadataComponentTypeMetadataEnumMetadataEnumValueMetadataSchemaMetadataTypeModelModelAnimationModelAnimationCollectionModelAnimationLoopModelFeatureModelGraphicsModelNodeModelVisualizerMoonMorphWeightSplineNearFarScalarNeverTileDiscardPolicyNodeTransformationPropertyobjectToQueryOccluderOpenCageGeocoderServiceOpenStreetMapImageryProviderOrientedBoundingBoxOrthographicFrustumOrthographicOffCenterFrustumPackableForInterpolationParticleParticleBurstParticleEmitterParticleSystemPathGraphicsPathVisualizerPeliasGeocoderServicePerInstanceColorAppearancePerspectiveFrustumPerspectiveOffCenterFrustumPinBuilderPixelDatatypePixelFormatPlanePlaneGeometryPlaneGeometryUpdaterPlaneGraphicsPlaneOutlineGeometryPointCloudShadingPointGraphicspointInsideTrianglePointPrimitivePointPrimitiveCollectionPointVisualizerPolygonGeometryPolygonGeometryUpdaterPolygonGraphicsPolygonHierarchyPolygonOutlineGeometryPolylinePolylineArrowMaterialPropertyPolylineCollectionPolylineColorAppearancePolylineDashMaterialPropertyPolylineGeometryPolylineGeometryUpdaterPolylineGlowMaterialPropertyPolylineGraphicsPolylineMaterialAppearancePolylineOutlineMaterialPropertyPolylineVisualizerPolylineVolumeGeometryPolylineVolumeGeometryUpdaterPolylineVolumeGraphicsPolylineVolumeOutlineGeometryPositionPropertyPositionPropertyArrayPostProcessStagePostProcessStageCollectionPostProcessStageCompositePostProcessStageLibraryPostProcessStageSampleModePrimitivePrimitiveCollectionPrimitiveTypePropertyPropertyArrayPropertyBagProxyQuadraticRealPolynomialQuantizedMeshTerrainDataQuarticRealPolynomialQuaternionQuaternionSplinequeryToObjectQueueRayreadyPromiseRectangleRectangleGeometryRectangleGeometryUpdaterRectangleGraphicsRectangleOutlineGeometryReferenceFrameReferencePropertyremoveExtensionRequestRequestErrorEventRequestSchedulerRequestStateRequestTypeResourceRuntimeErrorSampledPositionPropertySampledPropertysampleTerrainsampleTerrainMostDetailedSceneSceneModeSceneTransformsScreenSpaceCameraControllerScreenSpaceEventHandlerScreenSpaceEventTypeshaderDefinesshaderMaximumIntersectionsLengthshaderUniformsShadowMapShadowModeShowGeometryInstanceAttributeSimon1994PlanetaryPositionsSimplePolylineGeometrySingleTileImageryProviderSkyAtmosphereSkyBoxSphereEmitterSphereGeometrySphereOutlineGeometrySphericalSplineSplitDirectionStencilFunctionStencilOperationSteppedSplineStripeMaterialPropertyStripeOrientationStyleExpressionsubdivideArraySunSunLightTaskProcessorTerrainDataTerrainProviderTextureMagnificationFilterTextureMinificationFilterTextureUniformTileAvailabilityTileCoordinatesImageryProviderTileDiscardPolicyTileMapServiceImageryProviderTileProviderErrorTilingSchemeTimeDynamicImageryTimeDynamicPointCloudTimeIntervalTimeIntervalCollectionTimeIntervalCollectionPositionPropertyTimeIntervalCollectionPropertyTimeStandardTransformsTranslationRotationScaleTridiagonalSystemSolverTrustedServersUniformSpecifierUniformTypeUrlTemplateImageryProviderVaryingTypeVelocityOrientationPropertyVelocityVectorPropertyVertexFormatVerticalOriginVideoSynchronizerViewportQuadVisibilityVisualizerVoxelPrimitiveVoxelProviderVoxelShapeTypeVRTheWorldTerrainProviderWallGeometryWallGeometryUpdaterWallGraphicsWallOutlineGeometryWebGLConstantsWebGLOptionsWebMapServiceImageryProviderWebMapTileServiceImageryProviderWebMercatorProjectionWebMercatorTilingSchemeWindingOrderwriteTextToCanvasAnimationAnimationViewModelBaseLayerPickerBaseLayerPickerViewModelCesium3DTilesInspectorCesium3DTilesInspectorViewModelCesiumInspectorCesiumInspectorViewModelClockViewModelCommandcreateCommandFullscreenButtonFullscreenButtonViewModelGeocoderGeocoderViewModelHomeButtonHomeButtonViewModelInfoBoxInfoBoxViewModelNavigationHelpButtonNavigationHelpButtonViewModelPerformanceWatchdogPerformanceWatchdogViewModelProjectionPickerProjectionPickerViewModelProviderViewModelSceneModePickerSceneModePickerViewModelSelectionIndicatorSelectionIndicatorViewModelSvgPathBindingHandlerTimelineToggleButtonViewModelViewerviewerCesium3DTilesInspectorMixinviewerCesiumInspectorMixinviewerDragDropMixinviewerPerformanceWatchdogMixinviewerVoxelInspectorMixinVoxelInspectorVoxelInspectorViewModelVRButtonVRButtonViewModel

Animation - CesiumJS 动画模块

CesiumJS 中的 Animation 模块提供了一组可重用的动画功能,它们可以应用于场景中的任意对象,包括相机、实体、几何体等。可以使用 Animation 模块来实现漂亮的视觉效果和交互式动画,从而增强场景的交互性和可视化效果。

本文档将介绍 CesiumJS 中 Animation 模块的使用方法和 API 细节。在开始动手编写代码之前,我们建议您对 CesiumJS 基础知识有一定的了解。

开始使用

Animation 模块在 CesiumJS 中默认是已经加载和启用的。您只需要在应用程序的初始化代码中使用即可。

下面是一个简单的示例,展示如何为一个实体添加旋转动画:

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

var animation = new Cesium.EntityAnimation(viewer.clock, entity);
animation.start({
    property: 'orientation',
    duration: 10,
    easingFunction: Cesium.EasingFunction.LINEAR_NONE,
    startValue: Cesium.Quaternion.IDENTITY,
    endValue: Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Math.PI / 4)
});

viewer.zoomTo(entity);

在这个示例中,我们首先创建了一个实体,并将其添加到了场景中。然后,我们创建了一个 EntityAnimation 实例,用于处理动画效果。接下来,我们调用 start 方法,设置了动画属性、时长和缓动函数等参数,并使用 viewer.clock 实例来控制动画的时间流逝。最后,我们调用了 viewer.zoomTo 方法,使场景自动缩放到实体的位置,方便观察动画效果。

API 参考

EntityAnimation

EntityAnimationAnimation 模块中最基本的动画实现类。它可以应用于 CesiumJS 实体对象(EntityBillboard ),并提供了一组常用动画效果的实现接口。具体包括以下方法:

  • constructor(clock: Clock, entity: Entity | Billboard)

    创建一个 EntityAnimation 实例,该实例用于处理指定实体的动画效果。clock 参数是用于控制时间流逝的时钟对象,可以从 ViewerCesiumWidget 实例中获取。entity 参数是要应用动画效果的实体对象。

  • start(options: StartOptions)

    启动动画效果,并根据 options 参数设置动画属性、时长和缓动函数等参数。

  • stop()

    停止当前正在进行的动画效果。

  • isRunning(): boolean

    检查当前是否正在进行动画效果,返回 true 表示正在进行,否则返回 false

  • onUpdate: Event<EventData>

    动画更新事件,每帧更新时触发。事件参数为 {time: number, frameState: FrameState},其中 time 表示当前时间(相对于启动动画的时间),frameStateViewer 的帧状态对象。

  • onComplete: Event<void>

    动画完成事件,当动画效果完成时触发。事件参数为空。

StartOptions

StartOptions 是用于配置动画效果的选项参数。具体包括以下属性:

  • property: string

    动画属性,可以是实体对象的任意属性名称,如 'position''orientation''scale''show' 等。

  • duration: number

    动画时长,以秒为单位。

  • easingFunction: EasingFunction

    缓动函数类型,指定动画效果的速度曲线。可以使用预定义的 EasingFunction 对象,如 Cesium.EasingFunction.LINEAR_NONECesium.EasingFunction.QUADRACTIC_IN_OUT 等。

  • startValue: Property

    起始值,动画效果开始时属性的初始值。可以是一个值、一个数组或一个 Property 对象。

  • endValue: Property

    结束值,动画效果结束时属性的最终值。可以是一个值、一个数组或一个 Property 对象。

EasingFunction

EasingFunction 是缓动函数类型枚举,用于指定动画效果的速度曲线。具体包括以下枚举值:

  • LINEAR_NONE
  • BACK_IN
  • BACK_OUT
  • BACK_IN_OUT
  • BOUNCE_IN
  • BOUNCE_OUT
  • BOUNCE_IN_OUT
  • CIRCULAR_IN
  • CIRCULAR_OUT
  • CIRCULAR_IN_OUT
  • CUBIC_IN
  • CUBIC_OUT
  • CUBIC_IN_OUT
  • ELASTIC_IN
  • ELASTIC_OUT
  • ELASTIC_IN_OUT
  • EXPONENTIAL_IN
  • EXPONENTIAL_OUT
  • EXPONENTIAL_IN_OUT
  • QUADRACTIC_IN
  • QUADRACTIC_OUT
  • QUADRACTIC_IN_OUT
  • QUARTIC_IN
  • QUARTIC_OUT
  • QUARTIC_IN_OUT
  • QUINTIC_IN
  • QUINTIC_OUT
  • QUINTIC_IN_OUT
  • SINUSOIDAL_IN
  • SINUSOIDAL_OUT
  • SINUSOIDAL_IN_OUT

Property

Property 是表示属性值的抽象类,具体包括以下子类:

  • ConstantProperty
  • SampledProperty
  • Interval

ConstantProperty 表示一个固定的属性值,比如实体的位置。SampledProperty 表示一个采样过的属性值,可以通过传递一组时间和属性值的键值对进行创建,比如实体的位置随时间的变化。Interval 表示一个具有起始值和结束值的属性值,比如相机的视野范围。在使用 Animation 模块时,可以根据需要选择相应的 Property 类型。