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不支持动态绑定。
今日推荐