# Animation 动画

概述

Animation 动画，过渡效果。

# 引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "动画",
  "usingComponents": {
    "fui-animation":"/components/firstui/fui-animation/fui-animation"
  }
}

1
2
3
4
5
6

第二种：在根目录app.json文件中全局引入

  "usingComponents": {
     "fui-animation":"components/firstui/fui-animation/fui-animation"
  }

1
2
3

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 duration 属性设置动画过渡时间，animationType 属性设置过渡动画类型，styles 属性设置组件外层相关样式，show 属性控制组件显示隐藏。

<fui-button type="gray" width="400rpx" height="84rpx" text="Fade" bold margin="24rpx 0" bindclick="ani" data-type="1"></fui-button>

<fui-animation duration="{{500}}" animationType="{{mode}}" styles="{{styles}}" show="{{show}}" bindclick="handleClick"
    bindchange="change">
    <view class="fui-ani__box fui-flex__center">transition</view>
</fui-animation>

1
2
3
4
5
6

//data数据以及方法
data() {
	show: false,
	mode: ['fade'],
	styles: {
	  position: 'fixed',
	  bottom: 0,
	  top: 0,
	  left: 0,
	  right: 0,
	  display: 'flex',
	  'justify-content': 'center',
	  'align-items': 'center'
	}
},
ani(e) {
    let type = Number(e.currentTarget.dataset.type)
    let mode, mask = false;
    switch (type) {
      case 1:
        mode = ['fade']
        mask = true
        break;
      case 2:
        mode = ['slide-top']
        break;
      case 3:
        mode = ['slide-left']
        break;
      case 4:
        mode = ['slide-right']
        break;
      case 5:
        mode = ['slide-bottom']
        break;
      case 6:
        mode = ['zoom-in', 'fade']
        break;
      case 7:
        mode = ['zoom-out', 'fade']
        break;
      case 8:
        mode = ['slide-left', 'slide-top', 'fade']
        break;
      default:
        break;
    }
    let styles = this.data.styles

    if (mask) {
      styles.backgroundColor = 'rgba(0,0,0,0.6)'
    } else {
      styles.backgroundColor = 'rgba(0,0,0,0)'
    }
    this.setData({
      styles: styles
    })

    setTimeout(() => {
      this.setData({
        mode: mode
      }, () => {
        this.setData({
          show: !this.data.show
        })
      })
    }, 80);
  },
  handleClick() {
    this.setData({
      show: false
    })
  },
  change(e) {
    console.log(e);
  }

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

# Slots

插槽名称	说明
default	过渡动画显示的自定义内容

# Props

属性名	类型	说明	默认值	其他说明
show	Boolean	是否显示	false	-
animationType	Array	过渡动画类型，可取值：fade、slide-top、slide-right、slide-bottom、slide-left、zoom-in、zoom-out	[ ]	-
duration	Number	动画过渡的时间，单位ms	300	-
styles	Object	组件外层样式	如下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

# Events

事件名	说明	回调参数
bind:click	点击动画弹层时触发	event.detail = { detail:是否显示 }
bind:change	动画执行时触发	event.detail = { detail:是否显示 }

示例预览

← Footer 页脚 StatusBar 状态栏 →