add u

2025-11-20 16:43:52 +08:00
parent 6719f03b11
commit f57b989144
3 changed files with 399 additions and 42 deletions
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -1,11 +1,118 @@
 Page({
  data: {
    playbackRate: 5.0,  // 默认1倍速
-    animationFrame: null // 用于保存定时器ID
+    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);
+    }
+  }
 })
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -8,16 +8,89 @@
         controls="{{false}}">
         playback-rate="{{playbackRate}}">
  </video>
-  <!-- 这里可以添加首页其他内容，比如标题、按钮等 -->
-  <view class="content">
-  <view class="xz_bg">
-    <image class='xz_xiannv' src="/images/xiannv2.png" mode=""/>
-    <image class='xz_lion' src="/images/lion1_yuhua.png" mode="" />
-    <image class='xz_juxie' src="/images/juxiezuo_yuhua.png" mode="" />
-    <image class='xz_sheshou' src="/images/sheshou_yuhua.png" mode="" />
-    <image class='xz_shuangyu' src="/images/shuangyu_yuhua.png" mode="" />
-  </view>
  
-    <text class="title"></text>
+  <!-- 遮罩层 -->
+  <view class="mask {{activeConstellation ? 'mask-show' : ''}}" bindtap="hideMask"></view>
+  
+  <!-- 星座容器 -->
+  <view class="content">
+    <view class="xz_bg">
+      <!-- 仙女座 - 梦境记录 -->
+      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'xiannv' ? 'dimmed' : ''}}">
+        <image 
+          class='xz_xiannv {{activeConstellation === "xiannv" ? "active-center" : ""}}' 
+          src="/images/xiannv2.png" 
+          mode="aspectFit"
+          bindtap="handleConstellationTap"
+          data-constellation="xiannv"
+          data-title="梦境记录"
+          data-page="/pages/record/record"
+        />
+        <view class="constellation-title {{activeConstellation === 'xiannv' ? 'title-show' : ''}}">
+          梦境记录
+        </view>
+      </view>
+
+      <!-- 狮子座 - 梦境分享 -->
+      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'lion' ? 'dimmed' : ''}}">
+        <image 
+          class='xz_lion {{activeConstellation === "lion" ? "active-center" : ""}}' 
+          src="/images/lion1_yuhua.png" 
+          mode="aspectFit"
+          bindtap="handleConstellationTap"
+          data-constellation="lion"
+          data-title="梦境分享"
+        />
+        <view class="constellation-title {{activeConstellation === 'lion' ? 'title-show' : ''}}">
+          梦境分享
+        </view>
+      </view>
+
+      <!-- 巨蟹座 - 私密功能 -->
+      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'juxie' ? 'dimmed' : ''}}">
+        <image 
+          class='xz_juxie {{activeConstellation === "juxie" ? "active-center" : ""}}' 
+          src="/images/juxiezuo_yuhua.png" 
+          mode="aspectFit"
+          bindtap="handleConstellationTap"
+          data-constellation="juxie"
+          data-title="私密功能"
+          data-page="/pages/history/history"
+        />
+        <view class="constellation-title {{activeConstellation === 'juxie' ? 'title-show' : ''}}">
+          私密功能
+        </view>
+      </view>
+
+      <!-- 射手座 - 梦境探索 -->
+      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'sheshou' ? 'dimmed' : ''}}">
+        <image 
+          class='xz_sheshou {{activeConstellation === "sheshou" ? "active-center" : ""}}' 
+          src="/images/sheshou_yuhua.png" 
+          mode="aspectFit"
+          bindtap="handleConstellationTap"
+          data-constellation="sheshou"
+          data-title="梦境探索"
+        />
+        <view class="constellation-title {{activeConstellation === 'sheshou' ? 'title-show' : ''}}">
+          梦境探索
+        </view>
+      </view>
+
+      <!-- 双鱼座 - 梦境分析 -->
+      <view class="constellation-wrapper {{activeConstellation && activeConstellation !== 'shuangyu' ? 'dimmed' : ''}}">
+        <image 
+          class='xz_shuangyu {{activeConstellation === "shuangyu" ? "active-center" : ""}}' 
+          src="/images/shuangyu_yuhua.png" 
+          mode="aspectFit"
+          bindtap="handleConstellationTap"
+          data-constellation="shuangyu"
+          data-title="梦境分析"
+        />
+        <view class="constellation-title {{activeConstellation === 'shuangyu' ? 'title-show' : ''}}">
+          梦境分析
+        </view>
+      </view>
+    </view>
  </view>
 </view>
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -14,6 +14,15 @@
  z-index: -1;
 }

+/* 遮罩层 - 隐藏不显示 */
+.mask {
+  display: none;
+}
+
+.mask-show {
+  display: none;
+}
+
 .content {
  position: relative;
  z-index: 1;
@@ -30,46 +39,214 @@
  font-weight: bold;
 }

-.xz_bg{
+.xz_bg {
  width: 100%;
  height: 100%;
-  display: flex;
-  justify-content: space-between; /* 项目之间有相等间距，两端贴边 */
-  padding-top: 100rpx;
+  position: relative;
 }
-.xz_xiannv{
-  width: 400rpx;
-  height: 400rpx;
-  opacity: 95%;

+/* 星座包装器 */
+.constellation-wrapper {
+  position: absolute;
+  z-index: 2;
+  transition: opacity 0.6s ease;
 }
-.xz_lion{
-  width: 400rpx;
-  height: 400rpx;
+
+/* 当有激活星座时，其他星座稍微变暗 */
+.constellation-wrapper.dimmed {
+  opacity: 0.5;
+}
+
+/* 星座图片通用样式 */
+.xz_xiannv,
+.xz_lion,
+.xz_juxie,
+.xz_sheshou,
+.xz_shuangyu {
+  width: 280rpx;
+  height: 280rpx;
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  cursor: pointer;
+  display: block;
+  transform-origin: center center;
+  will-change: transform, opacity, filter;
+  /* 去除边框和轮廓 */
+  border: none;
+  outline: none;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 悬停效果（移动端用active代替） */
+.xz_xiannv:active:not(.active-center),
+.xz_lion:active:not(.active-center),
+.xz_juxie:active:not(.active-center),
+.xz_sheshou:active:not(.active-center),
+.xz_shuangyu:active:not(.active-center) {
+  transform: scale(0.95);
+  transition: all 0.1s ease;
+}
+
+/* 仙女座 - 左上角 */
+.xz_xiannv {
  opacity: 95%;
-  position: absolute;
-  top: 220rpx;   
-  left: 320rpx;
+  position: relative;
 }
-.xz_juxie{
-  width: 400rpx;
-  height: 400rpx;
+
+.constellation-wrapper:nth-child(1) {
+  top: 120rpx;
+  left: 40rpx;
+}
+
+/* 狮子座 - 右上角 */
+.xz_lion {
  opacity: 95%;
-  position: absolute;
-  top: 500rpx;
+  position: relative;
 }
-.xz_sheshou{
-  width: 400rpx;
-  height: 400rpx;
+
+.constellation-wrapper:nth-child(2) {
+  top: 120rpx;
+  right: 40rpx;
+}
+
+/* 巨蟹座 - 左中部 */
+.xz_juxie {
  opacity: 95%;
-  position: absolute;
-  top: 700rpx;
-  left: 320rpx;
+  position: relative;
 }
-.xz_shuangyu{
-  width: 400rpx;
-  height: 400rpx;
-  opacity: 70%;
+
+.constellation-wrapper:nth-child(3) {
+  top: 360rpx;
+  left: 60rpx;
+}
+
+/* 射手座 - 右中部 */
+.xz_sheshou {
+  opacity: 95%;
+  position: relative;
+}
+
+.constellation-wrapper:nth-child(4) {
+  top: 360rpx;
+  right: 60rpx;
+}
+
+/* 双鱼座 - 底部居中 */
+.xz_shuangyu {
+  opacity: 85%;
+  position: relative;
+}
+
+.constellation-wrapper:nth-child(5) {
+  bottom: 180rpx;
+  left: 50%;
+  margin-left: -140rpx;
+}
+
+/* 激活状态 - 放大并居中 */
+.active-center {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: 280rpx !important;
+  height: 280rpx !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  z-index: 100 !important;
+  pointer-events: auto !important;
+  /* 平移放大动画 + 后续脉冲动画 */
+  animation: zoomIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
+             smoothPulse 2s ease-in-out 0.6s infinite,
+             glow 2s ease-in-out 0.6s infinite;
+}
+
+/* 标题文字 */
+.constellation-title {
+  position: fixed;
+  top: 65%;
+  left: 50%;
+  transform: translateX(-50%) translateY(20rpx);
+  font-size: 72rpx;
+  font-weight: bold;
+  color: #ffffff;
+  opacity: 0;
+  z-index: 101;
+  pointer-events: none;
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
+  text-shadow: 0 0 20rpx rgba(74, 111, 165, 1),
+               0 0 40rpx rgba(74, 111, 165, 0.8),
+               0 4rpx 8rpx rgba(0, 0, 0, 0.5);
+  letter-spacing: 16rpx;
+  white-space: nowrap;
+}
+
+.title-show {
+  opacity: 1;
+  top: 63%;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* 平滑的脉冲效果 */
+@keyframes smoothPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1.8);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.85);
+  }
+}
+
+/* 发光动画 */
+@keyframes glow {
+  0%, 100% {
+    filter: brightness(1.3) drop-shadow(0 0 60rpx rgba(74, 111, 165, 1)) 
+            drop-shadow(0 0 100rpx rgba(74, 111, 165, 0.6));
+  }
+  50% {
+    filter: brightness(1.4) drop-shadow(0 0 80rpx rgba(74, 111, 165, 1)) 
+            drop-shadow(0 0 120rpx rgba(74, 111, 165, 0.8));
+  }
+}
+
+/* 星座包装器的过渡效果 */
+.constellation-wrapper {
+  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 平移放大入场动画（无旋转） */
+@keyframes zoomIn {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.8);
+    opacity: 1;
+  }
+}
+
+/* 星云粒子效果（伪元素） */
+.active-center::before {
+  content: '';
  position: absolute;
-  top: 900rpx;
+  top: 50%;
+  left: 50%;
+  width: 120%;
+  height: 120%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, rgba(74, 111, 165, 0.3) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: nebula 3s ease-in-out infinite;
+  z-index: -1;
+}
+
+@keyframes nebula {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.8;
+  }
 }