diff --git a/src/components/animation/README-define.md b/src/components/animation/README-define.md
new file mode 100644
index 0000000..8a1a50a
--- /dev/null
+++ b/src/components/animation/README-define.md
@@ -0,0 +1,405 @@
+# 目录
+
+* [**命名规则**](#命名规则)
+* [**介绍**](#介绍)
+ * [**基础控件库**](#基础控件库)
+ * [**应用窗口**](#应用窗口)
+ * [**桌面**](#桌面)
+ * [**多任务视图**](#多任务视图)
+ * [**控制中心**](#控制中心)
+ * [**音量条**](#音量条)
+ * [**通知中心**](#通知中心)
+ * [**锁屏及解锁**](#锁屏及解锁)
+ * [**组件编辑**](#组件编辑)
+ * [**个性化配置**](#个性化配置)
+# 命名规则
+
+| 名称 | 动作 |
+| ---------------- | ---------------------------------------------- |
+| star_press | 缩小、背景颜色加深 |
+| star_free | 放大、背景颜色变浅 |
+| star_contraction | 缩小 |
+| star_expansion | 放大 |
+| star_fadeIn | 逐渐出现(透明度变化) |
+| star_fadeOut | 逐渐消失(透明度变化) |
+| star_open | 出现(透明度变化)、背景颜色变化、尺寸变化、位移 |
+| star_close | 消失(透明度变化)、背景颜色变化、尺寸变化、位移 |
+| star_moveX | X 方向位移 |
+| star_moveY | Y 方向位移 |
+| star_background | 背景颜色变化 |
+| star_appear | 出现(透明度 0-100)、位移、缩放 |
+| star_disappear | 消失(透明度 100-0)、位移、缩放 |
+| star_size | 尺寸变化 |
+| v_x | v_x 代表 version_x，由数据不同而定义不同的版本 |
+
+# 介绍
+
+## 基础控件库
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :---------------------- | :-----------------------------: | :------------------: | :--------------------: | :-----------------------------------------------------------------------------------------------------: | :------: | :---------------: | --------------------: |
+| primary button | 按下 | 按钮整体 | star_press | scale(1-0.9)、#0098f7-#0086d9 | 150ms | (0,0.35,0.2,1) | .star_press |
+| | 释放 | 按钮整体 | star_free | scale(0.9-1)、#0086d9-#0098f7 | 200ms | (0,0.35,0.2,1) | .star_free |
+| default button | 按下 | 按钮整体 | star_contraction_v1 | scale(1-0.9) | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
+| | | 底板 | star_fadeIn_v1 | opacity(6-15) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v1 |
+| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
+| | | 底板 | star_fadeOut_v1 | opacity(15-6) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v1 |
+| pure button | 按下 | 按钮整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
+| | | 底板 | star_fadeIn_v2 | opacity(78-96) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v2 |
+| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
+| | | 底板 | star_fadeOut_v2 | opacity(96-78) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v2 |
+| icon button | 按下 | 圆底 | star_open_v1 | scale(1-2)、opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_open_v1 |
+| | 释放 | 圆底 | star_fadeOut_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v2a |
+| text button | 按下 | 按钮底 | star_fadeIn_v3 | opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
+| | 释放 | 按钮底 | star_fadeOut_v3 | opacity(6-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
+| multi buttons | 按下 | 按钮底 | star_fadeIn_v4 | opacity(0-50) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v4 |
+| | 释放 | 按钮底 | star_fadeOut_v4 | opacity(50-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v4 |
+| switch | 开 | 按钮整体 | star_open_v2 | scale(1-0.9)、scale(0.9-1)、rgba(29,152,240,1)-rgba(0,0,0,0.35) | 300ms | (0.25,0.1,0.25,1) | .star_open_v2 |
+| | 关 | 按钮整体 | star_close_v1 | scale(1-0.9)、scale(0.9-1)、rgba(0,0,0,0.35)-rgba(29,152,240,1) | 300ms | (0.25,0.1,0.25,1) | .star_close_v1 |
+| radio | 开 | 按钮整体 | star_open_v3 | rgba(41,41,41,1)-rgba(29,152,240,10)、border(4px rgba(38, 38, 38, 0.25)-9px rgba(29, 152, 240, 1)) | 200ms | (0.25,0.1,0.25,1) | .star_open_v3 |
+| | 关 | 按钮整体 | star_close_v2 | rgba(29,152,240,10)-rgba(41,41,41,1)、border(9px rgba(29, 152, 240, 1)-4px rgba(38, 38, 38, 0.25)) | 200ms | (0.25,0.1,0.25,1) | .star_close_v2 |
+| checkbox | 开 | 对勾图标 | star_open_v4 | opacity(0-100)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_open_v4 |
+| | | 方框 | star_open_v5 | border-width(3px-0)、opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_open_v5 |
+| checkbox | 关 | 对勾图标 | star_close_v3 | opacity(100-0)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_close_v3 |
+| | | 方框 | star_close_v4 | border-width(0-3px)、opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_close_v4 |
+| toggle | 开 | 圆块 | star_moveX_v1 | 32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v1 |
+| | | 底盘 | star_background_v1 | rgba(0,0,0,12)-rgba(29,152,240,1) | 200ms | (0.25,0.1,0.25,1) | .star_background_v1 |
+| toggle | 关 | 圆块 | star_moveX_v2 | -32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v2 |
+| | | 底盘 | star_background_v2 | rgba(29,152,240,1)-rgba(0,0,0,12) | 200ms | (0.25,0.1,0.25,1) | .star_background_v2 |
+| toast | 出现 | 整体 | star_appear_v1 | Y:90px opacity(0-100) | - | | .star_appear_v1 |
+| | 消失 | 整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 150ms | (0.25,0.1,0.25,1) | .star_disappear_v1 |
+| dialog | 出现 | 弹窗整体 | star_appear_v2 | scale(0.85-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
+| | | 遮罩 | star_fadeIn_v5 | opacity(0-30) | 250ms | | .star_fadeIn_v5 |
+| | 消失 | 弹窗整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 250ms | (0,0.35,0.25,1) | .star_disappear_v1a |
+| | | 遮罩 | star_fadeOut_v5 | opacity(30-0) | 250ms | 0,0.35,0.25,1) | .star_fadeOut_v5 |
+| notification | 出现 | 整体 | star_moveY_v1 | 230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v1 |
+| | 自动消失 | 整体 | star_moveY_v2 | -230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v2 |
+| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
+| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
+| | 点击面板打开应用-按下 | 面板整体 | star_contraction_v2 | scale(1-0.95) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
+| | 点击面板打开应用-释放 | 面板整体 | star_disappear_v2 | scale(0.95-1) opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v2 |
+| | | 应用界面 | star_appear_v3 | scale(0.5-1) opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v3a |
+| | 执行按钮操作-按下 | 按钮 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
+| | 执行按钮操作-释放 | 按钮 | star_expansion_v1 | | 150ms | (0,0.35,0.2,1) | .star_expansion_v1a |
+| | 执行按钮操作-释放 | 通知面板 | star_moveY_v2 | | 150ms | (0,0.35,0.2,1) | .star_moveY_v2a |
+| DatePicker、TimePicker | 滑动选择 | 对应列 | star_moveY | 位移参数无法确定 | | |
+| | | 进入中间选中态的选项 | star_open_v6 | font-star_size(28pt-36pt)color(rgba(38,38,38,0.45)-rgba(29,152,240,1)) | | | .star_open_v6 |
+| | | 离开中间选中态的选项 | star_close_v5 | font-star_size(36pt-28pt)color(rgba(29,152,240,1)-rgba(38,38,38,0.45)) | | | .star_close_v5 |
+| | 拖拽选择 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
+| | 点击选择时间动效 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
+| | | 进入中间选中态的选项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
+| | | 离开中间选中态的选项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
+| | 点击切换上下午 | 被点击项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
+| | | 未被点击项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
+| 底部菜单 | 出现 | 整体 | star_moveY_v3 | -50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v3 |
+| | 消失 | 整体 | star_moveY_v4 | 50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v4 |
+| 长按菜单 | 出现-长按桌面图标/桌面组件 | 图标 | star_contraction_v3 | scale(1-0.85) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
+| | | 组件 | star_contraction_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_contraction_v1a |
+| | 出现-按下第 0.4s | 图标 | star_expansion_v2 | | - | | .star_expansion_v2 |
+| | | 组件 | star_expansion_v1 | | - | | .star_expansion_v1 |
+| | | 菜单 | star_appear_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
+| | 消失 | 菜单 | star_disappear_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v1b |
+| 时间日期及桌面组件 | 按下 | 整体 | star_contraction_v1 | | 200ms | (0,0.35,0.2,1) | .star_contraction_v1b |
+| | 释放 | 整体 | star_expansion_v1 | | 250ms | (0,0.35,0.2,1) | .star_expansion_v1b |
+| 控制中心吊件 | 按下 | 整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
+| | 释放 | 整体 | star_expansion_v1 | | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
+| 可点击列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
+| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
+| 控件列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
+| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
+
+## 应用窗口
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :------- | :------------------------------------: | :------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
+| 应用窗口 | 从桌面图标打开-按下图标 | 应用图标 | star_contraction_v3 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
+| | 从桌面图标打开-松手 | 应用图标 | star_expansion_v3 | scale(0.85-1.3) | 150ms | (0.25,0.1,0.25,1) | .star_expansion_v3 |
+| | | 高斯遮罩 | star_fadeIn_v6 | opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
+| | | 应用界面 | star_appear_v4 | scale(0.1-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v4 |
+| | 退出到桌面图标-从底部上划 | 应用界面 | star_contraction_v4 | scale(1-0.5) | - | | .star_contraction_v4 |
+| | 从桌面图标打开-松手 | 应用界面 | star_disappear_v3 | scale(-0.1) opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
+| | | 高斯遮罩 | star_fadeOut_v6 | opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
+| | | 应用图标 | star_contraction_v5 | scale(1.3-1) | 150ms | (0,0.35,0.2,1) | .star_contraction_v5 |
+| | 从他处打开 | 高斯遮罩 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
+| | | 应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
+| | 退出到无对应应用的界面-从底部上划 | 应用界面 | star_contraction_v4 | | - | | .star_contraction_v4 |
+| | 退出到无对应应用的界面-松手 | 应用界面 | star_disappear_v3 | | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
+| | | 高斯遮罩 | star_fadeOut_v6 | | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
+
+## 桌面
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :-------------------------------- | :------------------------------------------: | :-----------------------------: | :-------------------: | :----------------------------------------------------: | :------: | :---------------: | --------------------: |
+| 应用组 | 应用组展开 | 容器底 | star_fadeOut_v7 | opacity(25-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v7 |
+| | | 应用组名称(小) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 桌面上除应用组的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 组内各应用图标(包括其名称) | star_expansion_v4 | scale(0.148-1) | 300ms | (0.3,0.2,0.1,1) | .star_expansion_v4 |
+| | | 各自应用名称 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
+| | | 应用组名称(大) | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
+| | 应用组收缩 | 应用组名称(大) | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
+| | | 组内各应用图标(包括其名称) | star_contraction_v6 | scale(1-0.148) | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
+| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
+| | | 桌面上除应用组的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
+| | | 容器底 | star_fadeIn_v7 | opacity(0-25) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v7 |
+| 屏幕编辑模式 | 唤起屏幕编辑 | 卸载角标按钮(整体) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
+| | | 顶部三按钮(整体) | star_appear_v5 | Y:70px opacity(0-100) | 250ms | (0.3,0.2,0.1,1) | .star_appear_v5 |
+| | | 时间天气组件(整体) | star_contraction_v2 | | 250ms | (0.3,0.2,0.1,1) | .star_contraction_v2a |
+| | | 时间天气组件(底板) | star_fadeIn_v8 | opacity(0-12) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v8 |
+| | 退出屏幕编辑 | 卸载角标按钮(整体) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 顶部三按钮(整体) | star_disappear_v4 | Y:-70px opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v4 |
+| | | 时间天气组件(整体) | star_expansion_v5 | scale(0.95-1) | 250ms | (0.3,0.2,0.1,1) | .star_expansion_v5 |
+| | | 时间天气组件(底板) | star_fadeOut_v8 | opacity(12-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v8 |
+| | 移除桌面组件 | 卸载角标 | star_fadeOut_v6 | | 50ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6d |
+| | | 对应桌面组件 | star_disappear_v5 | scale(1-0.7) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v5 |
+| dock 栏 | 移出图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
+| | 移入图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
+| | 移入图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
+| | 内部移动图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
+| | 内部移动图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
+| 创建应用组、增加应用(不展开) | 创建应用组(未展开)-长按 A 并拖动 | A 应用名称 | star_fadeOut_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6f |
+| | 创建应用组(未展开)-A 覆盖 B 一半 | B 图标下的容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
+| | 创建应用组(未展开)-覆盖 0.6s 内松手 | B 应用名称 | | | 50ms | (0.25,0.1,0.25,1) |
+| | | B 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
+| | | A 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
+| | | 应用组容器 | star_size_v1 | 114×114-92×92border-radius(28px-20px) | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
+| | 增加应用-C 覆盖 B 一半时 | 应用组容器 | star_size_v2 | 92×92-114×114border-radius(20px-28px) | 250ms | (0.25,0.1,0.25,1) | .star_size_v2 |
+| | 增加应用-C 覆盖 0.6 内松手 | 应用组容器 | star_size_v1 | | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
+| | 增加应用-C 覆盖 0.6 内松手 | C 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
+| 创建应用组(展开) | A 覆盖 B 一半 | B 图标下的容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
+| | 覆盖到第 0.6 内松手 | B 图标下的容器底 | star_fadeOut_v5 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v5a |
+| | | 桌面上除应用组的所有内容 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| | | B 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
+| | | 应用组名称(大) | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| | | 容器白线框 | star_fadeIn_v9 | opacity(0-35) | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v9 |
+| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
+| | | 容器白线框 | star_fadeOut_v9 | opacity(35-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
+| 组内跨页移动 | 开始拖动 | 容器白线框 | star_fadeIn_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5a |
+| | A 距右边框 30px 以内且停留到第 0.3 秒时 | 组内应用组/分页符 | | | 300ms | (0.25,0.1,0.25,1) |
+| | 释放 A 图标 | A 图标 | star_moveX | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
+| | | A 应用名称 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
+| | | 容器白线框 | star_fadeOut_v9 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
+| 移出应用组 | 开始拖动 | 容器白线框 | star_fadeIn_v9 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v9a |
+| | A 中线超过边框且停留到 0.2s 时 | 分页符 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
+| | | 容器白线框 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
+| | | 应用组名称(大) | star_fadeIn_v6 | 位移参数无法确定 | 100ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6d |
+| | | 组内各应用图标(包括其名称) | star_contraction_v6 | 位移参数无法确定 | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
+| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
+| | | 桌面上除应用组的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
+| | | 容器底 | star_fadeIn_v5 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v5b |
+| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1 |
+| | | A 应用名称 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
+| | | 应用组内图标 | | | 300ms | (0.25,0.1,0.25,1 |
+| 父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v11 | -600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v11 |
+| | | 本页面上的遮罩 | star_open_v10 | X:-600pxrgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v10 |
+| | | 子页面 | star_moveX_v12 | -1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v12 |
+| | 返回到上级页面 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |
+| | | 本页面上的遮罩 | star_close_v9 | X:1200pxrgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v9 |
+| | | 上级页面 | star_moveX_v13 | 600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v13 |
+| 侧边栏结构父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v14 | -368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v14 |
+| | | 本页面上的遮罩 | star_open_v11 | X:-368pxrgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v11 |
+| | | 子页面 | star_moveX_v15 | -736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v15 |
+| | 返回到上级页面 | 当前页面 | star_moveX_v16 | 736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v16 |
+| | | 本页面上的遮罩 | star_close_v10 | X:736pxrgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v10 |
+| | | 上级页面 | star_moveX_v17 | 368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v17 |
+
+## 多任务视图
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :---------------------------- | :---------------------------------: | :-----------------------------------: | :-------------------: | :----------------------------------: | :------: | :---------------: | -------------------: |
+| 从桌面唤起多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v2 | | | | .star_contraction_v2 |
+| | 应用界面冒出 | 应用界面 | star_moveX_v3 | 596px | 400ms | (0.25,0.1,0.25,1) | .star_moveX_v3 |
+| | | 高斯遮罩 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
+| | 应用界面跟随手指滑动的联动效果 | 应用界面阵列 | star_contraction_v7 | scale(0.7-0.4) | | | .star_contraction_v7 |
+| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
+| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
+| | | 应用图标及名称(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
+| 退出多任务视图 | 退出多任务 | 所有应用界面(整体) | star_moveX_v4 | -100px | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
+| | | 所有应用图标和名称 | star_moveX_v4 | | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
+| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
+| 从应用界面启动多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v9 | scale(1-0.3) | | | .star_contraction_v9 |
+| | 其他界面出现 | 应用界面 | star_moveX | 位移参数无法确定 | 150ms | (0,0.35,0.2,1) |
+| | 继续滑动的联动效果 | 应用界面 | star_moveX | 位移参数无法确定 | | |
+| | | | star_contraction_v9 | | | | .star_contraction_v9 |
+| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
+| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
+| | | 应用图标及名称(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
+| 关闭应用进程 | 划掉应用 | 被滑动应用面板(包括其图标和名称) | star_disappear_v6 | scale(1-0.5) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v6 |
+| | | 其他应用面板(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
+| | 未划掉应用 | 被拖拽应用面板(包括其图标和名称) | star_moveY | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
+| 清除应用 | 清除应用 | 被清除应用面板(包括其图标和名称) | star_disappear_v7 | scale(1-0.7) Y:-144px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v7 |
+| | | 被锁定应用面板(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0,0.35,0.2,1) |
+| | 自动回到桌面 | 被锁定应用面板(包括其图标和名称 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| | | 清除按钮 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
+
+## 控制中心
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :-------------- | :---------------------------: | :------------: | :----------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
+| 唤起/退出 | 跟随手指下滑动的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
+| | | 控制中心内容 | star_moveY_v5 | 250px | | | .star_moveY_v5 |
+| | 控制中心出现 | 控制中心内容 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
+| | 控制中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
+| | 退出控制中心 | 控制中心内容 | star_disappear_v8 | Y:-40px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v8 |
+| | | 毛玻璃遮罩层 | star_fadeOut_v10 | blur(60-0) opacity(0.65-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
+| 编辑模式 | 进入 | 控制中心内容 | star_disappear_v9 | X:-30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v9 |
+| | | 编辑模式内容 | star_appear_v6 | X:-30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v6 |
+| | | 右上状态图标 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | 退出 | 编辑模式内容 | star_disappear_v10 | X:30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v10 |
+| | | 控制中心内容 | star_appear_v7 | X:30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v7 |
+| | | 右上状态图标 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
+| editable-switch | 进入列表页 | 控制中心标题栏 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
+| | | 列表页标题栏 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
+| | | 长按钮内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 控制中心内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 容器 | star_size_v3 | 240×108-512×700 background(浅白渐变) | 300ms | (0.3,0.2,0.1,1) | .star_size_v3 |
+| | | 列表页内容 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
+| | 退出列表页 | 控制中心标题栏 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
+| | | 列表页标题栏 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
+| | | 长按钮内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
+| | | 控制中心内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
+| | | 容器 | star_size_v4 | 512×700-240×108 background(状态色) | 250ms | (0.3,0.2,0.1,1) | .star_size_v4 |
+| | | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
+| | 进入密码页 | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
+| | | 密码页 | star_appear_v8 | scale(0.9-1) opacity(0-100) | 300ms | (0.3,0.2,0.1,1) | .star_appear_v8 |
+| | 退出密码页 | 密码页 | star_disappear_v11 | scale(1-0.9) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v11 |
+| | | 列表页内容 | star_fadeIn_v6 | | 150ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6i |
+
+## 音量条
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :------------- | :-----------: | :------------: | :-------------: | :-------------------: | :------: | :---------------: | ---------------: |
+| 出现、消失 | 出现 | 音量条 | star_moveX_v5 | 40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v5 |
+| | 消失 | 音量条 | star_moveX_v6 | -40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v6 |
+| | 调节音量-接触 | 值槽 | star_size_v5 | 16px-32px | 250ms | (0.25,0.1,0.25,1) | .star_size_v5 |
+| | 调节音量-松手 | 值槽 | star_size_v6 | 32px-16px | 250ms | (0.25,0.1,0.25,1) | .star_size_v6 |
+| 静音、取消静音 | 静音 | | | | 300ms | (0.25,0.1,0.25,1) |
+| | 取消静音 | | | | 300ms | (0.25,0.1,0.25,1) |
+| 展开音量条 | 展开 | 容器 | star_size_v7 | 96px-388px | 300ms | (0.25,0.1,0.25,1) | .star_size_v7 |
+| | | 铃声音量内容组 | star_moveX_v7 | 26px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v7 |
+| | | 媒体音量内容组 | star_appear_v9 | X:36px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v9 |
+| | | 闹钟音量内容组 | star_appear_v10 | X:46px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v10 |
+| | 消失 | 整体面板 | star_moveX | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
+
+## 通知中心
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :------------------------ | :---------------------------: | :------------------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
+| 唤起/退出通知中心 | 跟随手指下滑动的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
+| | | 通知中心内容 | star_appear_v11 | Y:250px opacity(0-100) | | | .star_appear_v11 |
+| | 通知中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
+| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
+| | 退出通知中心 | 通知中心内容 | star_disappear_v12 | Y:-60px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v12 |
+| | | 清除按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
+| 唤起/退出通知选项 | 唤出通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
+| | | 删除及设置按钮 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
+| | 收起通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
+| | | 删除及设置按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
+| 删除通知 | 点击按钮删除 | 对应通知条 | star_moveX_v8 | -860px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v8 |
+| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
+| | | 设置按钮 | star_disappear_v13 | X:-15px opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
+| | | 下方所有通知条 | star_moveY_v6 | -150px | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
+| | 继续左滑删除 | 对应通知条 | star_moveX_v9 | -50px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v9 |
+| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
+| | | 设置按钮 | star_disappear_v13 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
+| | | 下方所有通知条 | star_moveY_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
+| 清除通知 | 清除通知 | 所有通知条 | star_disappear_v14 | scale(1-0.9) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v14 |
+| | | "暂无通知"文字 | star_fadeIn_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6j |
+| | 自动进入桌面 | 毛玻璃遮罩 | star_fadeOut_v10 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10a |
+| | | 标题栏 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| | | "暂无通知"文字 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
+| 同应用多通知
展开/收起 | 多通知展开 | 展开前的多通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
+| | | 展开后的首个通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
+| | | 多通知容器 | star_size_v8 | height: 304px | 300ms | (0.25,0.1,0.25,1) | .star_size_v8 |
+| | | 各子通知内容 | star_appear_v12 | Y:52px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v12 |
+| | | 下方其他通知 | star_moveY_v7 | 152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v7 |
+| | 多通知收缩 | 多通知容器 | star_size_v9 | height: 152px | 300ms | (0.25,0.1,0.25,1) | .star_size_v9 |
+| | | 各子通知内容 | star_disappear_v15 | Y:-52px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v15 |
+| | | 下方其他通知 | star_moveY_v8 | -152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v8 |
+| | | 首个子通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
+| | | 收缩后通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
+| 点击通知打开应用 | 按下通知条 | 通知条 | star_contraction_v2 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
+| | 松手 | 通知条 | star_expansion_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_expansion_v5b |
+| | | 通知中心内容 | star_disappear_v12 | | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v12a |
+| | | 清除按钮 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
+| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10b |
+| | | 对应应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
+
+## 锁屏及解锁
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :--------------------- | :------------: | :-------------------------: | :----------------: | :--------------------------------: | :------: | :---------------: | ------------------: |
+| 锁屏页-样式选择页 | 激活样式选择页 | 当前及其他锁屏页 | star_open_v7 | scale(1-0.43) border-radius(-20px) | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
+| | | 样式选择页的底部按钮组 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
+| | | 样式选择页的选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
+| | 缩略图划页 | 缩略图阵列 | | | | |
+| | 取消样式选择页 | 缩略图阵列 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
+| | | 样式选择页的底部按钮组 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
+| | | 样式选择页的选中框 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
+| | | 毛玻璃遮罩 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
+| | 进入全屏预览页 | 样式选择页的选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
+| | | 当前及其他锁屏页 | star_close_v6 | scale(0.43-1) border-radius(20px-) | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
+| | 全屏预览划页 | 全屏页面 | | | | |
+| | 回到缩略图 | 当前及其他锁屏页 | star_open_v7 | | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
+| | | 样式选择页的选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
+| | 缩略图样式完成 | 当前及其他锁屏页 | star_close_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
+| | | 样式选择页的底部按钮组 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | | 样式选择页的选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
+| 进入/退出密码页 | 进入密码页 | 锁屏页内容 | star_disappear_v16 | Y:-160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v16 |
+| | | 毛玻璃遮罩 | star_fadeIn_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v10 |
+| | | 密码页内容 | star_appear_v13 | Y:-160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v13 |
+| | 退出密码页 | 锁屏页内容 | star_disappear_v17 | Y:160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
+| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
+| | | 密码页内容 | star_appear_v14 | Y:160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v14 |
+| 数字按键 | 按下 | 底圆 | star_open_v8 | 60×60-154×154 opacity(0-35) | 200ms | (0.25,0.1,0.25,1) | .star_open_v8 |
+| | 松手 | 底圆 | star_close_v7 | -206×206 opacity(35-0) | 400ms | (0.25,0.1,0.25,1) | .star_close_v7 |
+| 密码登录至桌面 | 密码登录至桌面 | 密码页内容 | star_disappear_v17 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
+| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
+| | | 桌面内容(除了 dock 栏) | star_appear_v15 | scale(1.1-1) opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v15 |
+| | | dock 栏 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
+
+## 组件编辑
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :------------------------------------------ | :--------------: | :------------: | :---------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
+| 唤出/收起组价 编辑面板 | 唤出 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+| | | 所有卸载按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
+| | | 时间组件底板 | star_fadeOut_v11 | opacity(10-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v11 |
+| | | 上方按钮组 | star_disappear_v4 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v4a |
+| | 收起 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+| | | 所有卸载按钮 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
+| | omp | 时间组件底板 | star_fadeIn_v11 | opacity(0-10) | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v11 |
+| | | 上方按钮组 | star_appear_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_appear_v5a |
+| 唤出/收起全部 应用面板 | 唤出 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+| | | 组件编辑面板 | star_close_v8 | opacity(100-50) scale(1-0.9) Y:-32px | 300ms | (0.25,0.1,0.25,1) | .star_close_v8 |
+| | 收起 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.32,0.2,0.1,1) |
+| | | 组件编辑面板 | star_open_v9 | opacity(50-100) scale(0.9-1) Y:32px | 300ms | (0.25,0.1,0.25,1) | .star_open_v9 |
+| 全部应用点击定位至组件编辑页对应组件处 | 定位至对应组件处 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+| | | 组件编辑面板 | star_open_v9 | | 400ms | (0.25,0.1,0.25,1) | .star_open_v9a |
+| | | 组件编辑页内容 | star_moveY | 无法确定位移参数 | 450ms | (0.25,0.1,0.25,1) |
+| 拖拽组件至桌面并放置 | 选中组件 | 被选中的组件 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
+| | 拖动组件 | 被拖拽组件 | star_fadeOut_v6 | | 350ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6m |
+| | | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+| | 放置组件 | 对应组件 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
+
+## 个性化配置
+
+| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
+| :----------------------- | :-----------------------: | :-----------------------------: | :----------------: | :-----------------------: | :------: | :---------------: | ------------------: |
+| 唤出/收起个性化面板 | 同组件编辑 | | | | | |
+| 切换标签页 | 切换到右边 tab 页 | 当前页内容 | star_disappear_v18 | X:-80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v18 |
+| | | 下一页内容 | star_appear_v16 | X:-80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v16 |
+| | 切换到左边 tab 页 | 当前页内容 | star_disappear_v19 | X:80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v19 |
+| | | 下一页内容 | star_appear_v17 | X:80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v17 |
+| 图标调整-联动控制 | 调整图标大小 | 图标 | star_size_v10 | 88×88-120×120 | | | .star_size_v10 |
+| | 调整应用名称文字大小 | 文字 | star_size_v11 | font-star_size(16pt-28pt) | | | .star_size_v11 |
+| 进入/退出壁纸预览页 | 进入 | 被点击的壁纸 | star_open | 位移参数无法确定 | 350ms | (0.25,0.1,0.25,1) |
+| | | 预览页壁纸缩略图阵列(整体) | star_appear_v18 | X:-500px opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v18 |
+| | | 预览页应用按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
+| | | 预览页顶部返回按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
+| | 退出 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |
diff --git a/src/components/animation/animaiton.ts b/src/components/animation/animaiton.ts
new file mode 100644
index 0000000..b02042e
--- /dev/null
+++ b/src/components/animation/animaiton.ts
@@ -0,0 +1,189 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {animation} from './animation-styles'
+import '../button/button'
+
+@customElement('star-animation')
+export class StarAnimation extends LitElement {
+ public static override get styles(): CSSResultArray {
+ return [animation]
+ }
+
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'star-animation': StarAnimation
+ }
+}
diff --git a/src/components/animation/animation-styles.ts b/src/components/animation/animation-styles.ts
new file mode 100644
index 0000000..dda29e2
--- /dev/null
+++ b/src/components/animation/animation-styles.ts
@@ -0,0 +1,2106 @@
+import {css, CSSResult} from 'lit'
+
+export const animation: CSSResult = css`
+ .star_press {
+ animation: star_press 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_free {
+ animation: star_free 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_background_v1 {
+ animation: star_background_v1 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_background_v2 {
+ animation: star_background_v2 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v1 {
+ animation: star_contraction_v1 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_contraction_v1a {
+ animation: star_contraction_v1 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v1b {
+ animation: star_contraction_v1 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_contraction_v2 {
+ animation: star_contraction_v2 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v2a {
+ animation: star_contraction_v2 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_contraction_v3 {
+ animation: star_contraction_v3 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v4 {
+ animation: star_contraction_v4 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v5 {
+ animation: star_contraction_v5 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_contraction_v6 {
+ animation: star_contraction_v6 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_contraction_v6a {
+ animation: star_contraction_v6a 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v7 {
+ animation: star_contraction_v7 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_contraction_v8 {
+ animation: star_contraction_v8 300ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_contraction_v9 {
+ animation: star_contraction_v9 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_expansion_v1 {
+ animation: star_expansion_v1 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_expansion_v1a {
+ animation: star_expansion_v1 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_expansion_v1b {
+ animation: star_expansion_v1 250ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_expansion_v2 {
+ animation: star_expansion_v2 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_expansion_v3 {
+ animation: star_expansion_v3 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_expansion_v4 {
+ animation: star_expansion_v4 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_expansion_v5 {
+ animation: star_expansion_v5 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_expansion_v5a {
+ animation: star_expansion_v5 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_expansion_v5b {
+ animation: star_expansion_v5 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v1 {
+ animation: star_fadeIn_v1 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeIn_v2 {
+ animation: star_fadeIn_v2 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeIn_v3 {
+ animation: star_fadeIn_v3 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v4 {
+ animation: star_fadeIn_v4 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v5 {
+ animation: star_fadeIn_v5 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v5a {
+ animation: star_fadeIn_v5 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v5b {
+ animation: star_fadeIn_v5 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6 {
+ animation: star_fadeIn_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v6a {
+ animation: star_fadeIn_v6 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6b {
+ animation: star_fadeIn_v6 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6c {
+ animation: star_fadeIn_v6 100ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v6d {
+ animation: star_fadeIn_v6 100ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6e {
+ animation: star_fadeIn_v6 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v6f {
+ animation: star_fadeIn_v6 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v6g {
+ animation: star_fadeIn_v6 100ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeIn_v6h {
+ animation: star_fadeIn_v6 200ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6i {
+ animation: star_fadeIn_v6 150ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v6j {
+ animation: star_fadeIn_v6 50ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v6j {
+ animation: star_fadeIn_v6 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v7 {
+ animation: star_fadeIn_v7 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v8 {
+ animation: star_fadeIn_v8 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v9 {
+ animation: star_fadeIn_v9 100ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v9a {
+ animation: star_fadeIn_v8 200ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeIn_v10 {
+ animation: star_fadeIn_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeIn_v11 {
+ animation: star_fadeIn_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v1 {
+ animation: star_fadeOut_v1 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeOut_v2 {
+ animation: star_fadeOut_v2 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeOut_v2a {
+ animation: star_fadeOut_v2 250ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeOut_v3 {
+ animation: star_fadeOut_v3 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v4 {
+ animation: star_fadeOut_v4 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v5 {
+ animation: star_fadeOut_v5 250ms cubic-bezier(0, 0.35, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v5a {
+ animation: star_fadeOut_v5 100ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6 {
+ animation: star_fadeOut_v6 250ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeOut_v6a {
+ animation: star_fadeOut_v6 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v6b {
+ animation: star_fadeOut_v6 100ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v6c {
+ animation: star_fadeOut_v6 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v6d {
+ animation: star_fadeOut_v6 50ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v6f {
+ animation: star_fadeOut_v6 50ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6g {
+ animation: star_fadeOut_v6 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6h {
+ animation: star_fadeOut_v6 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6i {
+ animation: star_fadeOut_v6 200ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v6j {
+ animation: star_fadeOut_v6 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6k {
+ animation: star_fadeOut_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6l {
+ animation: star_fadeOut_v6 100ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v6m {
+ animation: star_fadeOut_v6 350ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v7 {
+ animation: star_fadeOut_v7 250ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_fadeOut_v8 {
+ animation: star_fadeOut_v8 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_fadeOut_v9 {
+ animation: star_fadeOut_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v10 {
+ animation: star_fadeOut_v10 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v10a {
+ animation: star_fadeOut_v10 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v10b {
+ animation: star_fadeOut_v10 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v10c {
+ animation: star_fadeOut_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_fadeOut_v11 {
+ animation: star_fadeOut_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v1 {
+ animation: star_open_v1 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v2 {
+ animation: star_open_v2 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v3 {
+ animation: star_open_v3 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v4 {
+ animation: star_open_v4 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v5 {
+ animation: star_open_v5 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v6 {
+ animation: star_open_v6 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_open_v7 {
+ animation: star_open_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v8 {
+ animation: star_open_v8 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v9 {
+ animation: star_open_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v9a {
+ animation: star_open_v9 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v10 {
+ animation: star_open_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_open_v11 {
+ animation: star_open_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v1 {
+ animation: star_close_v1 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v2 {
+ animation: star_close_v2 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v3 {
+ animation: star_close_v3 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v4 {
+ animation: star_close_v4 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v5 {
+ animation: star_close_v5 200ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_close_v6 {
+ animation: star_close_v6 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v7 {
+ animation: star_close_v7 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v8 {
+ animation: star_close_v8 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v9 {
+ animation: star_close_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_close_v10 {
+ animation: star_close_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v1 {
+ animation: star_moveX_v1 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v2 {
+ animation: star_moveX_v2 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v3 {
+ animation: star_moveX_v3 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v4 {
+ animation: star_moveX_v4 350ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v5 {
+ animation: star_moveX_v5 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v6 {
+ animation: star_moveX_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v7 {
+ animation: star_moveX_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v8 {
+ animation: star_moveX_v8 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v9 {
+ animation: star_moveX_v9 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v10 {
+ animation: star_moveX_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v11 {
+ animation: star_moveX_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v12 {
+ animation: star_moveX_v12 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v13 {
+ animation: star_moveX_v13 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v14 {
+ animation: star_moveX_v14 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v15 {
+ animation: star_moveX_v15 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v16 {
+ animation: star_moveX_v16 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveX_v17 {
+ animation: star_moveX_v17 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v1 {
+ animation: star_moveY_v1 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_moveY_v2 {
+ animation: star_moveY_v2 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_moveY_v2a {
+ animation: star_moveY_v2 150ms cubic-bezier(0, 0.35, 0.2, 1) forwards;
+ }
+
+ .star_moveY_v3 {
+ animation: star_moveY_v3 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v4 {
+ animation: star_moveY_v4 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v5 {
+ animation: star_moveY_v5 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v6 {
+ animation: star_moveY_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v7 {
+ animation: star_moveY_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_moveY_v8 {
+ animation: star_moveY_v8 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v1 {
+ animation: star_appear_v1 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v2 {
+ animation: star_appear_v2 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v3 {
+ animation: star_appear_v3 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v3a {
+ animation: star_appear_v3 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v4 {
+ animation: star_appear_v4 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v5 {
+ animation: star_appear_v5 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_appear_v5a {
+ animation: star_appear_v5 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_appear_v6 {
+ animation: star_appear_v6 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v7 {
+ animation: star_appear_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v8 {
+ animation: star_appear_v8 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_appear_v9 {
+ animation: star_appear_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v10 {
+ animation: star_appear_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v11 {
+ animation: star_appear_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v12 {
+ animation: star_appear_v12 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v13 {
+ animation: star_appear_v13 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v14 {
+ animation: star_appear_v14 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v15 {
+ animation: star_appear_v15 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v16 {
+ animation: star_appear_v16 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v17 {
+ animation: star_appear_v17 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_appear_v18 {
+ animation: star_appear_v18 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v1 {
+ animation: star_disappear_v1 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v1a {
+ animation: star_disappear_v1 250ms cubic-bezier(0, 0.35, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v1b {
+ animation: star_disappear_v1 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v2 {
+ animation: star_disappear_v2 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v3 {
+ animation: star_disappear_v3 250ms cubic-bezier(0, 0.35, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v4 {
+ animation: star_disappear_v4 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_disappear_v4a {
+ animation: star_disappear_v4 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v5 {
+ animation: star_disappear_v5 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_disappear_v6 {
+ animation: star_disappear_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ position: absolute;
+ left: 500px;
+ }
+
+ .star_disappear_v7 {
+ animation: star_disappear_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v8 {
+ animation: star_disappear_v8 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v9 {
+ animation: star_disappear_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v9a {
+ animation: star_disappear_v9 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v10 {
+ animation: star_disappear_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v11 {
+ animation: star_disappear_v11 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_disappear_v12 {
+ animation: star_disappear_v12 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v12a {
+ animation: star_disappear_v12 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v13 {
+ animation: star_disappear_v13 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v14 {
+ animation: star_disappear_v14 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v15 {
+ animation: star_disappear_v15 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v16 {
+ animation: star_disappear_v16 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v17 {
+ animation: star_disappear_v17 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v18 {
+ animation: star_disappear_v18 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_disappear_v19 {
+ animation: star_disappear_v19 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v1 {
+ animation: star_size_v1 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v2 {
+ animation: star_size_v2 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v3 {
+ animation: star_size_v3 300ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_size_v4 {
+ animation: star_size_v4 250ms cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
+ }
+
+ .star_size_v5 {
+ animation: star_size_v5 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v6 {
+ animation: star_size_v6 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v7 {
+ animation: star_size_v7 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v8 {
+ animation: star_size_v8 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v9 {
+ animation: star_size_v9 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v10 {
+ animation: star_size_v10 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ .star_size_v11 {
+ animation: star_size_v11 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ }
+
+ @keyframes star_press {
+ 0% {
+ transform: scale(1);
+ background: #0098f7;
+ }
+
+ 100% {
+ transform: scale(0.9);
+ background: #0086d9;
+ }
+ }
+
+ @keyframes star_free {
+ 0% {
+ transform: scale(0.9);
+ background: #0086d9;
+ }
+
+ 100% {
+ transform: scale(1);
+ background: #0098f7;
+ }
+ }
+
+ @keyframes star_contraction_v1 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.9);
+ }
+ }
+
+ @keyframes star_fadeIn_v1 {
+ 0% {
+ opacity: 6%;
+ }
+
+ 100% {
+ opacity: 15%;
+ }
+ }
+
+ @keyframes star_expansion_v1 {
+ 0% {
+ transform: scale(0.9);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_fadeOut_v1 {
+ 0% {
+ opacity: 15%;
+ }
+
+ 100% {
+ opacity: 6%;
+ }
+ }
+
+ @keyframes star_fadeIn_v2 {
+ 0% {
+ opacity: 78%;
+ }
+
+ 100% {
+ opacity: 96%;
+ }
+ }
+
+ @keyframes star_fadeOut_v2 {
+ 0% {
+ opacity: 96%;
+ }
+
+ 100% {
+ opacity: 78%;
+ }
+ }
+
+ @keyframes star_open_v1 {
+ 0% {
+ transform: scale(1);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(2);
+ opacity: 6%;
+ }
+ }
+
+ @keyframes star_fadeIn_v3 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 6%;
+ }
+ }
+
+ @keyframes star_fadeOut_v3 {
+ 0% {
+ opacity: 6%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_fadeIn_v4 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 50%;
+ }
+ }
+
+ @keyframes star_fadeOut_v4 {
+ 0% {
+ opacity: 50%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_open_v2 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 33.3% {
+ transform: scale(0.9);
+ background: rgba(0, 0, 0, 0.35);
+ }
+
+ 100% {
+ transform: scale(1);
+ background: rgba(29, 152, 240, 1);
+ }
+ }
+
+ @keyframes star_close_v1 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 33.3% {
+ transform: scale(0.9);
+ background: rgba(29, 152, 240, 1);
+ }
+
+ 100% {
+ transform: scale(1);
+ background: rgba(0, 0, 0, 0.35);
+ }
+ }
+
+ @keyframes star_open_v3 {
+ 0% {
+ color: rgba(41, 41, 41, 1);
+ border: 4px solid rgba(38, 38, 38, 0.25);
+ }
+
+ 100% {
+ color: rgba(29, 152, 240, 1);
+ border: 9px solid rgba(29, 152, 240, 1);
+ }
+ }
+
+ @keyframes star_close_v2 {
+ 0% {
+ color: rgba(29, 152, 240, 1);
+ border: 9px solid rgba(29, 152, 240, 1);
+ }
+
+ 100% {
+ color: rgba(41, 41, 41, 1);
+ border: 4px solid rgba(38, 38, 38, 0.25);
+ }
+ }
+
+ @keyframes star_open_v4 {
+ 0% {
+ opacity: 0%;
+ transform: scale(0);
+ }
+
+ 100% {
+ opacity: 100%;
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_open_v5 {
+ 0% {
+ opacity: 0%;
+ border-width: 3px;
+ }
+
+ 100% {
+ opacity: 100%;
+ border-width: 0px;
+ }
+ }
+
+ @keyframes star_close_v3 {
+ 0% {
+ opacity: 100%;
+ transform: scale(0);
+ }
+
+ 100% {
+ opacity: 0%;
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_close_v4 {
+ 0% {
+ opacity: 100%;
+ border-width: 0px;
+ }
+
+ 100% {
+ opacity: 0%;
+ border-width: 3px;
+ }
+ }
+
+ @keyframes star_moveX_v1 {
+ 100% {
+ transform: translateX(32px);
+ }
+ }
+
+ @keyframes star_background_v1 {
+ 0% {
+ background: rgba(0, 0, 0, 0.12);
+ }
+
+ 100% {
+ background: rgba(29, 152, 240, 1);
+ }
+ }
+
+ @keyframes star_moveX_v2 {
+ 100% {
+ transform: translateX(-32px);
+ }
+ }
+
+ @keyframes star_background_v2 {
+ 0% {
+ background: rgba(29, 152, 240, 1);
+ }
+
+ 100% {
+ background: rgba(0, 0, 0, 0.12);
+ }
+ }
+
+ @keyframes star_appear_v1 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(90px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v1 {
+ 0% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: scale(0.85);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v2 {
+ 0% {
+ transform: scale(0.85);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_fadeIn_v5 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 30%;
+ }
+ }
+
+ @keyframes star_fadeOut_v5 {
+ 0% {
+ opacity: 30%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveY_v1 {
+ 100% {
+ transform: translateY(230px);
+ }
+ }
+
+ @keyframes star_moveY_v2 {
+ 100% {
+ transform: translateY(-230px);
+ }
+ }
+
+ @keyframes star_contraction_v2 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.95);
+ }
+ }
+
+ @keyframes star_disappear_v2 {
+ 0% {
+ transform: scale(0.95);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v3 {
+ 0% {
+ transform: scale(0.5);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_open_v6 {
+ 0% {
+ font-size: 28pt;
+ color: rgba(38, 38, 38, 0.45);
+ }
+
+ 100% {
+ font-size: 36pt;
+ color: rgba(29, 152, 240, 1);
+ transform: translateY(40px);
+ }
+ }
+
+ @keyframes star_close_v5 {
+ 0% {
+ font-size: 36pt;
+ color: rgba(29, 152, 240, 1);
+ }
+
+ 100% {
+ font-size: 28pt;
+ color: rgba(38, 38, 38, 0.45);
+ transform: translateY(-40px);
+ }
+ }
+
+ @keyframes star_moveY_v3 {
+ 100% {
+ transform: translateY(-50px); // 根据对应位置设置位移的参数
+ }
+ }
+
+ @keyframes star_moveY_v4 {
+ 100% {
+ transform: translateY(50px); // 根据对应位置设置位移的参
+ }
+ }
+
+ @keyframes star_contraction_v3 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.85);
+ }
+ }
+
+ @keyframes star_expansion_v2 {
+ 0% {
+ transform: scale(0.85);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_expansion_v3 {
+ 0% {
+ transform: scale(0.85);
+ }
+
+ 100% {
+ transform: scale(1.3);
+ }
+ }
+
+ @keyframes star_fadeIn_v6 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_appear_v4 {
+ 0% {
+ transform: scale(0.1);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_contraction_v4 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.5);
+ }
+ }
+
+ @keyframes star_disappear_v3 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 80% {
+ opacity: 1;
+ }
+
+ 100% {
+ transform: scale(0.1);
+ opacity: 0;
+ }
+ }
+
+ @keyframes star_fadeOut_v6 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_contraction_v5 {
+ 0% {
+ transform: scale(1.3);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_fadeOut_v7 {
+ 0% {
+ opacity: 25%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_expansion_v4 {
+ 0% {
+ transform: scale(0.148);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_contraction_v6 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.148);
+ }
+ }
+
+ @keyframes star_fadeIn_v7 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 25%;
+ }
+ }
+
+ @keyframes star_appear_v5 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(70px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_fadeIn_v8 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 12%;
+ }
+ }
+
+ @keyframes star_fadeOut_v6 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_disappear_v4 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-70px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_expansion_v5 {
+ 0% {
+ transform: scale(0.95);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_fadeOut_v8 {
+ 0% {
+ opacity: 12%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_disappear_v5 {
+ 0% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: scale(0.7);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_size_v1 {
+ 0% {
+ width: 114px;
+ height: 114px;
+ border-radius: 28px;
+ }
+
+ 100% {
+ width: 92px;
+ height: 92px;
+ border-radius: 20px;
+ }
+ }
+
+ @keyframes star_size_v2 {
+ 0% {
+ width: 92px;
+ height: 92px;
+ border-radius: 20px;
+ }
+
+ 100% {
+ width: 92px;
+ height: 92px;
+ border-radius: 20px;
+ width: 114px;
+ height: 114px;
+ border-radius: 28px;
+ }
+ }
+
+ @keyframes star_fadeIn_v9 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 35%;
+ }
+ }
+
+ @keyframes star_fadeOut_v9 {
+ 0% {
+ opacity: 35%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveX_v3 {
+ 100% {
+ transform: translateX(596px);
+ }
+ }
+
+ @keyframes star_contraction_v7 {
+ 0% {
+ transform: scale(0.7);
+ }
+
+ 100% {
+ transform: scale(0.4);
+ }
+ }
+
+ @keyframes star_contraction_v8 {
+ 100% {
+ transform: scale(0.275);
+ }
+ }
+
+ @keyframes star_moveX_v4 {
+ 100% {
+ transform: translateX(-100px);
+ }
+ //位移参数无法确定
+ }
+
+ @keyframes star_contraction_v9 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.3);
+ }
+ }
+
+ @keyframes star_disappear_v6 {
+ 0% {
+ transform: scale(0.5);
+ opacity: 100%;
+ }
+
+ 100% {
+ // transform: translateY(); //位移参数无法确定
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_disappear_v7 {
+ 0% {
+ transform: scale(0.7);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-144px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_fadeIn_v10 {
+ 0% {
+ filter: blur(0);
+ opacity: 0%;
+ }
+
+ 100% {
+ filter: blur(30px);
+ opacity: 65%;
+ }
+ }
+
+ @keyframes star_moveY_v5 {
+ 100% {
+ transform: translateY(250px);
+ }
+ }
+
+ @keyframes star_disappear_v8 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-40px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_fadeOut_v10 {
+ 16.67% {
+ filter: blur(30px);
+ opacity: 65%;
+ }
+
+ 100% {
+ filter: blur(0);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_disappear_v9 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateX(-30px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v6 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(-30px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v10 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateX(30px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v7 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(30px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_size_v3 {
+ 0% {
+ width: 240px;
+ height: 108px;
+ }
+
+ 100% {
+ width: 512px;
+ height: 700px;
+ background: linear-gradient(
+ 137.64deg,
+ #f5f0f5 0%,
+ #fafafa 20.46%,
+ #d5daf2 90.45%
+ );
+ }
+ }
+
+ @keyframes star_size_v4 {
+ 0% {
+ width: 512px;
+ height: 700px;
+ }
+
+ 83.33% {
+ width: 240px;
+ height: 108px;
+ background: black;
+ }
+ }
+
+ @keyframes star_appear_v8 {
+ 0% {
+ transform: scale(0.9);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v11 {
+ 0% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: scale(0.9);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveX_v5 {
+ 100% {
+ transform: translateX(40px);
+ }
+ }
+
+ @keyframes star_moveX_v6 {
+ 100% {
+ transform: translateX(-40px);
+ }
+ }
+
+ @keyframes star_size_v5 {
+ 0% {
+ width: 16px;
+ }
+
+ 100% {
+ width: 32px;
+ }
+ }
+
+ @keyframes star_size_v6 {
+ 0% {
+ width: 32px;
+ }
+
+ 100% {
+ width: 16px;
+ }
+ }
+
+ @keyframes star_size_v7 {
+ 0% {
+ width: 96px;
+ }
+
+ 100% {
+ width: 388px;
+ }
+ }
+
+ @keyframes star_moveX_v7 {
+ 100% {
+ transform: translateX(26px);
+ }
+ }
+
+ @keyframes star_appear_v9 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(36px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_appear_v10 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(46px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_appear_v11 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(250px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v12 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-60px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveX_v8 {
+ 100% {
+ transform: translateX(-860px);
+ }
+ }
+
+ @keyframes star_disappear_v13 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateX(-15px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveY_v6 {
+ 100% {
+ transform: translateY(-150px); //根据相应通知的高度来设置参数
+ }
+ }
+
+ @keyframes star_moveX_v9 {
+ 100% {
+ transform: translateX(-50px); //根据松手时位置距离左侧的距离来设置
+ }
+ }
+
+ @keyframes star_disappear_v14 {
+ 0% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: scale(0.9);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_size_v8 {
+ 100% {
+ height: 304px; //152 + 152 * n 为变化后的高度
+ }
+ }
+
+ @keyframes star_appear_v12 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(52px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_moveY_v7 {
+ 100% {
+ transform: translateY(152px); //152 * n 为位移参数
+ }
+ }
+
+ @keyframes star_size_v9 {
+ 100% {
+ height: 152px;
+ }
+ }
+
+ @keyframes star_disappear_v15 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-52px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_moveY_v8 {
+ 100% {
+ transform: translateY(-152px); //152 + 152 * n + 16 为位移参数
+ }
+ }
+
+ @keyframes star_open_v7 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.43);
+ border-radius: 20px;
+ }
+ }
+
+ @keyframes star_close_v6 {
+ 0% {
+ transform: scale(0.43);
+ border-radius: 20px;
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ @keyframes star_disappear_v16 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(-160px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v13 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(-160px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v17 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateY(160px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v14 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateY(160px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_open_v8 {
+ 0% {
+ width: 60px;
+ height: 60px;
+ opacity: 0%;
+ }
+
+ 100% {
+ width: 154px;
+ height: 154px;
+ opacity: 35%;
+ }
+ }
+
+ @keyframes star_close_v7 {
+ 0% {
+ opacity: 35%;
+ }
+
+ 100% {
+ width: 206px;
+ height: 206px;
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v15 {
+ 0% {
+ transform: scale(1.1);
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_fadeOut_v11 {
+ 0% {
+ opacity: 10%;
+ }
+
+ 100% {
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_fadeIn_v11 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ opacity: 10%;
+ }
+ }
+
+ @keyframes star_close_v8 {
+ 0% {
+ opacity: 100%;
+ transform: scale(0.9);
+ }
+
+ 100% {
+ transform: translateY(-32px);
+ opacity: 50%;
+ }
+ }
+
+ @keyframes star_open_v9 {
+ 0% {
+ opacity: 50%;
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: translateY(32px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v18 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateX(-80px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v16 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(-80px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_disappear_v19 {
+ 0% {
+ opacity: 100%;
+ }
+
+ 100% {
+ transform: translateX(80px);
+ opacity: 0%;
+ }
+ }
+
+ @keyframes star_appear_v17 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(80px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_size_v10 {
+ 0% {
+ width: 88px;
+ height: 88px;
+ }
+
+ 100% {
+ width: 120px;
+ height: 120px;
+ }
+ }
+
+ @keyframes star_size_v11 {
+ 0% {
+ font-size: 16pt;
+ }
+
+ 100% {
+ font-size: 28pt;
+ }
+ }
+
+ @keyframes star_appear_v18 {
+ 0% {
+ opacity: 0%;
+ }
+
+ 100% {
+ transform: translateX(-500px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_moveX_v10 {
+ 100% {
+ transform: translateX(1200px);
+ opacity: 100%;
+ }
+ }
+
+ @keyframes star_moveX_v11 {
+ 100% {
+ transform: translateX(-600px);
+ }
+ }
+
+ @keyframes star_open_v10 {
+ 0% {
+ background: rgba(24, 24, 24, 0);
+ }
+
+ 100% {
+ transform: translateX(-600px);
+ background: rgba(24, 24, 24, 0.3);
+ }
+ }
+
+ @keyframes star_moveX_v12 {
+ 100% {
+ transform: translateX(-1200px);
+ }
+ }
+
+ @keyframes star_close_v9 {
+ 0% {
+ background: rgba(24, 24, 24, 0.3);
+ }
+
+ 100% {
+ transform: translateX(1200px);
+ background: rgba(24, 24, 24, 0);
+ }
+ }
+
+ @keyframes star_moveX_v13 {
+ 100% {
+ transform: translateX(600px);
+ }
+ }
+
+ @keyframes star_moveX_v14 {
+ 100% {
+ transform: translateX(-368px);
+ }
+ }
+
+ @keyframes star_open_v11 {
+ 0% {
+ background: rgba(24, 24, 24, 0);
+ }
+
+ 100% {
+ transform: translateX(-386px);
+ background: rgba(24, 24, 24, 0.3);
+ }
+ }
+
+ @keyframes star_moveX_v15 {
+ 100% {
+ transform: translateX(-736px);
+ }
+ }
+
+ @keyframes star_moveX_v16 {
+ 100% {
+ transform: translateX(736px);
+ }
+ }
+
+ @keyframes star_close_v10 {
+ 0% {
+ background: rgba(24, 24, 24, 0.3);
+ }
+
+ 100% {
+ transform: translateX(736px);
+ background: rgba(24, 24, 24, 0);
+ }
+ }
+
+ @keyframes star_moveX_v17 {
+ 100% {
+ transform: translateX(368px);
+ }
+ }
+`
diff --git a/src/components/battery/battery.ts b/src/components/battery/battery.ts
index 2ae1da0..6691e68 100644
--- a/src/components/battery/battery.ts
+++ b/src/components/battery/battery.ts
@@ -1,12 +1,13 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './battery-styles'
+import {animation} from '../animation/animation-styles'
import lightning from './svg/lightning.svg'
@customElement('star-battery')
export class StarBattery extends LitElement {
public static override get styles(): CSSResultArray {
- return [sharedStyles]
+ return [sharedStyles , animation]
}
@property({type: Boolean}) deep = false
diff --git a/src/test/panels/animation/animation.ts b/src/test/panels/animation/animation.ts
new file mode 100644
index 0000000..11c79ad
--- /dev/null
+++ b/src/test/panels/animation/animation.ts
@@ -0,0 +1,20 @@
+import {html, LitElement} from 'lit'
+import {customElement, query} from 'lit/decorators.js'
+
+@customElement('panel-animation')
+export class PanelAnimation extends LitElement {
+ @query('#container') container!: HTMLElement
+ @query('star-battery') battery!: HTMLElement
+ render() {
+ return html`
+
+ `
+ }
+
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'panel-animation': PanelAnimation
+ }
+}
diff --git a/src/test/panels/animation/show-styles.ts b/src/test/panels/animation/show-styles.ts
new file mode 100644
index 0000000..a5df476
--- /dev/null
+++ b/src/test/panels/animation/show-styles.ts
@@ -0,0 +1,843 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ div {
+ width: 50px;
+ height: 50px;
+ margin: 30px;
+ text-align: center;
+ background: linear-gradient(
+ 137.64deg,
+ #f5f0f5 0%,
+ #fafafa 20.46%,
+ #d5daf2 90.45%
+ );
+ }
+
+ .expansion {
+ position: absolute;
+ left: 0px;
+ top: 280px;
+ }
+
+ .fadeIn {
+ position: absolute;
+ left: 0px;
+ top: 450px;
+ }
+
+ .fadeOut {
+ position: absolute;
+ left: 0px;
+ top: 600px;
+ }
+
+ .open {
+ position: absolute;
+ left: 0px;
+ top: 750px;
+ }
+
+ .close {
+ position: absolute;
+ left: 0px;
+ top: 950px;
+ }
+
+ .moveX {
+ position: absolute;
+ left: 0px;
+ top: 1250px;
+ }
+
+ .moveY {
+ position: absolute;
+ left: 0px;
+ top: 1650px;
+ }
+
+ .appear {
+ position: absolute;
+ left: 0px;
+ top: 2050px;
+ }
+
+ .disappear {
+ position: absolute;
+ left: 0px;
+ top: 2400px;
+ }
+
+ .size {
+ position: absolute;
+ left: 0px;
+ top: 2600px;
+ }
+
+ .title {
+ font-size: 20px;
+ margin: 30px;
+ }
+
+ .press {
+ animation: press 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
+ background: none;
+ }
+
+ .free {
+ animation: free 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
+ background: none;
+ position: absolute;
+ top: 30px;
+ left: 100px;
+ }
+
+ .background_v1 {
+ animation: background_v1 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
+ background: none;
+ position: absolute;
+ top: 30px;
+ left: 200px;
+ }
+
+ .background_v2 {
+ animation: background_v2 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
+ background: none;
+ position: absolute;
+ top: 30px;
+ left: 300px;
+ }
+
+ .contraction_v1 {
+ animation: contraction_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .contraction_v2 {
+ animation: contraction_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 100px;
+ }
+
+ .contraction_v3 {
+ animation: contraction_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 200px;
+ }
+
+ .contraction_v4 {
+ animation: contraction_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 300px;
+ }
+
+ .contraction_v5 {
+ animation: contraction_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 400px;
+ }
+
+ .contraction_v6 {
+ animation: contraction_v6 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 500px;
+ }
+
+ .contraction_v7 {
+ animation: contraction_v7 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 600px;
+ }
+
+ .contraction_v8 {
+ animation: contraction_v8 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 700px;
+ }
+
+ .contraction_v9 {
+ animation: contraction_v9 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 170px;
+ left: 800px;
+ }
+
+ .expansion_v1 {
+ animation: expansion_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .expansion_v2 {
+ animation: expansion_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .expansion_v3 {
+ animation: expansion_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .expansion_v4 {
+ animation: expansion_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .expansion_v5 {
+ animation: expansion_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ }
+
+ .fadeIn_v1 {
+ animation: fadeIn_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ }
+
+ .fadeIn_v2 {
+ animation: fadeIn_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .fadeIn_v3 {
+ animation: fadeIn_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 200px;
+ }
+
+ .fadeIn_v4 {
+ animation: fadeIn_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 300px;
+ }
+
+ .fadeIn_v5 {
+ animation: fadeIn_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 400px;
+ }
+
+ .fadeIn_v6 {
+ animation: fadeIn_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .fadeIn_v7 {
+ animation: fadeIn_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 600px;
+ }
+
+ .fadeIn_v8 {
+ animation: fadeIn_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 700px;
+ }
+
+ .fadeIn_v9 {
+ animation: fadeIn_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 800px;
+ }
+
+ .fadeIn_v10 {
+ animation: fadeIn_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 900px;
+ }
+
+ .fadeIn_v11 {
+ animation: fadeIn_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 1000px;
+ }
+
+ .fadeOut_v1 {
+ animation: fadeOut_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ }
+
+ .fadeOut_v2 {
+ animation: fadeOut_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .fadeOut_v3 {
+ animation: fadeOut_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 200px;
+ }
+
+ .fadeOut_v4 {
+ animation: fadeOut_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 300px;
+ }
+
+ .fadeOut_v5 {
+ animation: fadeOut_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 400px;
+ }
+
+ .fadeOut_v6 {
+ animation: fadeOut_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .fadeOut_v7 {
+ animation: fadeOut_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 600px;
+ }
+
+ .fadeOut_v8 {
+ animation: fadeOut_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 700px;
+ }
+
+ .fadeOut_v9 {
+ animation: fadeOut_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 800px;
+ }
+
+ .fadeOut_v10 {
+ animation: fadeOut_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 900px;
+ }
+
+ .fadeOut_v11 {
+ animation: fadeOut_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ background: black;
+ left: 1000px;
+ }
+
+ .open_v1 {
+ animation: open_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .open_v2 {
+ animation: open_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .open_v3 {
+ animation: open_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .open_v4 {
+ animation: open_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ box-sizing: border-box;
+ border: 0px solid red;
+ }
+
+ .open_v5 {
+ animation: open_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ background: none;
+ font-size: none;
+ color: none;
+ }
+
+ .open_v6 {
+ animation: open_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .open_v7 {
+ animation: open_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 600px;
+ background: black;
+ }
+
+ .open_v8 {
+ animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 800px;
+ }
+
+ .open_v9 {
+ animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 900px;
+ }
+
+ .close_v1 {
+ animation: close_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .close_v2 {
+ animation: close_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .close_v3 {
+ animation: close_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .close_v4 {
+ animation: close_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ box-sizing: border-box;
+ border: 0px solid red;
+ }
+
+ .close_v5 {
+ animation: close_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ background: none;
+ font-size: none;
+ color: none;
+ }
+
+ .close_v6 {
+ animation: close_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .close_v7 {
+ animation: close_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 600px;
+ background: black;
+ }
+
+ .close_v8 {
+ animation: close_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 800px;
+ }
+
+ .moveX_v1 {
+ animation: moveX_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .moveX_v2 {
+ animation: moveX_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .moveX_v3 {
+ animation: moveX_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .moveX_v4 {
+ animation: moveX_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ }
+
+ .moveX_v5 {
+ animation: moveX_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 100px;
+ left: 200px;
+ }
+
+ .moveX_v6 {
+ animation: moveX_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 100px;
+ left: 400px;
+ }
+
+ .moveX_v7 {
+ animation: moveX_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 100px;
+ left: 500px;
+ }
+
+ .moveX_v8 {
+ animation: moveX_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 200px;
+ left: 900px;
+ }
+
+ .moveX_v9 {
+ animation: moveX_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 100px;
+ left: 700px;
+ }
+
+ .moveX_v10 {
+ animation: moveX_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ top: 300px;
+ left: 0px;
+ }
+
+ .moveY_v1 {
+ animation: moveY_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .moveY_v2 {
+ animation: moveY_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ top: 170px;
+ }
+
+ .moveY_v3 {
+ animation: moveY_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .moveY_v4 {
+ animation: moveY_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .moveY_v5 {
+ animation: moveY_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ }
+
+ .moveY_v6 {
+ animation: moveY_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ top: 100px;
+ }
+
+ .moveY_v7 {
+ animation: moveY_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 600px;
+ }
+
+ .moveY_v8 {
+ animation: moveY_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 700px;
+ top: 100px;
+ }
+
+ .appear_v1 {
+ animation: appear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .appear_v2 {
+ animation: appear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .appear_v3 {
+ animation: appear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .appear_v4 {
+ animation: appear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .appear_v5 {
+ animation: appear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ }
+
+ .appear_v6 {
+ animation: appear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .appear_v7 {
+ animation: appear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 600px;
+ }
+
+ .appear_v8 {
+ animation: appear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 700px;
+ }
+
+ .appear_v9 {
+ animation: appear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 800px;
+ }
+
+ .appear_v10 {
+ animation: appear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 900px;
+ }
+
+ .appear_v11 {
+ animation: appear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1000px;
+ }
+
+ .appear_v12 {
+ animation: appear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1100px;
+ }
+
+ .appear_v13 {
+ animation: appear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1200px;
+ }
+
+ .appear_v14 {
+ animation: appear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1300px;
+ }
+
+ .appear_v15 {
+ animation: appear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1400px;
+ }
+
+ .appear_v16 {
+ animation: appear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1600px;
+ }
+
+ .appear_v17 {
+ animation: appear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1700px;
+ }
+
+ .appear_v18 {
+ animation: appear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1800px;
+ }
+
+ .disappear_v1 {
+ animation: disappear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .disappear_v2 {
+ animation: disappear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 100px;
+ }
+
+ .disappear_v3 {
+ animation: disappear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 200px;
+ }
+
+ .disappear_v4 {
+ animation: disappear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .disappear_v5 {
+ animation: disappear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 400px;
+ }
+
+ .disappear_v6 {
+ animation: disappear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 500px;
+ }
+
+ .disappear_v7 {
+ animation: disappear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 600px;
+ }
+
+ .disappear_v8 {
+ animation: disappear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 700px;
+ }
+
+ .disappear_v9 {
+ animation: disappear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 800px;
+ }
+
+ .disappear_v10 {
+ animation: disappear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 900px;
+ }
+
+ .disappear_v11 {
+ animation: disappear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1000px;
+ }
+
+ .disappear_v12 {
+ animation: disappear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1100px;
+ }
+
+ .disappear_v13 {
+ animation: disappear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1200px;
+ }
+
+ .disappear_v14 {
+ animation: disappear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1300px;
+ }
+
+ .disappear_v15 {
+ animation: disappear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1400px;
+ }
+
+ .disappear_v16 {
+ animation: disappear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1500px;
+ }
+
+ .disappear_v17 {
+ animation: disappear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1600px;
+ }
+
+ .disappear_v18 {
+ animation: disappear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1700px;
+ }
+
+ .disappear_v19 {
+ animation: disappear_v19 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1800px;
+ }
+
+ .size_v1 {
+ animation: size_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ }
+
+ .size_v2 {
+ animation: size_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 150px;
+ }
+
+ .size_v3 {
+ animation: size_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 300px;
+ }
+
+ .size_v4 {
+ animation: size_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 900px;
+ }
+
+ .size_v5 {
+ animation: size_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1400px;
+ }
+
+ .size_v6 {
+ animation: size_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1500px;
+ }
+
+ .size_v7 {
+ animation: size_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 1600px;
+ }
+
+ .size_v8 {
+ animation: size_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+ position: absolute;
+ left: 2000px;
+ }
+`
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 11de5e5..4e7498c 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -39,6 +39,7 @@ import './toast/toast'
import './weather/weather'
import './swiper/swiper'
+import './animation/animation'
type SEID = string
@customElement('panel-root')
@@ -309,6 +310,14 @@ export class PanelRoot extends LitElement {
iconcolor="red"
href="#batterysquare"
>
+
+