From d56ff42596df994f95806fdc0ad79c323e85b1e7 Mon Sep 17 00:00:00 2001 From: Spencer Ahrens Date: Tue, 7 Jul 2015 13:33:51 -0700 Subject: [PATCH] [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. --- Libraries/Animation/LayoutAnimation.js | 55 ++++++++++++++------------ 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/Libraries/Animation/LayoutAnimation.js b/Libraries/Animation/LayoutAnimation.js index 1a31f98d4..d435f431f 100644 --- a/Libraries/Animation/LayoutAnimation.js +++ b/Libraries/Animation/LayoutAnimation.js @@ -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 = { configureNext, create, Types, Properties, configChecker: configChecker, - 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, - }, - }, - } + Presets, + easeInEaseOut: configureNext.bind( + null, Presets.easeInEaseOut + ), + linear: configureNext.bind( + null, Presets.linear + ), + spring: configureNext.bind( + null, Presets.spring + ), }; -for (var key in LayoutAnimation.Presets) { - LayoutAnimation[key] = LayoutAnimation.configureNext.bind( - null, LayoutAnimation.Presets[key] - ); -} - module.exports = LayoutAnimation;