智慧屏和智能穿戴开发：动画样式

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

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

名称	类型	默认值	描述
transform-origin		控件中心	变换对象的原点位置，支持px和百分比(相对于动画目标组件)，格式为：50px 100px 或 50% 50%。
transform	string	-	支持同时设置平移/旋转/缩放的属性 详见表1。
animation-name	string	-	指定@keyframes，详见表2。
animation-delay		0	定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
animation-duration		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	|	平移动画属性，支持设置x轴和y轴两个维度的平移参数
translateX	|	X轴方向平移动画属性
translateY	|	Y轴方向平移动画属性
scale		缩放动画属性，支持设置x轴和y轴两个维度的缩放参数
scaleX		X轴方向缩放动画属性
scaleY		Y轴方向缩放动画属性
rotate	|	旋转动画属性，支持设置x轴和y轴两个维度的选中参数
rotateX	|	X轴方向旋转动画属性
rotateY	|	Y轴方向旋转动画属性

表2 @keyframes属性说明

名称	类型	默认值	描述
background-color		-	动画执行后应用到组件上的背景颜色。
opacity	number	1	动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。
width		-	动画执行后应用到组件上的宽度值。
height		-	动画执行后应用到组件上的高度值。
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不支持动态绑定。