119 lines
2.6 KiB
JavaScript
119 lines
2.6 KiB
JavaScript
Page({
|
||
data: {
|
||
playbackRate: 5.0, // 默认1倍速
|
||
animationFrame: null, // 用于保存定时器ID
|
||
activeConstellation: '', // 当前激活的星座
|
||
tapTimer: null // 用于处理点击延迟
|
||
},
|
||
|
||
onReady() {
|
||
|
||
},
|
||
|
||
// 处理星座点击事件
|
||
handleConstellationTap(e) {
|
||
const { constellation, title, page } = e.currentTarget.dataset;
|
||
|
||
// 如果已经有激活的星座，直接跳转页面
|
||
if (this.data.activeConstellation === constellation) {
|
||
if (page) {
|
||
// 添加跳转前的渐出效果
|
||
wx.vibrateShort({ type: 'medium' });
|
||
|
||
setTimeout(() => {
|
||
wx.navigateTo({
|
||
url: page,
|
||
fail: () => {
|
||
wx.showToast({
|
||
title: `${title}功能开发中`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
this.hideMask();
|
||
}, 200);
|
||
} else {
|
||
wx.showToast({
|
||
title: `${title}功能开发中`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
this.hideMask();
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 如果有其他激活的星座，先重置
|
||
if (this.data.activeConstellation) {
|
||
this.hideMask();
|
||
}
|
||
|
||
// 轻微的震动反馈（点击瞬间）
|
||
wx.vibrateShort({
|
||
type: 'light'
|
||
});
|
||
|
||
// 延迟50ms后开始动画，制造"弹起"的感觉
|
||
setTimeout(() => {
|
||
// 激活当前星座（放大并居中）
|
||
this.setData({
|
||
activeConstellation: constellation
|
||
});
|
||
|
||
// 动画进行到一半时给予第二次震动反馈
|
||
setTimeout(() => {
|
||
wx.vibrateShort({
|
||
type: 'light'
|
||
});
|
||
}, 400);
|
||
}, 50);
|
||
|
||
// 2秒后自动跳转（给用户更多时间欣赏动画）
|
||
if (this.data.tapTimer) {
|
||
clearTimeout(this.data.tapTimer);
|
||
}
|
||
|
||
const timer = setTimeout(() => {
|
||
if (page) {
|
||
wx.navigateTo({
|
||
url: page,
|
||
success: () => {
|
||
this.hideMask();
|
||
},
|
||
fail: () => {
|
||
wx.showToast({
|
||
title: `${title}功能开发中`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
this.hideMask();
|
||
}
|
||
});
|
||
}
|
||
}, 2000);
|
||
|
||
this.setData({
|
||
tapTimer: timer
|
||
});
|
||
},
|
||
|
||
// 隐藏遮罩和重置状态
|
||
hideMask() {
|
||
if (this.data.tapTimer) {
|
||
clearTimeout(this.data.tapTimer);
|
||
}
|
||
this.setData({
|
||
activeConstellation: '',
|
||
tapTimer: null
|
||
});
|
||
},
|
||
|
||
onUnload() {
|
||
// 页面卸载时清除定时器
|
||
if (this.data.tapTimer) {
|
||
clearTimeout(this.data.tapTimer);
|
||
}
|
||
}
|
||
})
|