1# 动画 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9动画分为[静态动画](#静态动画)和[连续动画](#连续动画)。 10 11 12## 静态动画 13 14静态动画的核心是transform样式，主要可以实现以下三种变换类型，一次样式设置只能实现一种类型变换。 15 16- **translate**：沿水平或垂直方向将指定组件移动所需距离。 17 18- **scale**：横向或纵向将指定组件缩小或放大到所需比例。 19 20- **rotate**：将指定组件沿横轴或纵轴或中心点旋转指定的角度。 21 22具体的使用示例如下，更多信息请参考[动画样式](../reference/apis-arkui/arkui-js/js-components-common-animation.md)。 23 24```html 25<!-- xxx.hml --> 26<div class="container"> 27 <text class="translate">hello</text> 28 <text class="rotate">hello</text> 29 <text class="scale">hello</text> 30</div> 31``` 32 33```css 34/* xxx.css */ 35.container { 36 width: 100%; 37 flex-direction: column; 38 align-items: center; 39} 40.translate { 41 height: 150px; 42 width: 300px; 43 margin: 50px; 44 font-size: 50px; 45 background-color: #008000; 46 transform: translate(200px); 47} 48.rotate { 49 height: 150px; 50 width: 300px; 51 margin: 50px; 52 font-size: 50px; 53 background-color: #008000; 54 transform-origin: 200px 100px; 55 transform: rotate(45deg); 56} 57.scale { 58 height: 150px; 59 width: 300px; 60 margin: 50px; 61 font-size: 50px; 62 background-color: #008000; 63 transform: scaleX(1.5); 64} 65``` 66 67 68**图1** 静态动画效果图 69 70 71 72 73## 连续动画 74 75静态动画只有开始状态和结束状态，没有中间状态，如果需要设置中间的过渡状态和转换效果，需要使用连续动画实现。 76 77连续动画的核心是animation样式，它定义了动画的开始状态、结束状态以及时间和速度的变化曲线。通过animation样式可以实现的效果有： 78 79- **animation-name**：设置动画执行后应用到组件上的背景颜色、透明度、宽高和变换类型。 80 81- **animation-delay**和**animation-duration**：分别设置动画执行后元素延迟和持续的时间。 82 83- **animation-timing-function**：描述动画执行的速度曲线，使动画更加平滑。 84 85- **animation-iteration-count**：定义动画播放的次数。 86 87- **animation-fill-mode**：指定动画执行结束后是否恢复初始状态。 88 89animation样式需要在css文件中先定义keyframe，在keyframe中设置动画的过渡效果，并通过一个样式类型在hml文件中调用。animation-name的使用示例如下： 90 91```html 92<!-- xxx.hml --> 93<div class="item-container"> 94 <div class="item {{colorParam}}"> 95 <text class="txt">color</text> 96 </div> 97 <div class="item {{opacityParam}}"> 98 <text class="txt">opacity</text> 99 </div> 100 <input class="button" type="button" name="" value="show" onclick="showAnimation"/> 101</div> 102``` 103 104```css 105/* xxx.css */ 106.item-container { 107 margin: 60px; 108 flex-direction: column; 109} 110.item { 111 width: 80%; 112 background-color: #f76160; 113} 114.txt { 115 text-align: center; 116 width: 200px; 117 height: 100px; 118} 119.button { 120 width: 200px; 121 margin: 10px; 122 font-size: 30px; 123 background-color: #09ba07; 124} 125.color { 126 animation-name: Color; 127 animation-duration: 8000ms; 128} 129.opacity { 130 animation-name: Opacity; 131 animation-duration: 8000ms; 132} 133@keyframes Color { 134 from { 135 background-color: #f76160; 136 } 137 to { 138 background-color: #09ba07; 139 } 140} 141@keyframes Opacity { 142 from { 143 opacity: 0.9; 144 } 145 to { 146 opacity: 0.1; 147 } 148} 149``` 150 151```js 152// xxx.js 153export default { 154 data: { 155 colorParam: '', 156 opacityParam: '', 157 }, 158 showAnimation: function () { 159 this.colorParam = ''; 160 this.opacityParam = ''; 161 this.colorParam = 'color'; 162 this.opacityParam = 'opacity'; 163 } 164} 165``` 166 167**图2** 连续动画效果图 168 169 170
