Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
c1924865
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
c1924865
编写于
7月 07, 2022
作者:
O
openharmony_ci
提交者:
Gitee
7月 07, 2022
浏览文件
操作
浏览文件
下载
差异文件
!6486 【轻量级 PR】:JS组件--动画样式(js-components-common-animation.md)格式规范统一
Merge pull request !6486 from 黄秋怡/master
上级
580c8784
4e7fea40
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
...-dev/reference/arkui-js/js-components-common-animation.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
浏览文件 @
c1924865
...
...
@@ -14,7 +14,7 @@
| animation-name | string | - | 指定
\@
keyframes,详见表 @keyframes属性说明。 |
| animation-delay |
<
time
>
| 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)
\|
ms(毫秒)
],默认单位为ms,格式为:1000ms或1s。 |
| animation-duration |
<
time
>
| 0 | 定义一个动画周期。支持的单位为[s(秒)
\|
ms(毫秒)
],默认单位为ms,格式为:1000ms或1s。
<br/>
必须设置animation-duration
样式,否则时长为
0将不会播放动画。 |
| animation-iteration-count | number
\|
infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 |
| animation-iteration-count | number
\|
infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 |
| animation-timing-function | string | ease
<br/>
| 描述动画执行的速度曲线,用于使动画更为平滑。
<br/>
可选项有:
<br/>
-
linear:表示动画从头到尾的速度都是相同的。
<br/>
-
ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25,
0.1,
0.25,
1.0)。
<br/>
-
ease-in:表示动画以低速开始,cubic-bezier(0.42,
0.0,
1.0,
1.0)。
<br/>
-
ease-out:表示动画以低速结束,cubic-bezier(0.0,
0.0,
0.58,
1.0)。
<br/>
-
ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42,
0.0,
0.58,
1.0)。
<br/>
-
friction:阻尼曲线,cubic-bezier(0.2,
0.0,
0.2,
1.0)。
<br/>
-
extreme-deceleration:急缓曲线,cubic-bezier(0.0,
0.0,
0.0,
1.0)。
<br/>
-
sharp:锐利曲线,cubic-bezier(0.33,
0.0,
0.67,
1.0)。
<br/>
-
rhythm:节奏曲线,cubic-bezier(0.7,
0.0,
0.2,
1.0)。
<br/>
-
smooth:平滑曲线,cubic-bezier(0.4,
0.0,
0.4,
1.0)。
<br/>
-
cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。
<br/>
-
steps:
阶梯曲线
<sup>
6+
</sup>
。语法:steps(number[,
end
\|
start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。 |
| animation-direction
<sup>
6+
</sup>
| string | normal | 指定动画的播放模式:
<br/>
-
normal:
动画正向循环播放。
<br/>
-
reverse:
动画反向循环播放。
<br/>
-
alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。
<br/>
-
alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态:
<br/>
-
none:在动画执行之前和之后都不会应用任何样式到目标上。
<br/>
-
forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。
<br/>
-
backwards
<sup>
6+
</sup>
:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
<br/>
-
both
<sup>
6+
</sup>
:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录