[ReactNative] Animated infra - ValueXY, addListener, fixes, etc

Summary:
This is most of the infra necessary for the gratuitous animation demo app.

I originally had things more split up, but it was just confusing because everything is so interlinked and dependent, so lower diffs would have code that wasn't even going to survive (and thus not useful to review), so I merged it all here.

- `Animated.event` now supports mapping to multiple arguments (needed for `onPanResponderMove` events which provide the `gestureState` as the second arg.
- Vectors: new `Animated.ValueXY` class which composes two `Animated.Value`s for convenience/brevity
- Listeners: values and events can be listened to in order to trigger state updates based on their values.  Intended to work as async updates from native that might lag behind truth.
- Offsets: a common pattern with pan and other gestures is to track where you left off.  This is easily encoded in the Value directly with `setOffset(offset)`, typically used on grant, and can be flattened back into the base value and reset with `flattenOffset()`, typically called on release.
- Tracking: supports `Animated.Value/ValueXY` for `toValue` with all animations, enabling linking multiple values together with some curve or physics.  `Animated.timing` can be used with `duration: 0` to rigidly link the values with no lag, or `Animated.spring` can be used to link them like chat heads.
- `Animated.Image` as a default export.
- Various cleanup, bug, flow and lint fixes.
This commit is contained in:
Spencer Ahrens 2015-07-07 13:33:51 -07:00
parent c928d9495b
commit d56ff42596
1 changed files with 30 additions and 25 deletions

View File

@ -87,37 +87,42 @@ function create(duration: number, type, creationProp): Config {
}; };
} }
var 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,
},
},
};
var LayoutAnimation = { var LayoutAnimation = {
configureNext, configureNext,
create, create,
Types, Types,
Properties, Properties,
configChecker: configChecker, configChecker: configChecker,
Presets: { Presets,
easeInEaseOut: create( easeInEaseOut: configureNext.bind(
300, Types.easeInEaseOut, Properties.opacity null, Presets.easeInEaseOut
), ),
linear: create( linear: configureNext.bind(
500, Types.linear, Properties.opacity null, Presets.linear
), ),
spring: { spring: configureNext.bind(
duration: 700, null, Presets.spring
create: { ),
type: Types.linear,
property: Properties.opacity,
},
update: {
type: Types.spring,
springDamping: 0.4,
},
},
}
}; };
for (var key in LayoutAnimation.Presets) {
LayoutAnimation[key] = LayoutAnimation.configureNext.bind(
null, LayoutAnimation.Presets[key]
);
}
module.exports = LayoutAnimation; module.exports = LayoutAnimation;