鸿蒙5.0开发进阶：JS组件-动画样式

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

动画样式

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

名称	类型	默认值	描述
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	linear	描述动画执行的速度曲线，用于使动画更为平滑。 可选项有： - linear：表示动画从头到尾的速度都是相同的。 - 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)。
animation-fill-mode	string	none	指定动画开始和结束的状态： - none：在动画执行之前和之后都不会应用任何样式到目标上。 - forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

表1 transform操作说明

名称	类型	描述
translateX	<length>	X轴方向平移动画属性
translateY	<length>	Y轴方向平移动画属性
rotate	<deg> | <rad>	旋转动画属性

说明

轻量级智能穿戴仅支持原始大小的图片进行旋转。

表2 @keyframes属性说明

名称	类型	默认值	描述
background-color	<color>	-	动画执行后应用到组件上的背景颜色。
width	<length>	-	动画执行后应用到组件上的宽度值。
height	<length>	-	动画执行后应用到组件上的高度值。
transform	string	-	定义应用在组件上的变换类型，见表1。

对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：

@keyframes Go
{
   from {
     background-color: #f76160;
   }
   to {
     background-color: #09ba07;
   }
}

说明

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