GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-25 09:33:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add happy-jump animation to agent assistant FAB

Browse Source
This commit is contained in:
jxxghp
2026-06-24 08:45:44 +08:00
parent 3202251f55
commit 6789d63ca1
1 changed files with 325 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
src/components/agent/AgentAssistantEntry.vue
View File

@@ -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<FabRandomAction, number> = {
'eye-roll': 1900,
faint: 4800,
disassemble: 6200,
'happy-jump': 5200,
}
// 入口位置只保存在当前页面生命周期内，刷新后回到默认位置。
@@ -783,6 +784,7 @@ defineExpose({
<span class="agent-assistant-fab__face">
<span class="agent-assistant-fab__eye agent-assistant-fab__eye--left" />
<span class="agent-assistant-fab__eye agent-assistant-fab__eye--right" />
<span class="agent-assistant-fab__smile" />
</span>
</span>
<span class="agent-assistant-fab__body">
@@ -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% {