// 视频特效控件逻辑 - 需在GSAP库加载后执行
// 引入GSAP：
(function() {
// 环境守卫：仅在浏览器环境执行（避免Node.js环境报错）
if (typeof window === 'undefined' || typeof document === 'undefined') {
console.warn('此代码仅支持在浏览器环境运行');
return;
}
// 核心元素获取
const container = document.getElementById('effectContainer');
if (!container) return; // 防止元素不存在报错
const bgLayer = document.getElementById('bgLayer');
const contentLayer = document.getElementById('contentLayer');
const decorLayer = document.getElementById('decorLayer');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
// 动画状态管理
let animationTimeline;
let dotAnimations = [];
let isPlaying = false;
// 创建装饰粒子
function createDecorDots() {
const dotCount = 50;
decorLayer.innerHTML = '';
for (let i = 0; i < dotCount; i++) {
const dot = document.createElement('div');
dot.className = 'decor-dot';
dot.style.left = `${Math.random() * 100}%`;
dot.style.top = `${Math.random() * 100}%`;
decorLayer.appendChild(dot);
dotAnimations.push(dot);
}
}
// 初始化动画时间线
function initAnimation() {
// 清除现有动画
if (animationTimeline) {
animationTimeline.kill();
}
// 创建主时间线
animationTimeline = gsap.timeline({
paused: true,
repeat: -1, // 无限循环
repeatDelay: 1,
onStart: () => isPlaying = true,
onComplete: () => isPlaying = false
});
// 背景层动画
animationTimeline.to(bgLayer, {
duration: 8,
transform: 'scale(1.1) translateZ(0)',
ease: 'power1.inOut'
}, 0);
// 内容层入场动画
animationTimeline.to(contentLayer, {
duration: 1.5,
y: 0,
opacity: 1,
ease: 'power2.out'
}, 0.5);
// 粒子动画
dotAnimations.forEach((dot, index) => {
animationTimeline.to(dot, {
duration: Math.random() * 3 + 2,
opacity: Math.random() * 0.8 + 0.2,
x: Math.random() * 40 - 20,
y: Math.random() * 40 - 20,
ease: 'power1.inOut'
}, index * 0.1);
animationTimeline.to(dot, {
duration: Math.random() * 2 + 1,
opacity: 0,
ease: 'power1.out'
}, index * 0.1 + 3);
});
// 背景层反向动画
animationTimeline.to(bgLayer, {
duration: 8,
transform: 'scale(1) translateZ(0)',
ease: 'power1.inOut'
}, 4);
}
// 鼠标交互效果
function initMouseInteraction() {
container.addEventListener('mousemove', (e) => {
if (!isPlaying) return;
// 获取容器坐标
const rect = container.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
// 视差效果
const moveX = (x - 0.5) * 30;
const moveY = (y - 0.5) * 30;
gsap.to(bgLayer, {
duration: 0.5,
x: moveX,
y: moveY,
ease: 'power2.out'
});
gsap.to(contentLayer, {
duration: 0.5,
x: moveX * 0.5,
y: moveY * 0.5,
ease: 'power2.out'
});
});
// 鼠标进入/离开效果
container.addEventListener('mouseenter', () => {
if (isPlaying) {
gsap.to(bgLayer, {
duration: 0.8,
opacity: 0.9,
ease: 'power2.out'
});
}
});
container.addEventListener('mouseleave', () => {
if (isPlaying) {
gsap.to(bgLayer, {
duration: 0.8,
opacity: 0.7,
ease: 'power2.out'
});
}
});
}
// 控制按钮事件
playBtn.addEventListener('click', () => {
if (!isPlaying) {
animationTimeline.play();
isPlaying = true;
}
});
pauseBtn.addEventListener('click', () => {
if (isPlaying) {
animationTimeline.pause();
isPlaying = false;
}
});
resetBtn.addEventListener('click', () => {
animationTimeline.restart();
animationTimeline.pause();
isPlaying = false;
// 重置所有元素位置
gsap.set(bgLayer, { x: 0, y: 0, scale: 1, opacity: 0.7 });
gsap.set(contentLayer, { x: 0, y: 20, opacity: 0 });
gsap.set(dotAnimations, { opacity: 0, x: 0, y: 0 });
});
// 初始化
function init() {
createDecorDots();
initAnimation();
initMouseInteraction();
// 自动播放初始动画
setTimeout(() => {
animationTimeline.play();
}, 500);
}
// 窗口大小变化时重新计算
window.addEventListener('resize', () => {
if (isPlaying) {
animationTimeline.pause();
initAnimation();
animationTimeline.play();
} else {
initAnimation();
}
});
// 确保GSAP加载完成后初始化
if (window.gsap) {
init();
} else {
// 监听GSAP加载
const checkGSAP = setInterval(() => {
if (window.gsap) {
clearInterval(checkGSAP);
init();
}
}, 100);
}
})();
