LayoutAnimation.js
4.04 KB
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule LayoutAnimation
* @flow
* @format
*/
'use strict';
const PropTypes = require('prop-types');
const UIManager = require('UIManager');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const keyMirror = require('fbjs/lib/keyMirror');
const {checkPropTypes} = PropTypes;
const TypesEnum = {
spring: true,
linear: true,
easeInEaseOut: true,
easeIn: true,
easeOut: true,
keyboard: true,
};
const Types = keyMirror(TypesEnum);
const PropertiesEnum = {
opacity: true,
scaleXY: true,
};
const Properties = keyMirror(PropertiesEnum);
const animType = PropTypes.shape({
duration: PropTypes.number,
delay: PropTypes.number,
springDamping: PropTypes.number,
initialVelocity: PropTypes.number,
type: PropTypes.oneOf(Object.keys(Types)).isRequired,
property: PropTypes.oneOf(
// Only applies to create/delete
Object.keys(Properties),
),
});
type Anim = {
duration?: number,
delay?: number,
springDamping?: number,
initialVelocity?: number,
type?: $Enum<typeof TypesEnum>,
property?: $Enum<typeof PropertiesEnum>,
};
const configType = PropTypes.shape({
duration: PropTypes.number.isRequired,
create: animType,
update: animType,
delete: animType,
});
type Config = {
duration: number,
create?: Anim,
update?: Anim,
delete?: Anim,
};
function checkConfig(config: Config, location: string, name: string) {
checkPropTypes({config: configType}, {config}, location, name);
}
function configureNext(config: Config, onAnimationDidEnd?: Function) {
if (__DEV__) {
checkConfig(config, 'config', 'LayoutAnimation.configureNext');
}
UIManager.configureNextLayoutAnimation(
config,
onAnimationDidEnd || function() {},
function() {
/* unused */
},
);
}
function create(duration: number, type, creationProp): Config {
return {
duration,
create: {
type,
property: creationProp,
},
update: {
type,
},
delete: {
type,
property: creationProp,
},
};
}
const Presets = {
easeInEaseOut: create(300, Types.easeInEaseOut, Properties.opacity),
linear: create(500, Types.linear, Properties.opacity),
spring: {
duration: 700,
create: {
type: Types.linear,
property: Properties.opacity,
},
update: {
type: Types.spring,
springDamping: 0.4,
},
delete: {
type: Types.linear,
property: Properties.opacity,
},
},
};
/**
* Automatically animates views to their new positions when the
* next layout happens.
*
* A common way to use this API is to call it before calling `setState`.
*
* Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
*
* UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
*/
const LayoutAnimation = {
/**
* Schedules an animation to happen on the next layout.
*
* @param config Specifies animation properties:
*
* - `duration` in milliseconds
* - `create`, config for animating in new views (see `Anim` type)
* - `update`, config for animating views that have been updated
* (see `Anim` type)
*
* @param onAnimationDidEnd Called when the animation finished.
* Only supported on iOS.
* @param onError Called on error. Only supported on iOS.
*/
configureNext,
/**
* Helper for creating a config for `configureNext`.
*/
create,
Types,
Properties,
checkConfig,
Presets,
easeInEaseOut: configureNext.bind(null, Presets.easeInEaseOut),
linear: configureNext.bind(null, Presets.linear),
spring: configureNext.bind(null, Presets.spring),
};
module.exports = LayoutAnimation;