# Animation 动画
概述
Animation 动画，过渡效果。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiAnimation from "@/components/firstui/fui-animation/fui-animation.nvue"
export default {
components:{
fuiAnimation
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 duration 属性设置动画过渡时间，animationType 属性设置过渡动画类型，styles 属性设置组件外层相关样式，visible 属性控制组件显示隐藏。
<fui-button type="gray" btn-size="medium" text="Fade" :bold="true" margin="24rpx 0"
@onclick="ani(['fade'], true)"></fui-button>
<fui-button type="gray" btn-size="medium" text="Slide Top" :bold="true"
@onclick="ani(['slide-top'],false)">
</fui-button>
<fui-animation :duration="500" :animationType="mode" :styles="styles" :visible="isShow" @onclick="handleClick"
@change="change">
<view class="fui-ani__box fui-flex__center">
<fui-text text="FirstUI" color="#fff"></fui-text>
</view>
</fui-animation>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
export default {
data() {
return {
isShow: false,
mode: ['fade'] as string[],
styles: {} as UTSJSONObject
}
},
onReady() {
//初始化显示动画，需在onReady之后
// this.ani(['slide-top'], false)
},
methods: {
ani(mode : string[], mask : boolean) {
if (mask) {
this.styles['background-color'] = 'rgba(0,0,0,0.6)';
} else {
this.styles['background-color'] = 'rgba(0,0,0,0)';
}
//如果两次设置的动画效果一致则直接显示
if (JSON.stringify(mode) == JSON.stringify(this.mode)) {
this.isShow = !this.isShow;
} else {
this.mode = mode;
setTimeout(() => {
this.isShow = !this.isShow;
}, 50)
}
},
handleClick() {
this.isShow = false;
},
change(visible : boolean) {
console.log(visible);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 过渡动画显示的自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| visible | Boolean | 是否显示 | false | - |
| animationType | Array<string> | 过渡动画类型，可取值：fade、slide-top、slide-right、slide-bottom、slide-left、zoom-in、zoom-out | [ ] | - |
| duration | Number | 动画过渡的时间，单位ms | 300 | - |
| styles | Object | 组件外层样式，替换默认值或与默认值合并 | 如下styles | - |
styles 默认值如下，属性styles传值：同名属性覆盖，不同名属性合并
//组件外层样式 默认值
styles:{
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
display: 'flex',
'justify-content': 'center',
'align-items': 'center'
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Events
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @onclick | (event: boolean) => void | 点击动画弹层时触发，返回显示状态 | boolean：是否显示 |
| @change | (event: boolean) => void | 动画执行时触发，返回显示状态 | boolean：是否显示 |
Animation 动画