uniapp自定义动画

### 实现自定义动画效果

在 UniApp 中实现自定义动画可以通过 CSS 动画来完成。对于创建类似于绿洲 APP 的底部 tab 动画，可以采用如下方式：

#### 定义样式类
首先，在 `.vue` 文件中的 `<style>` 部分定义所需的样式类 `tabImg` 和 `acImg`。这里设置了图像大小以及相对定位属性，并指定了一个名为 `bounce` 的关键帧动画。

.tabImg {
    width: 50upx;
    height: 50upx;
    position: relative;
    top: 31upx;
}
@-webkit-keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.acImg {
    animation: bounce .3s;
}[^1]

#### 应用到组件模板内
接着，在 Vue 组件的 HTML 结构里给目标元素添加上述定义好的类名即可触发该动画效果。例如，如果要让某个图片标签具有这种弹跳放大缩小的效果，则可以在其上加上 `class="tabImg acImg"` 属性。

<img src="/path/to/image.png" alt="" class="tabImg acImg">

通过这种方式能够轻松地为页面上的任何 DOM 节点赋予简单的缩放动画行为，而无需依赖复杂的 JavaScript 或者第三方库函数调用来控制动画逻辑。