本文主要是介绍ceisum实现动态立体墙上下循环动画，颜色逐渐透明，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
创建一个AnimationWall.js
export default class AnimationWall { constructor(viewer) { this.viewer = viewer; this.animationDirection = 1; // 1表示向上，-1表示向下 } add(positions) { const maximumHeights = Array(positions.length / 3).fill(6000); const halfHeights = maximumHeights.map(height => height / 3); // 最大高度的一半 const minimumHeights = Array(positions.length / 3).fill(600); // 假设这是墙壁的基础高度 positions = Cesium.Cartesian3.fromDegreesArrayHeights(positions); let dayMaximumHeights = Array(maximumHeights.length).fill(minimumHeights[0]); // 初始化为最小值 // 创建一个函数来处理动画 function animateWallHeights() { // 创建一个新的数组来存储新的最大高度值 const newDayMaximumHeights = dayMaximumHeights.map((height, index) => { // 计算新的高度 height += maximumHeights[index] * 0.01 * this.animationDirection; // 检查是否到达边界，并改变方向 if (height > maximumHeights[index]) { height = maximumHeights[index]; this.animationDirection = -1; // 到达最大高度，开始下降 } else if (height < halfHeights[index]) { height = halfHeights[index]; this.animationDirection = 1; // 到达最大高度的一半，开始上升 } return height; }, this); // 更新dayMaximumHeights以准备下一次回调 dayMaximumHeights = newDayMaximumHeights; // 返回新的最大高度数组 return newDayMaximumHeights; } // 添加墙壁到Cesium Viewer this.viewer.entities.add({ wall: { positions, maximumHeights: new Cesium.CallbackProperty(() => animateWallHeights.call(this), false), minimumHeights, material: new Cesium.WallDiffuseMaterialProperty({ color: Cesium.Color.fromCssColorString("rgba(0,255,255,0.3)") }) } }); }
}
页面里面引用这个js，调取这个 将坐标传入，我的是三维坐标xyz所以Array(positions.length / 3)，二维改成2就行了，墙体颜色是逐渐透明的，效果是从一半才开始往上动画，不是从底部开始的
new AnimationWall(Map3D.viewer).add(coordinates);
这篇关于ceisum实现动态立体墙上下循环动画，颜色逐渐透明的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
