ceisum实现动态立体墙上下循环动画，颜色逐渐透明

本文主要是介绍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实现动态立体墙上下循环动画，颜色逐渐透明的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---