初始化多多畅职企业内推平台项目
功能特性: - 3D地球动画与中国地图可视化 - 省份/城市/企业搜索功能 - 308家企业数据展示 - 响应式设计(PC端和移动端) - 企业详情页面与业务板块展示 - 官网新闻轮播图 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
104
js/scene/Transition.js
Normal file
104
js/scene/Transition.js
Normal file
@@ -0,0 +1,104 @@
|
||||
/* ===================================
|
||||
转场特效 - 从3D地球到2D地图的超空间跳跃
|
||||
=================================== */
|
||||
|
||||
import { CONFIG } from '../config.js';
|
||||
|
||||
export class Transition {
|
||||
constructor(camera, earthModel, uiElements, onComplete) {
|
||||
this.camera = camera;
|
||||
this.earthModel = earthModel;
|
||||
this.uiElements = uiElements; // { uiLayer, hint, speedLines, cloudFog }
|
||||
this.onComplete = onComplete;
|
||||
this.isTransitioning = false;
|
||||
}
|
||||
|
||||
// 触发超空间跳跃转场
|
||||
trigger() {
|
||||
if (this.isTransitioning) return;
|
||||
this.isTransitioning = true;
|
||||
|
||||
// 获取UI元素
|
||||
const { uiLayer, hint, speedLines, cloudFog } = this.uiElements;
|
||||
|
||||
// 0. UI 消失
|
||||
uiLayer.style.opacity = 0;
|
||||
hint.style.opacity = 0;
|
||||
|
||||
const earthGroup = this.earthModel.getGroup();
|
||||
const clouds = this.earthModel.getClouds();
|
||||
const atmosphere = this.earthModel.getAtmosphere();
|
||||
|
||||
// 创建GSAP时间线
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => {
|
||||
this.isTransitioning = false;
|
||||
if (this.onComplete) this.onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
// 转场配置
|
||||
const warpConfig = CONFIG.warp;
|
||||
const transConfig = CONFIG.animation.transition;
|
||||
|
||||
// 1. 地球对齐 + 速度线出现
|
||||
tl.to(earthGroup.rotation, {
|
||||
y: warpConfig.targetRotationY,
|
||||
x: warpConfig.targetRotationX,
|
||||
duration: transConfig.earthRotation,
|
||||
ease: "power2.inOut"
|
||||
}, "start");
|
||||
|
||||
tl.to(speedLines, {
|
||||
opacity: 1,
|
||||
scale: 1.5,
|
||||
duration: 1.0,
|
||||
ease: "power1.in"
|
||||
}, "start");
|
||||
|
||||
// 2. 镜头急速突进 (模拟穿过云层)
|
||||
tl.to(this.camera.position, {
|
||||
z: warpConfig.finalCameraZ,
|
||||
x: 0,
|
||||
y: 0,
|
||||
duration: transConfig.cameraZoom,
|
||||
ease: "expo.in",
|
||||
onUpdate: () => {
|
||||
// 镜头抖动效果 (Camera Shake) - 只在z<8时轻微抖动
|
||||
const z = this.camera.position.z;
|
||||
if (z < warpConfig.shakeThreshold.max && z > warpConfig.shakeThreshold.min) {
|
||||
const intensity = warpConfig.shakeIntensity;
|
||||
const shakeX = (Math.random() - 0.5) * intensity;
|
||||
const shakeY = (Math.random() - 0.5) * intensity;
|
||||
this.camera.position.x += shakeX;
|
||||
this.camera.position.y += shakeY;
|
||||
}
|
||||
}
|
||||
}, "start");
|
||||
|
||||
// 3. 材质变化:大气层和云层迅速变淡(为了不挡视线)
|
||||
tl.to([clouds.material, atmosphere.material], {
|
||||
opacity: 0,
|
||||
duration: 0.5
|
||||
}, "-=0.8");
|
||||
|
||||
// 4. "云雾吞噬"特效 (Backdrop Blur + Brightness)
|
||||
tl.to(cloudFog, {
|
||||
opacity: 1,
|
||||
scale: 1.2,
|
||||
backdropFilter: "blur(20px)",
|
||||
duration: transConfig.fogFade,
|
||||
ease: "power2.in"
|
||||
}, "-=0.8");
|
||||
}
|
||||
|
||||
// 重置转场状态
|
||||
reset() {
|
||||
this.isTransitioning = false;
|
||||
}
|
||||
|
||||
// 检查是否正在转场
|
||||
isActive() {
|
||||
return this.isTransitioning;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user