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