HarmonyOS应用开发文档更新修改说明:动画样式补充示例代码和示例效果图,方便开发者掌握动画的使用方式。

组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。

名称

类型

默认值

描述

transform-origin

<position>

控件中心

变换对象的原点位置,支持px和百分比(相对于动画目标组件),格式为:50px 100px 或 50% 50%。

transform

string

-

支持同时设置平移/旋转/缩放的属性

详见表1。

animation-name

string

-

指定@keyframes,详见表2。

animation-delay

<time>

0

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。

animation-duration

<time>

0

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。

说明

animation-duration 样式必须设置,否则时长为 0,则不会播放动画。

animation-iteration-count

number | infinite

1

定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。

animation-timing-function

string

ease

描述动画执行的速度曲线,用于使动画更为平滑。

可选项有:

* linear:表示动画从头到尾的速度都是相同的。
* ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25, 0.1, 0.25, 1.0)。
* ease-in:表示动画以低速开始,cubic-bezier(0.42, 0.0, 1.0, 1.0)。
* ease-out:表示动画以低速结束,cubic-bezier(0.0, 0.0, 0.58, 1.0)。
* ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42, 0.0, 0.58, 1.0)。
* friction:阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。
* extreme-deceleration:急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
* sharp:锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
* rhythm:节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
* smooth:平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
* cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。

animation-fill-mode

string

none

指定动画执行结束后的状态。可选项有:

* none:恢复初始状态。
* forwards:保持动画结束时的状态(在最后一个关键帧中定义)。
<> <>
表1 transform操作说明

名称

类型

描述

translate

<length>| <percent>

平移动画属性,支持设置x轴和y轴两个维度的平移参数

translateX

<length>| <percent>

X轴方向平移动画属性

translateY

<length>| <percent>

Y轴方向平移动画属性

scale

<number>

缩放动画属性,支持设置x轴和y轴两个维度的缩放参数

scaleX

<number>

X轴方向缩放动画属性

scaleY

<number>

Y轴方向缩放动画属性

rotate

<deg> | <rad>

旋转动画属性,支持设置x轴和y轴两个维度的选中参数

rotateX

<deg> | <rad>

X轴方向旋转动画属性

rotateY

<deg> | <rad>

Y轴方向旋转动画属性

<> <>
表2 @keyframes属性说明

名称

类型

默认值

描述

background-color

<color>

-

动画执行后应用到组件上的背景颜色。

opacity

number

1

动画执行后应用到组件上的不透明度值,为介于0到1间的数值,默认为1。

width

<length>

-

动画执行后应用到组件上的宽度值。

height

<length>

-

动画执行后应用到组件上的高度值。

transform

string

-

定义应用在组件上的变换类型,见表1。

对于不支持起始值或终止值缺省的情况,可以通过from和to显示指定起始和结束。示例:
@keyframes Go { from { background-color: #f76160; transform:translate(0px)
rotate(0deg) scale(1.0); } to { background-color: #09ba07;
transform:translate(100px) rotate(180deg) scale(2.0); } }
 

 

说明:

@keyframes的from/to不支持动态绑定。

技术
©2019-2020 Toolsou All rights reserved,
Java开发2020年最新常见面试题整理【Spring源码分析】42-@Conditional详解element-ui踩坑记录神仙面试宝典你有了吗?半月看完25大专题,居然斩获阿里P8offer使用css样式设计一个简单的html登陆界面XCTF攻防世界web新手练习_ 9_command_executionJS中的解构赋值的详解与具体用途Python Web 框架elementui 穿梭框 el-transfer 展示列表内容文字过长ConcurrentHashMap实现原理及源码解析