harmony 鸿蒙动画样式

  • 2023-06-24
  • 浏览 (645)

动画样式

组件普遍支持的可以在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;
   }
}

动画样式demo1

说明:

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

你可能感兴趣的鸿蒙文章

harmony 鸿蒙兼容JS的类Web开发范式(ArkUI.Lite)

harmony 鸿蒙通用属性

harmony 鸿蒙通用事件

harmony 鸿蒙通用样式

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

0  赞