diff --git a/src/components/agent/AgentAssistantEntry.vue b/src/components/agent/AgentAssistantEntry.vue index f623414a..c0143729 100644 --- a/src/components/agent/AgentAssistantEntry.vue +++ b/src/components/agent/AgentAssistantEntry.vue @@ -51,7 +51,7 @@ const FAB_DEFAULT_VERTICAL_RATIO = 2 / 3 const FAB_RANDOM_ACTION_MIN_DELAY = 8000 const FAB_RANDOM_ACTION_MAX_DELAY = 18000 -const FAB_RANDOM_ACTIONS = ['wave', 'sit', 'eye-roll', 'faint', 'disassemble'] as const +const FAB_RANDOM_ACTIONS = ['wave', 'sit', 'eye-roll', 'faint', 'disassemble', 'happy-jump'] as const type FabRandomAction = (typeof FAB_RANDOM_ACTIONS)[number] @@ -61,6 +61,7 @@ const FAB_RANDOM_ACTION_DURATIONS: Record = { 'eye-roll': 1900, faint: 4800, disassemble: 6200, + 'happy-jump': 5200, } // 入口位置只保存在当前页面生命周期内,刷新后回到默认位置。 @@ -783,6 +784,7 @@ defineExpose({ + @@ -1120,6 +1122,20 @@ defineExpose({ inset-inline-end: 0.43rem; } +.agent-assistant-fab__smile { + position: absolute; + display: block; + border-block-end: 0.13rem solid var(--agent-assistant-robot-eye); + border-radius: 0 0 999px 999px; + block-size: 0.32rem; + inline-size: 0.7rem; + inset-block-start: 0.75rem; + inset-inline-start: 50%; + opacity: 0; + transform: translateX(-50%) scale(0.72); + transform-origin: center top; +} + .agent-assistant-fab__body { position: absolute; z-index: 3; @@ -1295,26 +1311,33 @@ defineExpose({ .agent-assistant-fab.is-action-eye-roll .agent-assistant-fab__antenna, .agent-assistant-fab.is-action-faint .agent-assistant-fab__antenna, .agent-assistant-fab.is-action-disassemble .agent-assistant-fab__antenna, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__antenna, .agent-assistant-fab.is-action-wave .agent-assistant-fab__head, .agent-assistant-fab.is-action-sit .agent-assistant-fab__head, .agent-assistant-fab.is-action-eye-roll .agent-assistant-fab__head, .agent-assistant-fab.is-action-faint .agent-assistant-fab__head, .agent-assistant-fab.is-action-disassemble .agent-assistant-fab__head, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__head, .agent-assistant-fab.is-action-wave .agent-assistant-fab__body, .agent-assistant-fab.is-action-sit .agent-assistant-fab__body, .agent-assistant-fab.is-action-eye-roll .agent-assistant-fab__body, .agent-assistant-fab.is-action-faint .agent-assistant-fab__body, .agent-assistant-fab.is-action-disassemble .agent-assistant-fab__body, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__body, .agent-assistant-fab.is-action-wave .agent-assistant-fab__arm, .agent-assistant-fab.is-action-sit .agent-assistant-fab__arm, .agent-assistant-fab.is-action-eye-roll .agent-assistant-fab__arm, .agent-assistant-fab.is-action-faint .agent-assistant-fab__arm, .agent-assistant-fab.is-action-disassemble .agent-assistant-fab__arm, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__arm, .agent-assistant-fab.is-action-wave .agent-assistant-fab__leg, .agent-assistant-fab.is-action-sit .agent-assistant-fab__leg, .agent-assistant-fab.is-action-eye-roll .agent-assistant-fab__leg, .agent-assistant-fab.is-action-faint .agent-assistant-fab__leg, -.agent-assistant-fab.is-action-disassemble .agent-assistant-fab__leg { +.agent-assistant-fab.is-action-disassemble .agent-assistant-fab__leg, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__leg, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__eye, +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__smile { transition: none; } @@ -1443,6 +1466,48 @@ defineExpose({ animation: agent-fab-action-disassemble-leg-right 6.2s ease-in-out both; } +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__bot { + animation: agent-fab-action-happy-jump-bot 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__antenna { + animation: agent-fab-action-happy-jump-antenna 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__head { + animation: agent-fab-action-happy-jump-head 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__eye { + animation: agent-fab-action-happy-jump-eye 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__smile { + animation: agent-fab-action-happy-jump-smile 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__body { + animation: agent-fab-action-happy-jump-body 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__arm--left { + z-index: 6; + animation: agent-fab-action-happy-jump-arm-left 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__arm--right { + z-index: 6; + animation: agent-fab-action-happy-jump-arm-right 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__leg--left { + animation: agent-fab-action-happy-jump-leg-left 5.2s ease-in-out both; +} + +.agent-assistant-fab.is-action-happy-jump .agent-assistant-fab__leg--right { + animation: agent-fab-action-happy-jump-leg-right 5.2s ease-in-out both; +} + @keyframes agent-fab-head-idle { 0%, 100% { @@ -1970,6 +2035,264 @@ defineExpose({ } } +@keyframes agent-fab-action-happy-jump-bot { + /* 三段蓄力、起跳、落地,让开心连跳比单纯上下移动更像真人动作。 */ + 0%, + 100% { + transform: scale(var(--agent-assistant-bot-scale)) rotate(var(--agent-assistant-robot-tilt)); + } + + 9%, + 37%, + 65% { + transform: translateY(0.22rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) - 3deg)); + } + + 20%, + 48%, + 76% { + transform: translateY(-0.76rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) + 4deg)); + } + + 29%, + 57%, + 85% { + transform: translateY(0.1rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) - 2deg)); + } + + 92% { + transform: translateY(-0.1rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) + 1deg)); + } +} + +@keyframes agent-fab-action-happy-jump-antenna { + 0%, + 100% { + transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(22deg); + } + + 9%, + 37%, + 65% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) + 0.1rem)) rotate(34deg); + } + + 20%, + 48%, + 76% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) - 0.2rem)) rotate(-18deg); + } + + 29%, + 57%, + 85% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) + 0.04rem)) rotate(38deg); + } +} + +@keyframes agent-fab-action-happy-jump-head { + 0%, + 100% { + transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(0deg); + } + + 9%, + 37%, + 65% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) + 0.1rem)) rotate(-4deg); + } + + 20%, + 48%, + 76% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) - 0.16rem)) rotate(7deg); + } + + 29%, + 57%, + 85% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) + 0.04rem)) rotate(-5deg); + } + + 92% { + transform: translate(var(--agent-assistant-head-x), calc(var(--agent-assistant-head-y) - 0.04rem)) rotate(2deg); + } +} + +@keyframes agent-fab-action-happy-jump-eye { + 0%, + 100% { + border-block-end-width: 0.15rem; + opacity: 1; + transform: translate(var(--agent-assistant-eye-x), var(--agent-assistant-eye-y)) scale(1, 1); + } + + 8%, + 36%, + 64%, + 92% { + border-block-end-width: 0.18rem; + transform: translate(0, -0.06rem) scale(1.08, 0.72); + } + + 20%, + 48%, + 76% { + border-block-end-width: 0.19rem; + transform: translate(0, -0.12rem) scale(1.16, 0.58); + } +} + +@keyframes agent-fab-action-happy-jump-smile { + 0%, + 100% { + opacity: 0; + transform: translateX(-50%) scale(0.72); + } + + 6%, + 90% { + opacity: 1; + } + + 9%, + 37%, + 65% { + transform: translateX(-50%) translateY(0.02rem) scale(0.92, 0.82); + } + + 20%, + 48%, + 76% { + transform: translateX(-50%) translateY(-0.04rem) scale(1.22, 1.08); + } +} + +@keyframes agent-fab-action-happy-jump-body { + 0%, + 100% { + transform: translate(var(--agent-assistant-body-x), var(--agent-assistant-body-y)) scaleY(1); + } + + 9%, + 37%, + 65% { + transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.18rem)) scaleY(0.84) rotate(-2deg); + } + + 20%, + 48%, + 76% { + transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) - 0.1rem)) scaleY(1.08) rotate(4deg); + } + + 29%, + 57%, + 85% { + transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.08rem)) scaleY(0.94) rotate(-3deg); + } +} + +@keyframes agent-fab-action-happy-jump-arm-left { + 0%, + 100% { + transform: rotate(17deg); + } + + 9%, + 37%, + 65% { + transform: translate(-0.08rem, 0.06rem) rotate(54deg); + } + + 20%, + 48%, + 76% { + transform: translate(-0.24rem, -0.38rem) rotate(152deg); + } + + 29%, + 57%, + 85% { + transform: translate(-0.1rem, -0.02rem) rotate(96deg); + } +} + +@keyframes agent-fab-action-happy-jump-arm-right { + 0%, + 100% { + transform: rotate(-17deg); + } + + 9%, + 37%, + 65% { + transform: translate(0.08rem, 0.06rem) rotate(-54deg); + } + + 20%, + 48%, + 76% { + transform: translate(0.24rem, -0.38rem) rotate(-152deg); + } + + 29%, + 57%, + 85% { + transform: translate(0.1rem, -0.02rem) rotate(-96deg); + } +} + +@keyframes agent-fab-action-happy-jump-leg-left { + 0%, + 100% { + transform: rotate(0deg); + } + + 9%, + 37%, + 65% { + transform: translate(0.08rem, -0.22rem) rotate(82deg); + } + + 20%, + 48%, + 76% { + transform: translate(-0.18rem, 0.08rem) rotate(-32deg); + } + + 29%, + 57%, + 85% { + transform: translate(0.12rem, -0.08rem) rotate(44deg); + } +} + +@keyframes agent-fab-action-happy-jump-leg-right { + 0%, + 100% { + transform: rotate(0deg); + } + + 9%, + 37%, + 65% { + transform: translate(-0.08rem, -0.22rem) rotate(-82deg); + } + + 20%, + 48%, + 76% { + transform: translate(0.18rem, 0.08rem) rotate(32deg); + } + + 29%, + 57%, + 85% { + transform: translate(-0.12rem, -0.08rem) rotate(-44deg); + } +} + @keyframes agent-fab-core-pulse { 0%, 100% {