Motion Prompt #057|标签页 · Tabs(中文译文)
点击标签切换内容面板;中文译文,效果未实测。
来源:import:liubai_versions_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0299/translation-zh.md · 授权:MIT License Copyright (c) 2026 Shohei Ohtaki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
使用示例提示词正文
请使用“Tabs”(タブ),它是“UI component names”中的一个名称。 Motion Prompt #057 定义:点击标签,切换当前显示的面板 示例展示:依次点击“概览、价格、评价”标签页时,蓝色下划线横向滑动,下方内容随之切换。 规格: - 卡片为542×191,循环4.5 s。三个标签页x分别为24、114、204,宽度70、70、100;y=50处为2 px分隔线,蓝色下划线高4 px。 - 光标1.0 s点击第二个标签,2.2 s点击第三个,3.4 s点击第一个。 - 下划线的位置和宽度从每次点击起用0.25 s按easeInOutCubic移动到新标签;从第三个返回第一个时经过中间。 - 文字:选中项为蓝色粗体,其他为灰色;文字状态分别在1.1、2.3、3.5 s切换。 - 内容:旧面板用0.2 s线性淡出;0.1 s后,新面板用0.2 s淡入,同时向上移动8 px。 何时使用:在同一空间展示多个相关视图,让用户在其中切换。 参考实现(Canvas 2D,画面仅由时间决定的函数):https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/057.txt 共享辅助代码:https://showheyohtaki.github.io/motion-prompt/api/v1/kit/ui.js 请保持参考实现的形状、时间安排和缓动数值不变,只调整文字、颜色和素材,以适配我正在制作的项目。
使用示例
示例输入
请实现“标签页 · Tabs”:点击标签切换内容面板;中文译文,效果未实测。
示意结果
下方是来源作者提供的静态画面和可播放动效参考,并非本站对该提示词调用模型生成的结果。
提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。