|
|
/**
|
|
|
* 恒辉核心页面 - Accordion 交互功能 + GSAP 动画
|
|
|
*/
|
|
|
|
|
|
(function($) {
|
|
|
'use strict';
|
|
|
|
|
|
// 等待DOM加载完成
|
|
|
$(document).ready(function() {
|
|
|
initAccordion();
|
|
|
initGSAPAnimations();
|
|
|
initProfessionalCarousel();
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* 初始化专业领域轮播
|
|
|
*/
|
|
|
function initProfessionalCarousel() {
|
|
|
const carouselContainer = $('#professionalCarousel');
|
|
|
if (carouselContainer.length === 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查SimpleCarousel是否可用
|
|
|
if (typeof SimpleCarousel === 'undefined') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 轮播配置
|
|
|
const carouselOptions = {
|
|
|
autoplay: true,
|
|
|
autoplayDelay: 4000,
|
|
|
loop: true,
|
|
|
navigation: true,
|
|
|
pagination: false,
|
|
|
touchEnabled: true,
|
|
|
slidesPerView: 5, // 一行显示5个卡片
|
|
|
onSlideChange: function(currentIndex, previousIndex) {
|
|
|
// 添加GSAP动画效果
|
|
|
animateProfessionalCards(currentIndex);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 初始化轮播
|
|
|
try {
|
|
|
const carousel = new SimpleCarousel(carouselContainer[0], carouselOptions);
|
|
|
|
|
|
// 添加鼠标悬停暂停功能
|
|
|
carouselContainer.on('mouseenter', function() {
|
|
|
carousel.pauseAutoplay();
|
|
|
}).on('mouseleave', function() {
|
|
|
carousel.resumeAutoplay();
|
|
|
});
|
|
|
|
|
|
// 初始动画
|
|
|
setTimeout(() => {
|
|
|
animateProfessionalCards(0);
|
|
|
}, 500);
|
|
|
|
|
|
} catch (error) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 专业领域卡片动画
|
|
|
*/
|
|
|
function animateProfessionalCards(currentIndex) {
|
|
|
if (typeof gsap === 'undefined') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const cards = $('.professional-card');
|
|
|
|
|
|
// 重置所有卡片
|
|
|
gsap.set(cards, {
|
|
|
opacity: 0,
|
|
|
y: 30,
|
|
|
scale: 0.9
|
|
|
});
|
|
|
|
|
|
// 计算当前显示的卡片（一行5个）
|
|
|
const startIndex = Math.floor(currentIndex / 5) * 5;
|
|
|
const visibleCards = cards.slice(startIndex, startIndex + 5);
|
|
|
|
|
|
// 动画显示当前卡片
|
|
|
gsap.to(visibleCards, {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.6,
|
|
|
stagger: 0.1,
|
|
|
ease: 'back.out(1.7)'
|
|
|
});
|
|
|
|
|
|
// 为卡片添加悬停动画
|
|
|
visibleCards.each(function() {
|
|
|
const card = $(this);
|
|
|
const icon = card.find('.card-icon');
|
|
|
const number = card.find('.card-number');
|
|
|
|
|
|
card.off('mouseenter mouseleave').on('mouseenter', function() {
|
|
|
gsap.to(card, {
|
|
|
y: -10,
|
|
|
scale: 1.05,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
|
|
|
gsap.to(icon, {
|
|
|
rotation: 10,
|
|
|
scale: 1.1,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
|
|
|
gsap.to(number, {
|
|
|
scale: 1.2,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
}).on('mouseleave', function() {
|
|
|
gsap.to(card, {
|
|
|
y: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
|
|
|
gsap.to(icon, {
|
|
|
rotation: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
|
|
|
gsap.to(number, {
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 初始化Accordion功能
|
|
|
*/
|
|
|
function initAccordion() {
|
|
|
const accordionButtons = $('.accordion-button');
|
|
|
|
|
|
if (accordionButtons.length === 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 为每个accordion按钮添加点击事件
|
|
|
accordionButtons.on('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
|
|
|
const button = $(this);
|
|
|
const targetId = button.data('target');
|
|
|
const targetCollapse = $('#' + targetId);
|
|
|
const isActive = button.hasClass('active');
|
|
|
|
|
|
// 检查目标元素是否存在
|
|
|
if (targetCollapse.length === 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 如果当前项已经是激活状态，则关闭它
|
|
|
if (isActive) {
|
|
|
closeAccordionItem(button, targetCollapse);
|
|
|
} else {
|
|
|
// 关闭其他所有项
|
|
|
closeAllAccordionItems();
|
|
|
// 打开当前项
|
|
|
openAccordionItem(button, targetCollapse);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 确保默认打开的项正确显示
|
|
|
setTimeout(function() {
|
|
|
const activeButton = $('.accordion-button.active');
|
|
|
if (activeButton.length > 0) {
|
|
|
const targetId = activeButton.data('target');
|
|
|
const targetCollapse = $('#' + targetId);
|
|
|
if (targetCollapse.length > 0 && !targetCollapse.hasClass('show')) {
|
|
|
targetCollapse.addClass('show');
|
|
|
}
|
|
|
}
|
|
|
}, 100);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 打开accordion项
|
|
|
*/
|
|
|
function openAccordionItem(button, collapse) {
|
|
|
// 检查是否有GSAP增强动画
|
|
|
if (typeof window.openAccordionItemWithGSAP === 'function') {
|
|
|
window.openAccordionItemWithGSAP(button, collapse);
|
|
|
} else {
|
|
|
// 纯CSS动画版本 - 不设置内联样式
|
|
|
button.addClass('active').attr('aria-expanded', 'true');
|
|
|
collapse.addClass('show');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 关闭accordion项
|
|
|
*/
|
|
|
function closeAccordionItem(button, collapse) {
|
|
|
// 检查是否有GSAP增强动画
|
|
|
if (typeof window.closeAccordionItemWithGSAP === 'function') {
|
|
|
window.closeAccordionItemWithGSAP(button, collapse);
|
|
|
} else {
|
|
|
// 纯CSS动画版本 - 不设置内联样式
|
|
|
button.removeClass('active').attr('aria-expanded', 'false');
|
|
|
collapse.removeClass('show');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 关闭所有accordion项
|
|
|
*/
|
|
|
function closeAllAccordionItems() {
|
|
|
$('.accordion-button').each(function() {
|
|
|
const button = $(this);
|
|
|
const targetId = button.data('target');
|
|
|
const targetCollapse = $('#' + targetId);
|
|
|
|
|
|
if (button.hasClass('active')) {
|
|
|
closeAccordionItem(button, targetCollapse);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 响应式处理
|
|
|
*/
|
|
|
function handleResponsive() {
|
|
|
const windowWidth = $(window).width();
|
|
|
|
|
|
// 移除可能干扰CSS动画的内联样式
|
|
|
$('.accordion-collapse').each(function() {
|
|
|
$(this).css('max-height', '');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 窗口大小改变时重新处理响应式
|
|
|
$(window).on('resize', function() {
|
|
|
handleResponsive();
|
|
|
});
|
|
|
|
|
|
// 初始化时处理响应式
|
|
|
handleResponsive();
|
|
|
|
|
|
/**
|
|
|
* 初始化GSAP动画
|
|
|
*/
|
|
|
function initGSAPAnimations() {
|
|
|
// 检查GSAP是否已加载
|
|
|
if (typeof gsap === 'undefined') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 等待兼容性管理器初始化
|
|
|
if (window.GSAPElementorAPI) {
|
|
|
|
|
|
// 使用兼容性API初始化动画
|
|
|
initPageLoadAnimationsWithAPI();
|
|
|
initScrollAnimationsWithAPI();
|
|
|
} else {
|
|
|
|
|
|
// 页面加载动画
|
|
|
initPageLoadAnimations();
|
|
|
|
|
|
// 滚动触发动画
|
|
|
initScrollAnimations();
|
|
|
}
|
|
|
|
|
|
// Accordion动画增强
|
|
|
enhanceAccordionAnimations();
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 使用兼容性API的页面加载动画
|
|
|
*/
|
|
|
function initPageLoadAnimationsWithAPI() {
|
|
|
// 设置初始状态
|
|
|
gsap.set('.section-title', { opacity: 0, y: 50 });
|
|
|
gsap.set('.section-description', { opacity: 0, y: 30 });
|
|
|
gsap.set('.accordion-item', { opacity: 0, x: -30 });
|
|
|
gsap.set('.system-image img', { opacity: 0, scale: 0.8 });
|
|
|
|
|
|
// 创建时间线动画
|
|
|
const tl = gsap.timeline({ delay: 0.3 });
|
|
|
|
|
|
tl.to('.section-title', {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
duration: 0.8,
|
|
|
ease: 'power2.out',
|
|
|
onComplete: function() {
|
|
|
$('.section-title').addClass('animated');
|
|
|
}
|
|
|
})
|
|
|
.to('.section-description', {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
duration: 0.6,
|
|
|
ease: 'power2.out'
|
|
|
}, '-=0.4')
|
|
|
.to('.accordion-item', {
|
|
|
opacity: 1,
|
|
|
x: 0,
|
|
|
duration: 0.6,
|
|
|
stagger: 0.1,
|
|
|
ease: 'power2.out'
|
|
|
}, '-=0.3')
|
|
|
.to('.system-image img', {
|
|
|
opacity: 1,
|
|
|
scale: 1,
|
|
|
duration: 0.8,
|
|
|
ease: 'back.out(1.7)'
|
|
|
}, '-=0.5');
|
|
|
|
|
|
// 注册动画到管理器
|
|
|
if (window.GSAPAnimationManager) {
|
|
|
window.GSAPAnimationManager.register('pageLoad', tl);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 使用兼容性API的滚动触发动画
|
|
|
*/
|
|
|
function initScrollAnimationsWithAPI() {
|
|
|
// 检查ScrollTrigger是否已加载
|
|
|
if (typeof ScrollTrigger === 'undefined') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 使用兼容性API创建ScrollTrigger
|
|
|
const floatingAnimation = window.GSAPElementorAPI.createScrollTrigger({
|
|
|
trigger: '.system-image img',
|
|
|
start: 'top bottom',
|
|
|
end: 'bottom top',
|
|
|
onEnter: function() {
|
|
|
// 图片悬浮动画 - 延迟启动，避免与页面加载动画冲突
|
|
|
setTimeout(function() {
|
|
|
const floatTween = gsap.to('.system-image img', {
|
|
|
y: -10,
|
|
|
duration: 2,
|
|
|
ease: 'power1.inOut',
|
|
|
yoyo: true,
|
|
|
repeat: -1
|
|
|
});
|
|
|
|
|
|
if (window.GSAPAnimationManager) {
|
|
|
window.GSAPAnimationManager.register('imageFloat', floatTween);
|
|
|
}
|
|
|
}, 2000);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 滚动时的视差效果
|
|
|
const parallaxTrigger = window.GSAPElementorAPI.createScrollTrigger({
|
|
|
trigger: '.about-content',
|
|
|
start: 'top bottom',
|
|
|
end: 'bottom top',
|
|
|
scrub: true,
|
|
|
animation: gsap.to('.about-content', {
|
|
|
backgroundPosition: '50% 100px',
|
|
|
ease: 'none'
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 页面加载动画
|
|
|
*/
|
|
|
function initPageLoadAnimations() {
|
|
|
// 等待GSAP兼容性就绪
|
|
|
if (!document.body.classList.contains('gsap-ready')) {
|
|
|
document.addEventListener('gsapCompatibilityReady', initPageLoadAnimations);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 设置初始状态
|
|
|
gsap.set('.section-title', { opacity: 0, y: 50 });
|
|
|
gsap.set('.section-description', { opacity: 0, y: 30 });
|
|
|
gsap.set('.accordion-item', { opacity: 0, x: -30 });
|
|
|
gsap.set('.system-image img', { opacity: 0, scale: 0.8 });
|
|
|
|
|
|
// 创建时间线动画
|
|
|
const tl = gsap.timeline({ delay: 0.3 });
|
|
|
|
|
|
tl.to('.section-title', {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
duration: 0.8,
|
|
|
ease: 'power2.out',
|
|
|
onComplete: function() {
|
|
|
$('.section-title').addClass('animated');
|
|
|
}
|
|
|
})
|
|
|
.to('.section-description', {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
duration: 0.6,
|
|
|
ease: 'power2.out'
|
|
|
}, '-=0.4')
|
|
|
.to('.accordion-item', {
|
|
|
opacity: 1,
|
|
|
x: 0,
|
|
|
duration: 0.6,
|
|
|
stagger: 0.1,
|
|
|
ease: 'power2.out'
|
|
|
}, '-=0.3')
|
|
|
.to('.system-image img', {
|
|
|
opacity: 1,
|
|
|
scale: 1,
|
|
|
duration: 0.8,
|
|
|
ease: 'back.out(1.7)'
|
|
|
}, '-=0.5');
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 滚动触发动画
|
|
|
*/
|
|
|
function initScrollAnimations() {
|
|
|
// 检查ScrollTrigger是否已加载
|
|
|
if (typeof ScrollTrigger === 'undefined') {
|
|
|
console.warn('ScrollTrigger plugin not loaded');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 注册ScrollTrigger插件
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
|
|
// 图片悬浮动画 - 延迟启动，避免与页面加载动画冲突
|
|
|
setTimeout(function() {
|
|
|
gsap.to('.system-image img', {
|
|
|
y: -10,
|
|
|
duration: 2,
|
|
|
ease: 'power1.inOut',
|
|
|
yoyo: true,
|
|
|
repeat: -1
|
|
|
});
|
|
|
}, 2000);
|
|
|
|
|
|
// 滚动时的视差效果
|
|
|
gsap.to('.about-content', {
|
|
|
backgroundPosition: '50% 100px',
|
|
|
ease: 'none',
|
|
|
scrollTrigger: {
|
|
|
trigger: '.about-content',
|
|
|
start: 'top bottom',
|
|
|
end: 'bottom top',
|
|
|
scrub: true
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 增强Accordion动画
|
|
|
*/
|
|
|
function enhanceAccordionAnimations() {
|
|
|
// 为accordion按钮添加悬停动画
|
|
|
$('.accordion-button').hover(
|
|
|
function() {
|
|
|
gsap.to($(this), {
|
|
|
scale: 1.02,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
},
|
|
|
function() {
|
|
|
gsap.to($(this), {
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: 'power2.out'
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
|
|
|
// 纯CSS动画版本 - 避免JavaScript动画冲突
|
|
|
window.openAccordionItemWithGSAP = function(button, collapse) {
|
|
|
button.addClass('active').attr('aria-expanded', 'true');
|
|
|
collapse.addClass('show');
|
|
|
};
|
|
|
|
|
|
// 纯CSS动画版本 - 避免JavaScript动画冲突
|
|
|
window.closeAccordionItemWithGSAP = function(button, collapse) {
|
|
|
button.removeClass('active').attr('aria-expanded', 'false');
|
|
|
collapse.removeClass('show');
|
|
|
};
|
|
|
}
|
|
|
|
|
|
})(jQuery); |
