react-native-macos/Libraries/LayoutAnimation/LayoutAnimation.js

187 строки
5.4 KiB
JavaScript
Исходник Обычный вид История

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
'use strict';
const UIManager = require('../ReactNative/UIManager');
import type {Spec as FabricUIManagerSpec} from '../ReactNative/FabricUIManager';
import type {
LayoutAnimationConfig as LayoutAnimationConfig_,
LayoutAnimationType,
LayoutAnimationProperty,
} from '../Renderer/shims/ReactNativeTypes';
import Platform from '../Utilities/Platform';
// Reexport type
export type LayoutAnimationConfig = LayoutAnimationConfig_;
2015-03-25 05:34:12 +03:00
type OnAnimationDidEndCallback = () => void;
type OnAnimationDidFailCallback = () => void;
/**
* Configures the next commit to be animated.
*
* onAnimationDidEnd is guaranteed to be called when the animation completes.
* onAnimationDidFail is *never* called in the classic, pre-Fabric renderer,
* and never has been. In the new renderer (Fabric) it is called only if configuration
* parsing fails.
*/
function configureNext(
config: LayoutAnimationConfig,
onAnimationDidEnd?: OnAnimationDidEndCallback,
onAnimationDidFail?: OnAnimationDidFailCallback,
) {
if (Platform.isTesting) {
return;
}
// Since LayoutAnimations may possibly be disabled for now on iOS (Fabric),
// or Android (non-Fabric) we race a setTimeout with animation completion,
// in case onComplete is never called
// from native. Once LayoutAnimations+Fabric unconditionally ship everywhere, we can
// delete this mechanism at least in the Fabric branch.
let animationCompletionHasRun = false;
const onAnimationComplete = () => {
if (animationCompletionHasRun) {
return;
}
animationCompletionHasRun = true;
clearTimeout(raceWithAnimationId);
onAnimationDidEnd?.();
};
const raceWithAnimationId = setTimeout(
onAnimationComplete,
(config.duration ?? 0) + 17 /* one frame + 1ms */,
);
// In Fabric, LayoutAnimations are unconditionally enabled for Android, and
// conditionally enabled on iOS (pending fully shipping; this is a temporary state).
const FabricUIManager: FabricUIManagerSpec = global?.nativeFabricUIManager;
if (FabricUIManager?.configureNextLayoutAnimation) {
global?.nativeFabricUIManager?.configureNextLayoutAnimation(
config,
onAnimationComplete,
onAnimationDidFail ??
function() {} /* this will only be called if configuration parsing fails */,
);
return;
}
// This will only run if Fabric is *not* installed.
// If you have Fabric + non-Fabric running in the same VM, non-Fabric LayoutAnimations
// will not work.
if (UIManager?.configureNextLayoutAnimation) {
UIManager.configureNextLayoutAnimation(
config,
onAnimationComplete ?? function() {},
onAnimationDidFail ??
function() {} /* this should never be called in Non-Fabric */,
);
}
2015-03-25 05:34:12 +03:00
}
function create(
duration: number,
type: LayoutAnimationType,
property: LayoutAnimationProperty,
): LayoutAnimationConfig {
2015-03-25 05:34:12 +03:00
return {
duration,
create: {type, property},
update: {type},
delete: {type, property},
2015-03-25 05:34:12 +03:00
};
}
const Presets = {
easeInEaseOut: (create(
300,
'easeInEaseOut',
'opacity',
): LayoutAnimationConfig),
linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
[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.
2015-07-07 23:33:51 +03:00
spring: {
duration: 700,
create: {
type: 'linear',
property: 'opacity',
[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.
2015-07-07 23:33:51 +03:00
},
update: {
type: 'spring',
[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.
2015-07-07 23:33:51 +03:00
springDamping: 0.4,
},
delete: {
type: 'linear',
property: 'opacity',
},
[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.
2015-07-07 23:33:51 +03:00
},
};
/**
* 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`, `AnimationConfig` for animating in new views
* - `update`, `AnimationConfig` for animating views that have been updated
*
* @param onAnimationDidEnd Called when the animation finished.
* Only supported on iOS.
* @param onError Called on error. Only supported on iOS.
*/
2015-03-25 05:34:12 +03:00
configureNext,
/**
* Helper for creating a config for `configureNext`.
*/
2015-03-25 05:34:12 +03:00
create,
Types: Object.freeze({
spring: 'spring',
linear: 'linear',
easeInEaseOut: 'easeInEaseOut',
easeIn: 'easeIn',
easeOut: 'easeOut',
keyboard: 'keyboard',
}),
Properties: Object.freeze({
opacity: 'opacity',
scaleX: 'scaleX',
scaleY: 'scaleY',
scaleXY: 'scaleXY',
}),
checkConfig(...args: Array<mixed>) {
console.error('LayoutAnimation.checkConfig(...) has been disabled.');
},
[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.
2015-07-07 23:33:51 +03:00
Presets,
easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): (
onAnimationDidEnd?: OnAnimationDidEndCallback,
) => void),
linear: (configureNext.bind(null, Presets.linear): (
onAnimationDidEnd?: OnAnimationDidEndCallback,
) => void),
spring: (configureNext.bind(null, Presets.spring): (
onAnimationDidEnd?: OnAnimationDidEndCallback,
) => void),
};
module.exports = LayoutAnimation;