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