openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #112 in YR/star-web-components from star-animation to master 

* commit '71237c1bbf35a4d1b89d3d35a7589b6b166bb5cd':
  TASK:#117123-完善动效库说明文档及调用方式
  TASK:#117123-增加应用组部分的说明
  TASK:#117123-修改README的说明
  TASK:#117123-完成动效库梳理以及测试页的编写
  TASK:#117123-完成动效库模块部分的动效实现
  修改基础控件库的动效
  初步完成基础控件的动效
  优化动效库的结构
  完成动效库的命名和定义
This commit is contained in:
汪昌棋 2022-11-07 11:18:51 +08:00
parent 8e9d51aee4 71237c1bbf
commit c478fe44b2
7 changed files with 3574 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

405
src/components/animation/README-define.md Normal file
View File

@ -0,0 +1,405 @@
# 目录
* [<font size=4>**命名规则**</font>](#命名规则)</br>
* [<font size=4>**介绍**</font>](#介绍)
* [<font size=3>**基础控件库**</font>](#基础控件库)
* [<font size=3>**应用窗口**</font>](#应用窗口)
* [<font size=3>**桌面**</font>](#桌面)
* [<font size=3>**多任务视图**</font>](#多任务视图)
* [<font size=3>**控制中心**</font>](#控制中心)
* [<font size=3>**音量条**</font>](#音量条)
* [<font size=3>**通知中心**</font>](#通知中心)
* [<font size=3>**锁屏及解锁**</font>](#锁屏及解锁)
* [<font size=3>**组件编辑**</font>](#组件编辑)
* [<font size=3>**个性化配置**</font>](#个性化配置)
# 命名规则
| 名称 | 动作 |
| ---------------- | ---------------------------------------------- |
| 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)、</br>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)、</br>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)、</br>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)、</br>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) |
| | 点击面板</br>打开应用-按下 | 面板整体 | star_contraction_v2 | scale(1-0.95) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
| | 点击面板</br>打开应用-释放 | 面板整体 | 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 |
| | 执行按钮</b>操作-按下 | 按钮 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
| | 执行按钮</b>操作-释放 | 按钮 | star_expansion_v1 | | 150ms | (0,0.35,0.2,1) | .star_expansion_v1a |
| | 执行按钮</b>操作-释放 | 通知面板 | 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)</br>color(rgba(38,38,38,0.45)-rgba(29,152,240,1)) | | | .star_open_v6 |
| | | 离开中间选中态的选项 | star_close_v5 | font-star_size(36pt-28pt)</br>color(rgba(29,152,240,1)-rgba(38,38,38,0.45)) | | | .star_close_v5 |
| | 拖拽选择 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
| | 点击选择</br>时间动效 | 对应列 | 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 |
| | 点击切换</br>上下午 | 被点击项 | 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 |
| 长按菜单 | 出现-长按桌面</br>图标/桌面组件 | 图标 | 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 |
| 时间日期</br>及桌面组件 | 按下 | 整体 | 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 |
## 应用窗口
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------- | :------------------------------------: | :------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
| 应用窗口 | 从桌面图标打开</br>-按下图标 | 应用图标 | star_contraction_v3 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
| | 从桌面图标打开</br>-松手 | 应用图标 | 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 |
| | 退出到桌面图标</br>-从底部上划 | 应用界面 | star_contraction_v4 | scale(1-0.5) | - | | .star_contraction_v4 |
| | 从桌面图标打开</br>-松手 | 应用界面 | 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 |
| | 退出到无对应应用</br>的界面-从底部上划 | 应用界面 | star_contraction_v4 | | - | | .star_contraction_v4 |
| | 退出到无对应应用</br>的界面-松手 | 应用界面 | 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 |
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 组内各应用图标</br>(包括其名称) | 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 |
| | | 组内各应用图标</br>(包括其名称) | 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 |
| | | 桌面上除应用组</br>的所有内容 | 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 |
| 屏幕编辑模式 | 唤起屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | | 顶部三按钮</br>(整体) | star_appear_v5 | Y:70px opacity(0-100) | 250ms | (0.3,0.2,0.1,1) | .star_appear_v5 |
| | | 时间天气组件</br>(整体) | star_contraction_v2 | | 250ms | (0.3,0.2,0.1,1) | .star_contraction_v2a |
| | | 时间天气组件</br>(底板) | star_fadeIn_v8 | opacity(0-12) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v8 |
| | 退出屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 顶部三按钮</br>(整体) | star_disappear_v4 | Y:-70px opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v4 |
| | | 时间天气组件</br>(整体) | star_expansion_v5 | scale(0.95-1) | 250ms | (0.3,0.2,0.1,1) | .star_expansion_v5 |
| | | 时间天气组件</br>(底板) | 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) |
| 创建应用组、增加</br>应用(不展开) | 创建应用组(未展开)-</br>长按 A 并拖动 | A 应用名称 | star_fadeOut_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6f |
| | 创建应用组(未展开)-</br>A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
| | 创建应用组(未展开)-</br>覆盖 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×92</br>border-radius(28px-20px) | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
| | 增加应用-</br>C 覆盖 B 一半时 | 应用组容器 | star_size_v2 | 92×92-114×114</br>border-radius(20px-28px) | 250ms | (0.25,0.1,0.25,1) | .star_size_v2 |
| | 增加应用-</br>C 覆盖 0.6 内松手 | 应用组容器 | star_size_v1 | | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
| | 增加应用-</br>C 覆盖 0.6 内松手 | C 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
| 创建应用组(展开) | A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
| | 覆盖到第 0.6 内松手 | B 图标下的</br>容器底 | star_fadeOut_v5 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v5a |
| | | 桌面上除应用组</br>的所有内容 | 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 以内</br>且停留到第 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 中线超过边框</br>且停留到 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 |
| | | 组内各应用图标</br>(包括其名称) | 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 |
| | | 桌面上除应用组</br>的所有内容 | 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 |
| | | 本页面上</br>的遮罩 | star_open_v10 | X:-600px</br>rgba(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 |
| | | 本页面上</br>的遮罩 | star_close_v9 | X:1200px</br>rgba(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 |
| | | 本页面上</br>的遮罩 | star_open_v11 | X:-368px</br>rgba(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 |
| | | 本页面上</br>的遮罩 | star_close_v10 | X:736px</br>rgba(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 |
## 多任务视图
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :---------------------------- | :---------------------------------: | :-----------------------------------: | :-------------------: | :----------------------------------: | :------: | :---------------: | -------------------: |
| 从桌面唤起</br>多任务视图 | 开始滑动 | 桌面上所有内容 | 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 |
| | 应用界面跟随手指</br>滑动的联动效果 | 应用界面阵列 | 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 |
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| 退出多任务视图 | 退出多任务 | 所有应用界面</br>(整体) | star_moveX_v4 | -100px | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
| | | 所有应用图标</br>和名称 | 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 |
| 从应用界面启动</br>多任务视图 | 开始滑动 | 桌面上所有内容 | 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 |
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| 关闭应用进程 | 划掉应用 | 被滑动应用面板</br>(包括其图标和名称) | star_disappear_v6 | scale(1-0.5) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v6 |
| | | 其他应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
| | 未划掉应用 | 被拖拽应用面板</br>(包括其图标和名称) | star_moveY | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
| 清除应用 | 清除应用 | 被清除应用面板</br>(包括其图标和名称) | star_disappear_v7 | scale(1-0.7) Y:-144px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v7 |
| | | 被锁定应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0,0.35,0.2,1) |
| | 自动回到桌面 | 被锁定应用面板</br>(包括其图标和名称 | 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 |
## 控制中心
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :-------------- | :---------------------------: | :------------: | :----------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
| 唤起/退出 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | 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) |
## 通知中心
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------------------------ | :---------------------------: | :------------------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
| 唤起/退出</br>通知中心 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | 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 |
| 唤起/退出</br>通知选项 | 唤出通知选项 | 对应通知条 | 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 |
| 同应用多通知<br>展开/收起 | 多通知展开 | 展开前的多通知内容 | 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 |
## 锁屏及解锁
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :--------------------- | :------------: | :-------------------------: | :----------------: | :--------------------------------: | :------: | :---------------: | ------------------: |
| 锁屏页-</br>样式选择页 | 激活样式选择页 | 当前及其他锁屏页 | star_open_v7 | scale(1-0.43) border-radius(-20px) | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
| | | 样式选择页的</br>底部按钮组 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| | | 样式选择页的</br>选中框 | 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 |
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | | 样式选择页的</br>选中框 | 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 |
| | 进入全屏预览页 | 样式选择页的</br>选中框 | 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 |
| | | 样式选择页的</br>选中框 | 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 |
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 样式选择页的</br>选中框 | 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 |
| | | 桌面内容</br>(除了 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 |
## 组件编辑
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------------------------------------------ | :--------------: | :------------: | :---------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
| 唤出/收起组价</br> 编辑面板 | 唤出 | 组件编辑面板 | 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 |
| 唤出/收起全部</br> 应用面板 | 唤出 | 全部应用面板 | 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 |
| 全部应用点击定位至</br>组件编辑页对应组件处 | 定位至对应组件处 | 全部应用面板 | 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) |
## 个性化配置
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :----------------------- | :-----------------------: | :-----------------------------: | :----------------: | :-----------------------: | :------: | :---------------: | ------------------: |
| 唤出/收起</br>个性化面板 | 同组件编辑 | | | | | |
| 切换标签页 | 切换到右边 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 |
| | 调整应用名称</br>文字大小 | 文字 | star_size_v11 | font-star_size(16pt-28pt) | | | .star_size_v11 |
| 进入/退出壁纸预览页 | 进入 | 被点击的壁纸 | star_open | 位移参数无法确定 | 350ms | (0.25,0.1,0.25,1) |
| | | 预览页壁纸缩略</br>图阵列(整体) | 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 |
| | | 预览页顶部返回</br>按钮 | 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 |

189
src/components/animation/animaiton.ts Normal file
View File

@ -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`
<label>
<span class="title">press free background</span>
<div class="press"></div>
<div class="free"></div>
<div class="background_v1"></div>
<div class="background_v2"></div>
</label>
<label>
<span class="title">contraction</span>
<div class="contraction_v1"></div>
<div class="contraction_v2"></div>
<div class="contraction_v3"></div>
<div class="contraction_v4"></div>
<div class="contraction_v5"></div>
<div class="contraction_v6"></div>
<div class="contraction_v7"></div>
<div class="contraction_v8"></div>
<div class="contraction_v9"></div>
</label>
<label class="expansion">
<span class="title">expansion</span>
<div class="expansion_v1"></div>
<div class="expansion_v2"></div>
<div class="expansion_v3"></div>
<div class="expansion_v4"></div>
<div class="expansion_v5"></div>
</label>
<label class="fadeIn">
<span class="title">fadeIn</span>
<div class="fadeIn_v1"></div>
<div class="fadeIn_v2"></div>
<div class="fadeIn_v3"></div>
<div class="fadeIn_v4"></div>
<div class="fadeIn_v5"></div>
<div class="fadeIn_v6"></div>
<div class="fadeIn_v7"></div>
<div class="fadeIn_v8"></div>
<div class="fadeIn_v9"></div>
<div class="fadeIn_v10"></div>
<div class="fadeIn_v11"></div>
</label>
<label class="fadeOut">
<span class="title">fadeOut</span>
<div class="fadeOut_v1"></div>
<div class="fadeOut_v2"></div>
<div class="fadeOut_v3"></div>
<div class="fadeOut_v4"></div>
<div class="fadeOut_v5"></div>
<div class="fadeOut_v6"></div>
<div class="fadeOut_v7"></div>
<div class="fadeOut_v8"></div>
<div class="fadeOut_v9"></div>
<div class="fadeOut_v10"></div>
<div class="fadeOut_v11"></div>
</label>
<label class="open">
<span class="title">open</span>
<div class="open_v1"></div>
<div class="open_v2"></div>
<div class="open_v3"></div>
<div class="open_v4"></div>
<div class="open_v5">A</div>
<div class="open_v6"></div>
<div class="open_v7"></div>
<div class="open_v8"></div>
<div class="open_v9"></div>
</label>
<label class="close">
<span class="title">close</span>
<div class="close_v1"></div>
<div class="close_v2"></div>
<div class="close_v3"></div>
<div class="close_v4"></div>
<div class="close_v5">A</div>
<div class="close_v6"></div>
<div class="close_v7"></div>
<div class="close_v8"></div>
</label>
<label class="moveX">
<span class="title">moveX</span>
<div class="moveX_v1"></div>
<div class="moveX_v2"></div>
<div class="moveX_v3"></div>
<div class="moveX_v4"></div>
<div class="moveX_v5"></div>
<div class="moveX_v6"></div>
<div class="moveX_v7"></div>
<div class="moveX_v8"></div>
<div class="moveX_v9"></div>
<div class="moveX_v10"></div>
</label>
<label class="moveY">
<span class="title">moveY</span>
<div class="moveY_v1"></div>
<div class="moveY_v2"></div>
<div class="moveY_v3"></div>
<div class="moveY_v4"></div>
<div class="moveY_v5"></div>
<div class="moveY_v6"></div>
<div class="moveY_v7"></div>
<div class="moveY_v8"></div>
</label>
<label class="appear">
<span class="title">appear</span>
<div class="appear_v1"></div>
<div class="appear_v2"></div>
<div class="appear_v3"></div>
<div class="appear_v4"></div>
<div class="appear_v5"></div>
<div class="appear_v6"></div>
<div class="appear_v7"></div>
<div class="appear_v8"></div>
<div class="appear_v9"></div>
<div class="appear_v10"></div>
<div class="appear_v11"></div>
<div class="appear_v12"></div>
<div class="appear_v13"></div>
<div class="appear_v14"></div>
<div class="appear_v15"></div>
<div class="appear_v16"></div>
<div class="appear_v17"></div>
<div class="appear_v18"></div>
</label>
<label class="disappear">
<span class="title">disappear</span>
<div class="disappear_v1"></div>
<div class="disappear_v2"></div>
<div class="disappear_v3"></div>
<div class="disappear_v4"></div>
<div class="disappear_v5"></div>
<div class="disappear_v6"></div>
<div class="disappear_v7"></div>
<div class="disappear_v8"></div>
<div class="disappear_v9"></div>
<div class="disappear_v10"></div>
<div class="disappear_v11"></div>
<div class="disappear_v12"></div>
<div class="disappear_v13"></div>
<div class="disappear_v14"></div>
<div class="disappear_v15"></div>
<div class="disappear_v16"></div>
<div class="disappear_v17"></div>
<div class="disappear_v18"></div>
<div class="disappear_v19"></div>
</label>
<label class="size">
<span class="title">size</span>
<div class="size_v1"></div>
<div class="size_v2"></div>
<div class="size_v3"></div>
<div class="size_v4"></div>
<div class="size_v5"></div>
<div class="size_v6"></div>
<div class="size_v7"></div>
<div class="size_v8"></div>
</label>
`
}
}
declare global {
interface HTMLElementTagNameMap {
'star-animation': StarAnimation
}
}

2106
src/components/animation/animation-styles.ts Normal file
View File

File diff suppressed because it is too large Load Diff

3
src/components/battery/battery.ts
View File

@ -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

20
src/test/panels/animation/animation.ts Normal file
View File

@ -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`
<star-animation></star-animation>
`
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-animation': PanelAnimation
}
}

843
src/test/panels/animation/show-styles.ts Normal file
View File

@ -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;
}
`

9
src/test/panels/root.ts
View File

@ -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"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="动效"
icon="add"
iconcolor="purple"
href="#animation"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="时钟">