1# 动画样式 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 11> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 12 13组件支持动态的旋转、平移、缩放效果，可在style或css中设置。 14 15 16| 名称 | 类型 | 描述 | 17| --------------------------------- | ---------------------------------------- | ---------------------------------------- | 18| transform-origin | string<sup>6+</sup> \|<br> <percentage> \|<br> <length> string<sup>6+</sup> \|<br> <percentage> \| <length> | 变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left \| center \| right ，第二个string的可选值为：top \| center \| bottom。<br/>示例：<br/>transform-origin: 200px 30%。<br/>transform-origin: 100px top。<br/>transform-origin: center center。<br>默认值：center center | 19| transform | string | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 | 20| animation<sup>6+</sup> | string | 格式：duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。<br>默认值：0s ease 0s 1 normal none running none | 21| animation-name | string | 指定\@keyframes，详见表 @keyframes属性说明。 | 22| animation-delay | <time> | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。<br>默认值：0 | 23| animation-duration | <time> | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。<br/>必须设置animation-duration 样式，否则时长为 0将不会播放动画。<br>默认值：0 | 24| animation-iteration-count | number \| infinite | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。<br>默认值：1 | 25| animation-timing-function | string | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>- linear：表示动画从头到尾的速度都是相同的。<br/>- ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。<br/>- ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。<br/>- ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。<br/>- ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。<br/>- friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。<br/>- extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。<br/>- sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。<br/>- rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。<br/>- smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。<br/>- cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。<br/>- steps: 阶梯曲线<sup>6+</sup>。语法：steps(number[, end\|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。<br>默认值：ease | 26| animation-direction<sup>6+</sup> | string | 指定动画的播放模式：<br/>- normal： 动画正向循环播放。<br/>- reverse： 动画反向循环播放。<br/>- alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。<br/>- alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。<br>默认值：normal | 27| animation-fill-mode | string | 指定动画开始和结束的状态：<br/>- none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>- forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。<br/>- backwards<sup>6+</sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>- both<sup>6+</sup>：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。<br>默认值：none | 28| animation-play-state<sup>6+</sup> | string | 指定动画的当前状态：<br/>- paused：动画状态为暂停。<br/>- running：动画状态为播放。<br>默认值：running | 29| transition<sup>6+</sup> | string | 指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：<br/>- transition-property：规定设置过渡效果的 CSS 属性的名称，目前支持宽、高、背景色。<br/>- transition-duration：规定完成过渡效果需要的时间，单位秒。<br/>- transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。<br/>- transition-delay：规定过渡效果延时启动时间，单位秒。<br>默认值：all 0 ease 0 | 30 31 32**表1** transform操作说明 33 34| 名称 | 类型 | 描述 | 35| ------------------------ | ---------------------------------------- | ---------------------------------------- | 36| none<sup>6+</sup> | - | 不进行任何转换。 | 37| matrix<sup>6+</sup> | <number> | 入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。 | 38| matrix3d<sup>6+</sup> | <number> | 入参为十六个值的4X4矩阵。 | 39| translate | <length> \| <percent> | 平移动画属性，支持设置x轴和y轴两个维度的平移参数。 | 40| translate3d<sup>6+</sup> | <length> \| <percent> | 三个入参，分别代表X轴、Y轴、Z轴的平移距离。 | 41| translateX | <length> \| <percent> | X轴方向平移动画属性。 | 42| translateY | <length> \| <percent> | Y轴方向平移动画属性。 | 43| translateZ<sup>6+</sup> | <length> \| <percent> | Z轴的平移距离。 | 44| scale | <number> | 缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。 | 45| scale3d<sup>6+</sup> | <number> | 三个入参，分别代表X轴、Y轴、Z轴的缩放参数。 | 46| scaleX | <number> | X轴方向缩放动画属性。 | 47| scaleY | <number> | Y轴方向缩放动画属性。 | 48| scaleZ<sup>6+</sup> | <number> | Z轴的缩放参数。 | 49| rotate | <deg> \| <rad> \| <grad><sup>6+</sup> \| <turn>6+ | 旋转动画属性，支持设置x轴和y轴两个维度的旋转参数。 | 50| rotate3d<sup>6+</sup> | <deg> \| <rad> \| <grad> \| <turn> | 四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。 | 51| rotateX | <deg> \| <rad> \| <grad><sup>6+</sup> \| <turn><sup>6+</sup> | X轴方向旋转动画属性。 | 52| rotateY | <deg> \| <rad> \| <grad><sup>6+</sup> \| <turn><sup>6+</sup> | Y轴方向旋转动画属性。 | 53| rotateZ<sup>6+</sup> | <deg> \| <rad> \| <grad> \| <turn> | Z轴方向的旋转角度。 | 54| skew<sup>6+</sup> | <deg> \| <rad> \| <grad> \| <turn> | 两个入参，分别为X轴和Y轴的2D倾斜角度。 | 55| skewX<sup>6+</sup> | <deg> \| <rad> \| <grad> \| <turn> | X轴的2D倾斜角度。 | 56| skewY<sup>6+</sup> | <deg> \| <rad> \| <grad> \| <turn> | Y轴的2D倾斜角度。 | 57| perspective<sup>6+</sup> | <number> | 3D透视场景下镜头距离元素表面的距离。 | 58 59**表2** @keyframes属性说明 60 61| 名称 | 类型 | 默认值 | 描述 | 62| -------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- | 63| background-color | <color> | - | 动画执行后应用到组件上的背景颜色。 | 64| opacity | number | 1 | 动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。 | 65| width | <length> | - | 动画执行后应用到组件上的宽度值。 | 66| height | <length> | - | 动画执行后应用到组件上的高度值。 | 67| transform | string | - | 定义应用在组件上的变换类型，见表 transform操作说明。 | 68| background-position<sup>6+</sup> | string \| <percentage> \| <length> string \|<br> <percentage> \| <length> | 50% 50% | 背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left \| center \| right ，第二个string的可选值为：top \| center \| bottom。<br/>示例：<br/>- background-position: 200px 30%<br/>- background-position: 100px top<br/>- background-position: center center | 69 70 71对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态<sup>6+</sup>。示例： 72 73```html 74<!-- xxx.hml --> 75<div class="container"> 76 <div class="rect"> 77 </div> 78</div> 79``` 80 81```css 82/* xxx.css */ 83.container { 84 display: flex; 85 justify-content: center; 86 align-items: center; 87 margin: 150px; 88} 89.rect{ 90 width: 200px; 91 height: 200px; 92 background-color: #f76160; 93 animation: Go 3s infinite; 94} 95@keyframes Go 96{ 97 from { 98 background-color: #f76160; 99 transform:translate(100px) rotate(0deg) scale(1.0); 100 } 101 /* 可以通过百分比指定动画运行的中间状态 */ 102 50% { 103 background-color: #f76160; 104 transform:translate(100px) rotate(60deg) scale(1.3); 105 } 106 to { 107 background-color: #09ba07; 108 transform:translate(100px) rotate(180deg) scale(2.0); 109 } 110} 111``` 112 113 114 115 116```html 117<!-- xxx.hml --> 118<div class="container"> 119 <div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div> 120 <text onclick="toggleState">animation-play-state: {{playState}}</text> 121</div> 122``` 123 124```css 125/* xxx.css */ 126.container { 127 flex-direction: column; 128 justify-content: center; 129 align-items: center; 130} 131.simpleSize { 132 background-color: blue; 133 width: 100px; 134 height: 100px; 135} 136.simpleAnimation { 137 animation: simpleFrames 9s; 138} 139@keyframes simpleFrames { 140 from { transform: translateX(0px); } 141 to { transform: translateX(100px); } 142} 143``` 144 145```js 146// xxx.js 147export default { 148 data: { 149 title: "", 150 playState: "running" 151 }, 152 toggleState() { 153 if (this.playState === "running") { 154 this.playState = "paused"; 155 } else { 156 this.playState = "running"; 157 } 158 } 159} 160``` 161 162 163 164 165```html 166<!-- xxx.hml --> 167<div id='img' class="img"></div> 168``` 169 170```css 171/* xxx.css */ 172.img { 173 width: 294px; 174 height: 233px; 175 background-image: url('common/heartBeat.jpg'); 176 background-repeat: no-repeat; 177 background-position: 0% 0%; 178 background-size: 900%; 179 animation-name: heartBeating; 180 animation-duration: 1s; 181 animation-delay: 0s; 182 animation-fill-mode: forwards; 183 animation-iteration-count: -1; 184 animation-timing-function: steps(8, end); 185} 186 187@keyframes heartBeating { 188 from { background-position: 0% 0%;} 189 to { background-position: 100% 0%;} 190} 191``` 192 193```html 194<!-- xxx.hml --> 195<div class="container"> 196 <div class="content"></div> 197</div> 198``` 199 200```css 201/* xxx.css */ 202.container { 203 flex-direction: column; 204 justify-content: center; 205 align-items: center; 206} 207.content { /* 组件状态1 */ 208 height: 200px; 209 width: 200px; 210 background-color: red; 211 transition: all 5s ease 0s; 212} 213.content:active { /* 组件状态2 */ 214 height: 400px; 215 width: 400px; 216 background-color: blue; 217 transition: all 5s linear 0s; 218} 219``` 220 221 222 223 224 225> **说明：** 226> @keyframes的from/to不支持动态绑定。 227> 228> steps函数的end和start含义如下图所示。 229> 230>  231
