2015-07-07 23:34:09 +03:00
|
|
|
/**
|
2021-12-31 02:08:43 +03:00
|
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
2015-07-07 23:34:09 +03:00
|
|
|
*
|
2018-02-17 05:24:55 +03:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2015-07-07 23:34:09 +03:00
|
|
|
*
|
|
|
|
* @flow
|
2017-08-23 03:57:38 +03:00
|
|
|
* @format
|
2015-07-07 23:34:09 +03:00
|
|
|
*/
|
2019-10-16 20:03:47 +03:00
|
|
|
|
2015-07-07 23:34:09 +03:00
|
|
|
'use strict';
|
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
const {AnimatedEvent, attachNativeEvent} = require('./AnimatedEvent');
|
|
|
|
const AnimatedAddition = require('./nodes/AnimatedAddition');
|
|
|
|
const AnimatedDiffClamp = require('./nodes/AnimatedDiffClamp');
|
|
|
|
const AnimatedDivision = require('./nodes/AnimatedDivision');
|
|
|
|
const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
|
|
|
|
const AnimatedModulo = require('./nodes/AnimatedModulo');
|
|
|
|
const AnimatedMultiplication = require('./nodes/AnimatedMultiplication');
|
|
|
|
const AnimatedNode = require('./nodes/AnimatedNode');
|
2018-03-31 06:57:42 +03:00
|
|
|
const AnimatedSubtraction = require('./nodes/AnimatedSubtraction');
|
2017-08-23 03:57:38 +03:00
|
|
|
const AnimatedTracking = require('./nodes/AnimatedTracking');
|
|
|
|
const AnimatedValue = require('./nodes/AnimatedValue');
|
|
|
|
const AnimatedValueXY = require('./nodes/AnimatedValueXY');
|
|
|
|
const DecayAnimation = require('./animations/DecayAnimation');
|
|
|
|
const SpringAnimation = require('./animations/SpringAnimation');
|
|
|
|
const TimingAnimation = require('./animations/TimingAnimation');
|
|
|
|
|
|
|
|
const createAnimatedComponent = require('./createAnimatedComponent');
|
|
|
|
|
|
|
|
import type {
|
|
|
|
AnimationConfig,
|
|
|
|
EndCallback,
|
|
|
|
EndResult,
|
|
|
|
} from './animations/Animation';
|
|
|
|
import type {TimingAnimationConfig} from './animations/TimingAnimation';
|
|
|
|
import type {DecayAnimationConfig} from './animations/DecayAnimation';
|
|
|
|
import type {SpringAnimationConfig} from './animations/SpringAnimation';
|
|
|
|
import type {Mapping, EventConfig} from './AnimatedEvent';
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2022-01-28 00:36:37 +03:00
|
|
|
import AnimatedColor from './nodes/AnimatedColor';
|
|
|
|
|
2018-03-11 07:19:07 +03:00
|
|
|
export type CompositeAnimation = {
|
2016-08-09 14:20:33 +03:00
|
|
|
start: (callback?: ?EndCallback) => void,
|
|
|
|
stop: () => void,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
reset: () => void,
|
|
|
|
_startNativeLoop: (iterations?: number) => void,
|
|
|
|
_isUsingNativeDriver: () => boolean,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const add = function (
|
2017-08-23 03:57:38 +03:00
|
|
|
a: AnimatedNode | number,
|
|
|
|
b: AnimatedNode | number,
|
2015-12-11 00:27:52 +03:00
|
|
|
): AnimatedAddition {
|
|
|
|
return new AnimatedAddition(a, b);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const subtract = function (
|
2018-03-31 06:57:42 +03:00
|
|
|
a: AnimatedNode | number,
|
|
|
|
b: AnimatedNode | number,
|
|
|
|
): AnimatedSubtraction {
|
|
|
|
return new AnimatedSubtraction(a, b);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const divide = function (
|
2017-08-23 03:57:38 +03:00
|
|
|
a: AnimatedNode | number,
|
|
|
|
b: AnimatedNode | number,
|
2016-09-27 02:32:27 +03:00
|
|
|
): AnimatedDivision {
|
|
|
|
return new AnimatedDivision(a, b);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const multiply = function (
|
2017-08-23 03:57:38 +03:00
|
|
|
a: AnimatedNode | number,
|
|
|
|
b: AnimatedNode | number,
|
2015-12-11 00:27:52 +03:00
|
|
|
): AnimatedMultiplication {
|
|
|
|
return new AnimatedMultiplication(a, b);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const modulo = function (a: AnimatedNode, modulus: number): AnimatedModulo {
|
2016-02-26 04:18:27 +03:00
|
|
|
return new AnimatedModulo(a, modulus);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const diffClamp = function (
|
2017-08-23 03:57:38 +03:00
|
|
|
a: AnimatedNode,
|
2016-08-23 23:59:07 +03:00
|
|
|
min: number,
|
|
|
|
max: number,
|
|
|
|
): AnimatedDiffClamp {
|
|
|
|
return new AnimatedDiffClamp(a, min, max);
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const _combineCallbacks = function (
|
2017-08-23 03:57:38 +03:00
|
|
|
callback: ?EndCallback,
|
2022-02-11 17:01:04 +03:00
|
|
|
config: $ReadOnly<{...AnimationConfig, ...}>,
|
2017-08-23 03:57:38 +03:00
|
|
|
) {
|
2016-08-18 14:47:47 +03:00
|
|
|
if (callback && config.onComplete) {
|
|
|
|
return (...args) => {
|
|
|
|
config.onComplete && config.onComplete(...args);
|
|
|
|
callback && callback(...args);
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
return callback || config.onComplete;
|
|
|
|
}
|
|
|
|
};
|
2016-02-26 04:18:27 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const maybeVectorAnim = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
value: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
2015-07-07 23:34:09 +03:00
|
|
|
config: Object,
|
2017-08-23 03:57:38 +03:00
|
|
|
anim: (value: AnimatedValue, config: Object) => CompositeAnimation,
|
2015-07-07 23:34:09 +03:00
|
|
|
): ?CompositeAnimation {
|
|
|
|
if (value instanceof AnimatedValueXY) {
|
2017-08-23 03:57:38 +03:00
|
|
|
const configX = {...config};
|
|
|
|
const configY = {...config};
|
|
|
|
for (const key in config) {
|
|
|
|
const {x, y} = config[key];
|
2015-07-07 23:34:09 +03:00
|
|
|
if (x !== undefined && y !== undefined) {
|
|
|
|
configX[key] = x;
|
|
|
|
configY[key] = y;
|
|
|
|
}
|
|
|
|
}
|
2017-08-23 03:57:38 +03:00
|
|
|
const aX = anim((value: AnimatedValueXY).x, configX);
|
|
|
|
const aY = anim((value: AnimatedValueXY).y, configY);
|
2015-07-07 23:34:09 +03:00
|
|
|
// We use `stopTogether: false` here because otherwise tracking will break
|
|
|
|
// because the second animation will get stopped before it can update.
|
|
|
|
return parallel([aX, aY], {stopTogether: false});
|
2022-01-28 00:36:37 +03:00
|
|
|
} else if (value instanceof AnimatedColor) {
|
|
|
|
const configR = {...config};
|
|
|
|
const configG = {...config};
|
|
|
|
const configB = {...config};
|
|
|
|
const configA = {...config};
|
|
|
|
for (const key in config) {
|
|
|
|
const {r, g, b, a} = config[key];
|
|
|
|
if (
|
|
|
|
r !== undefined &&
|
|
|
|
g !== undefined &&
|
|
|
|
b !== undefined &&
|
|
|
|
a !== undefined
|
|
|
|
) {
|
|
|
|
configR[key] = r;
|
|
|
|
configG[key] = g;
|
|
|
|
configB[key] = b;
|
|
|
|
configA[key] = a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const aR = anim((value: AnimatedColor).r, configR);
|
|
|
|
const aG = anim((value: AnimatedColor).g, configG);
|
|
|
|
const aB = anim((value: AnimatedColor).b, configB);
|
|
|
|
const aA = anim((value: AnimatedColor).a, configA);
|
|
|
|
// We use `stopTogether: false` here because otherwise tracking will break
|
|
|
|
// because the second animation will get stopped before it can update.
|
|
|
|
return parallel([aR, aG, aB, aA], {stopTogether: false});
|
2015-07-07 23:34:09 +03:00
|
|
|
}
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const spring = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
value: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
2015-07-07 23:34:09 +03:00
|
|
|
config: SpringAnimationConfig,
|
|
|
|
): CompositeAnimation {
|
2021-11-03 08:10:46 +03:00
|
|
|
const start = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
configuration: SpringAnimationConfig,
|
2017-08-23 03:57:38 +03:00
|
|
|
callback?: ?EndCallback,
|
|
|
|
): void {
|
|
|
|
callback = _combineCallbacks(callback, configuration);
|
|
|
|
const singleValue: any = animatedValue;
|
|
|
|
const singleConfig: any = configuration;
|
|
|
|
singleValue.stopTracking();
|
|
|
|
if (configuration.toValue instanceof AnimatedNode) {
|
|
|
|
singleValue.track(
|
|
|
|
new AnimatedTracking(
|
2015-07-07 23:34:09 +03:00
|
|
|
singleValue,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
configuration.toValue,
|
2015-07-07 23:34:09 +03:00
|
|
|
SpringAnimation,
|
|
|
|
singleConfig,
|
2017-08-23 03:57:38 +03:00
|
|
|
callback,
|
|
|
|
),
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
singleValue.animate(new SpringAnimation(singleConfig), callback);
|
|
|
|
}
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
};
|
2017-08-23 03:57:38 +03:00
|
|
|
return (
|
|
|
|
maybeVectorAnim(value, config, spring) || {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
start(value, config, callback);
|
|
|
|
},
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.stopAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.resetAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function (iterations?: number): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
const singleConfig = {...config, iterations};
|
|
|
|
start(value, singleConfig);
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
2017-08-23 03:57:38 +03:00
|
|
|
return config.useNativeDriver || false;
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
}
|
2017-08-23 03:57:38 +03:00
|
|
|
);
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const timing = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
value: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
2015-07-07 23:34:09 +03:00
|
|
|
config: TimingAnimationConfig,
|
|
|
|
): CompositeAnimation {
|
2021-11-03 08:10:46 +03:00
|
|
|
const start = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
configuration: TimingAnimationConfig,
|
2017-08-23 03:57:38 +03:00
|
|
|
callback?: ?EndCallback,
|
|
|
|
): void {
|
|
|
|
callback = _combineCallbacks(callback, configuration);
|
|
|
|
const singleValue: any = animatedValue;
|
|
|
|
const singleConfig: any = configuration;
|
|
|
|
singleValue.stopTracking();
|
|
|
|
if (configuration.toValue instanceof AnimatedNode) {
|
|
|
|
singleValue.track(
|
|
|
|
new AnimatedTracking(
|
2015-07-07 23:34:09 +03:00
|
|
|
singleValue,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
configuration.toValue,
|
2015-07-07 23:34:09 +03:00
|
|
|
TimingAnimation,
|
|
|
|
singleConfig,
|
2017-08-23 03:57:38 +03:00
|
|
|
callback,
|
|
|
|
),
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
singleValue.animate(new TimingAnimation(singleConfig), callback);
|
|
|
|
}
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
};
|
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
return (
|
|
|
|
maybeVectorAnim(value, config, timing) || {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
start(value, config, callback);
|
|
|
|
},
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.stopAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.resetAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function (iterations?: number): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
const singleConfig = {...config, iterations};
|
|
|
|
start(value, singleConfig);
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
2017-08-23 03:57:38 +03:00
|
|
|
return config.useNativeDriver || false;
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
}
|
2017-08-23 03:57:38 +03:00
|
|
|
);
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const decay = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
value: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
2015-07-07 23:34:09 +03:00
|
|
|
config: DecayAnimationConfig,
|
|
|
|
): CompositeAnimation {
|
2021-11-03 08:10:46 +03:00
|
|
|
const start = function (
|
2022-01-28 00:36:37 +03:00
|
|
|
animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
configuration: DecayAnimationConfig,
|
2017-08-23 03:57:38 +03:00
|
|
|
callback?: ?EndCallback,
|
|
|
|
): void {
|
|
|
|
callback = _combineCallbacks(callback, configuration);
|
|
|
|
const singleValue: any = animatedValue;
|
|
|
|
const singleConfig: any = configuration;
|
|
|
|
singleValue.stopTracking();
|
|
|
|
singleValue.animate(new DecayAnimation(singleConfig), callback);
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
};
|
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
return (
|
|
|
|
maybeVectorAnim(value, config, decay) || {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
start(value, config, callback);
|
|
|
|
},
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.stopAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function (): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
value.resetAnimation();
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function (iterations?: number): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
const singleConfig = {...config, iterations};
|
|
|
|
start(value, singleConfig);
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
2017-08-23 03:57:38 +03:00
|
|
|
return config.useNativeDriver || false;
|
|
|
|
},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
}
|
2017-08-23 03:57:38 +03:00
|
|
|
);
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const sequence = function (
|
2015-07-07 23:34:09 +03:00
|
|
|
animations: Array<CompositeAnimation>,
|
|
|
|
): CompositeAnimation {
|
2017-08-23 03:57:38 +03:00
|
|
|
let current = 0;
|
2015-07-07 23:34:09 +03:00
|
|
|
return {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback) {
|
|
|
|
const onComplete = function (result) {
|
2015-07-07 23:34:09 +03:00
|
|
|
if (!result.finished) {
|
|
|
|
callback && callback(result);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
current++;
|
|
|
|
|
|
|
|
if (current === animations.length) {
|
|
|
|
callback && callback(result);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
animations[current].start(onComplete);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (animations.length === 0) {
|
|
|
|
callback && callback({finished: true});
|
|
|
|
} else {
|
|
|
|
animations[current].start(onComplete);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function () {
|
2015-07-07 23:34:09 +03:00
|
|
|
if (current < animations.length) {
|
|
|
|
animations[current].stop();
|
|
|
|
}
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function () {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
animations.forEach((animation, idx) => {
|
|
|
|
if (idx <= current) {
|
|
|
|
animation.reset();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
current = 0;
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function () {
|
2017-08-23 03:57:38 +03:00
|
|
|
throw new Error(
|
|
|
|
'Loops run using the native driver cannot contain Animated.sequence animations',
|
|
|
|
);
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
return false;
|
2017-08-23 03:57:38 +03:00
|
|
|
},
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
type ParallelConfig = {
|
2019-11-21 20:38:13 +03:00
|
|
|
// If one is stopped, stop all. default: true
|
|
|
|
stopTogether?: boolean,
|
|
|
|
...
|
2017-08-23 03:57:38 +03:00
|
|
|
};
|
2021-11-03 08:10:46 +03:00
|
|
|
const parallel = function (
|
2015-07-07 23:34:09 +03:00
|
|
|
animations: Array<CompositeAnimation>,
|
|
|
|
config?: ?ParallelConfig,
|
|
|
|
): CompositeAnimation {
|
2017-08-23 03:57:38 +03:00
|
|
|
let doneCount = 0;
|
2015-07-07 23:34:09 +03:00
|
|
|
// Make sure we only call stop() at most once for each animation
|
2017-08-23 03:57:38 +03:00
|
|
|
const hasEnded = {};
|
|
|
|
const stopTogether = !(config && config.stopTogether === false);
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
const result = {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback) {
|
2015-07-07 23:34:09 +03:00
|
|
|
if (doneCount === animations.length) {
|
|
|
|
callback && callback({finished: true});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
animations.forEach((animation, idx) => {
|
2021-11-03 08:10:46 +03:00
|
|
|
const cb = function (endResult) {
|
2015-07-07 23:34:09 +03:00
|
|
|
hasEnded[idx] = true;
|
|
|
|
doneCount++;
|
|
|
|
if (doneCount === animations.length) {
|
|
|
|
doneCount = 0;
|
|
|
|
callback && callback(endResult);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!endResult.finished && stopTogether) {
|
|
|
|
result.stop();
|
|
|
|
}
|
2015-07-22 01:04:02 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
if (!animation) {
|
|
|
|
cb({finished: true});
|
|
|
|
} else {
|
|
|
|
animation.start(cb);
|
|
|
|
}
|
2015-07-07 23:34:09 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function (): void {
|
2015-07-07 23:34:09 +03:00
|
|
|
animations.forEach((animation, idx) => {
|
|
|
|
!hasEnded[idx] && animation.stop();
|
|
|
|
hasEnded[idx] = true;
|
|
|
|
});
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function (): void {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
animations.forEach((animation, idx) => {
|
|
|
|
animation.reset();
|
|
|
|
hasEnded[idx] = false;
|
|
|
|
doneCount = 0;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function () {
|
2017-08-23 03:57:38 +03:00
|
|
|
throw new Error(
|
|
|
|
'Loops run using the native driver cannot contain Animated.parallel animations',
|
|
|
|
);
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
return false;
|
2017-08-23 03:57:38 +03:00
|
|
|
},
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const delay = function (time: number): CompositeAnimation {
|
2015-07-07 23:34:09 +03:00
|
|
|
// Would be nice to make a specialized implementation
|
Add explicit `useNativeDriver: false` to callsites
Summary:
In order to cleanup the callsites that are not using Animated's native driver, we are going to make useNativeDriver a required option so people have to think about whether they want the native driver or not.
I made this change by changing [Animated.js](https://fburl.com/ritcebri) to have this animation config type:
```
export type AnimationConfig = {
isInteraction?: boolean,
useNativeDriver: true,
onComplete?: ?EndCallback,
iterations?: number,
};
```
This causes Flow to error anywhere where useNativeDriver isn't set or where it is set to false.
I then used these Flow errors to codemod the callsites.
I got the location of the Flow errors by running:
```
flow status --strip-root --json --message-width=0 | jq '.errors | [.[].extra | .[].message | .[].loc | objects | {source: .source, start: .start, end: .end}]'
```
And then ran this codemod:
```
const json = JSON.parse('JSON RESULT FROM FLOW');
const fileLookup = new Map();
json.forEach(item => {
if (!fileLookup.has(item.source)) {
fileLookup.set(item.source, []);
}
fileLookup.get(item.source).push(item);
});
export default function transformer(file, api) {
const j = api.jscodeshift;
const filePath = file.path;
if (!fileLookup.has(filePath)) {
return;
}
const locationInfo = fileLookup.get(filePath);
return j(file.source)
.find(j.ObjectExpression)
.forEach(path => {
if (
path.node.properties.some(
property =>
property != null &&
property.key != null &&
property.key.name === 'useNativeDriver',
)
) {
return;
}
const hasErrorOnLine = locationInfo.some(
singleLocationInfo =>
singleLocationInfo.start.line === path.node.loc.start.line &&
Math.abs(
singleLocationInfo.start.column - path.node.loc.start.column,
) <= 2,
);
if (!hasErrorOnLine) {
return;
}
path.node.properties.push(
j.property(
'init',
j.identifier('useNativeDriver'),
j.booleanLiteral(false),
),
);
})
.toSource();
}
export const parser = 'flow';
```
```
yarn jscodeshift --parser=flow --transform addUseNativeDriver.js RKJSModules react-native-github
```
Followed up with
```
hg status -n --change . | xargs js1 prettier
```
Reviewed By: mdvacca
Differential Revision: D16611291
fbshipit-source-id: 1157587416ec7603d1a59e1fad6a821f1f57b952
2019-08-02 02:42:42 +03:00
|
|
|
return timing(new AnimatedValue(0), {
|
|
|
|
toValue: 0,
|
|
|
|
delay: time,
|
|
|
|
duration: 0,
|
|
|
|
useNativeDriver: false,
|
|
|
|
});
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const stagger = function (
|
2015-07-07 23:34:09 +03:00
|
|
|
time: number,
|
|
|
|
animations: Array<CompositeAnimation>,
|
|
|
|
): CompositeAnimation {
|
2017-08-23 03:57:38 +03:00
|
|
|
return parallel(
|
|
|
|
animations.map((animation, i) => {
|
|
|
|
return sequence([delay(time * i), animation]);
|
|
|
|
}),
|
|
|
|
);
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2019-02-15 19:44:55 +03:00
|
|
|
type LoopAnimationConfig = {
|
|
|
|
iterations: number,
|
|
|
|
resetBeforeIteration?: boolean,
|
2019-11-21 20:38:13 +03:00
|
|
|
...
|
2019-02-15 19:44:55 +03:00
|
|
|
};
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const loop = function (
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
animation: CompositeAnimation,
|
2019-02-15 19:44:55 +03:00
|
|
|
{iterations = -1, resetBeforeIteration = true}: LoopAnimationConfig = {},
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
): CompositeAnimation {
|
2017-08-23 03:57:38 +03:00
|
|
|
let isFinished = false;
|
|
|
|
let iterationsSoFar = 0;
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
return {
|
2021-11-03 08:10:46 +03:00
|
|
|
start: function (callback?: ?EndCallback) {
|
|
|
|
const restart = function (result: EndResult = {finished: true}): void {
|
2017-08-23 03:57:38 +03:00
|
|
|
if (
|
|
|
|
isFinished ||
|
|
|
|
iterationsSoFar === iterations ||
|
|
|
|
result.finished === false
|
|
|
|
) {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
callback && callback(result);
|
|
|
|
} else {
|
|
|
|
iterationsSoFar++;
|
2019-02-15 19:44:55 +03:00
|
|
|
resetBeforeIteration && animation.reset();
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
animation.start(restart);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
if (!animation || iterations === 0) {
|
|
|
|
callback && callback({finished: true});
|
|
|
|
} else {
|
|
|
|
if (animation._isUsingNativeDriver()) {
|
|
|
|
animation._startNativeLoop(iterations);
|
|
|
|
} else {
|
|
|
|
restart(); // Start looping recursively on the js thread
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
stop: function (): void {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
isFinished = true;
|
|
|
|
animation.stop();
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
reset: function (): void {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
iterationsSoFar = 0;
|
|
|
|
isFinished = false;
|
|
|
|
animation.reset();
|
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_startNativeLoop: function () {
|
2017-08-23 03:57:38 +03:00
|
|
|
throw new Error(
|
|
|
|
'Loops run using the native driver cannot contain Animated.loop animations',
|
|
|
|
);
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
},
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
_isUsingNativeDriver: function (): boolean {
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
return animation._isUsingNativeDriver();
|
2017-03-03 02:09:39 +03:00
|
|
|
},
|
|
|
|
};
|
2017-08-23 03:57:38 +03:00
|
|
|
};
|
2017-03-03 02:09:39 +03:00
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
function forkEvent(
|
|
|
|
event: ?AnimatedEvent | ?Function,
|
|
|
|
listener: Function,
|
|
|
|
): AnimatedEvent | Function {
|
2017-03-07 08:42:33 +03:00
|
|
|
if (!event) {
|
|
|
|
return listener;
|
|
|
|
} else if (event instanceof AnimatedEvent) {
|
|
|
|
event.__addListener(listener);
|
|
|
|
return event;
|
|
|
|
} else {
|
|
|
|
return (...args) => {
|
|
|
|
typeof event === 'function' && event(...args);
|
|
|
|
listener(...args);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-23 03:57:38 +03:00
|
|
|
function unforkEvent(
|
|
|
|
event: ?AnimatedEvent | ?Function,
|
|
|
|
listener: Function,
|
|
|
|
): void {
|
2017-03-07 08:42:33 +03:00
|
|
|
if (event && event instanceof AnimatedEvent) {
|
|
|
|
event.__removeListener(listener);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-03 08:10:46 +03:00
|
|
|
const event = function (
|
2020-01-23 18:57:34 +03:00
|
|
|
argMapping: $ReadOnlyArray<?Mapping>,
|
|
|
|
config: EventConfig,
|
|
|
|
): any {
|
2016-09-19 14:07:36 +03:00
|
|
|
const animatedEvent = new AnimatedEvent(argMapping, config);
|
|
|
|
if (animatedEvent.__isNative) {
|
|
|
|
return animatedEvent;
|
|
|
|
} else {
|
|
|
|
return animatedEvent.__getHandler();
|
|
|
|
}
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|
|
|
|
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
2017-02-18 01:41:23 +03:00
|
|
|
* The `Animated` library is designed to make animations fluid, powerful, and
|
|
|
|
* easy to build and maintain. `Animated` focuses on declarative relationships
|
|
|
|
* between inputs and outputs, with configurable transforms in between, and
|
|
|
|
* simple `start`/`stop` methods to control time-based animation execution.
|
2019-02-05 05:25:23 +03:00
|
|
|
* If additional transforms are added, be sure to include them in
|
|
|
|
* AnimatedMock.js as well.
|
2015-09-04 05:29:04 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
module.exports = {
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
|
|
|
* Standard value class for driving animations. Typically initialized with
|
|
|
|
* `new Animated.Value(0);`
|
2017-02-18 01:41:23 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#value
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
Value: AnimatedValue,
|
|
|
|
/**
|
|
|
|
* 2D value class for driving 2D animations, such as pan gestures.
|
2017-02-18 01:41:23 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animatedvaluexy
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
ValueXY: AnimatedValueXY,
|
2022-01-28 00:36:37 +03:00
|
|
|
/**
|
|
|
|
* Value class for driving color animations.
|
|
|
|
*/
|
|
|
|
Color: AnimatedColor,
|
2017-02-10 01:32:32 +03:00
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Exported to use the Interpolation type in flow.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#interpolation
|
2017-02-10 01:32:32 +03:00
|
|
|
*/
|
|
|
|
Interpolation: AnimatedInterpolation,
|
2017-08-08 08:03:43 +03:00
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Exported for ease of type checking. All animated values derive from this
|
|
|
|
* class.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#node
|
2017-08-08 08:03:43 +03:00
|
|
|
*/
|
2017-08-23 03:57:38 +03:00
|
|
|
Node: AnimatedNode,
|
2015-07-07 23:34:09 +03:00
|
|
|
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
|
|
|
* Animates a value from an initial velocity to zero based on a decay
|
|
|
|
* coefficient.
|
2017-02-18 01:41:23 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#decay
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
decay,
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Animates a value along a timed easing curve. The Easing module has tons of
|
|
|
|
* predefined curves, or you can use your own function.
|
2017-02-18 01:41:23 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#timing
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
timing,
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
Add closed-form damped harmonic oscillator algorithm to Animated.spring
Summary:
As I was working on mimicking iOS animations for my ongoing work with `react-navigation`, one task I had was to match the "push from right" animation that is common in UINavigationController.
I was able to grab the exact animation values for this animation with some LLDB magic, and found that the screen is animated using a `CASpringAnimation` with the parameters:
- stiffness: 1000
- damping: 500
- mass: 3
After spending a considerable amount of time attempting to replicate the spring created with these values by CASpringAnimation by specifying values for tension and friction in the current `Animated.spring` implementation, I was unable to come up with mathematically equivalent values that could replicate the spring _exactly_.
After doing some research, I ended up disassembling the QuartzCore framework, reading the assembly, and determined that Apple's implementation of `CASpringAnimation` does not use an integrated, numerical animation model as we do in Animated.spring, but instead solved for the closed form of the equations that govern damped harmonic oscillation (the differential equations themselves are [here](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator), and a paper describing the math to arrive at the closed-form solution to the second-order ODE that describes the DHO is [here](http://planetmath.org/sites/default/files/texpdf/39745.pdf)).
Though we can get the currently implemented RK4 integration close by tweaking some values, it is, the current model is at it's core, an approximation. It seemed that if I wanted to implement the `CASpringAnimation` behavior _exactly_, I needed to implement the analytical model (as is implemented in `CASpringAnimation`) in `Animated`.
We add three new optional parameters to `Animated.spring` (to both the JS and native implementations):
- `stiffness`, a value describing the spring's stiffness coefficient
- `damping`, a value defining how the spring's motion should be damped due to the forces of friction (technically called the _viscous damping coefficient_).
- `mass`, a value describing the mass of the object attached to the end of the simulated spring
Just like if a developer were to specify `bounciness`/`speed` and `tension`/`friction` in the same config, specifying any of these new parameters while also specifying the aforementioned config values will cause an error to be thrown.
~Defaults for `Animated.spring` across all three implementations (JS/iOS/Android) stay the same, so this is intended to be *a non-breaking change*.~
~If `stiffness`, `damping`, or `mass` are provided in the config, we switch to animating the spring with the new damped harmonic oscillator model (`DHO` as described in the code).~
We replace the old RK4 integration implementation with our new analytic implementation. Tension/friction nicely correspond directly to stiffness/damping with the mass of the spring locked at 1. This is intended to be *a non-breaking change*, but there may be very slight differences in people's springs (maybe not even noticeable to the naked eye), given the fact that this implementation is more accurate.
The DHO animation algorithm will calculate the _position_ of the spring at time _t_ explicitly and in an analytical fashion, and use this calculation to update the animation's value. It will also analytically calculate the velocity at time _t_, so as to allow animated value tracking to continue to work as expected.
Also, docs have been updated to cover the new configuration options (and also I added docs for Animated configuration options that were missing, such as `restDisplacementThreshold`, etc).
Run tests. Run "Animated Gratuitous App" and "NativeAnimation" example in RNTester.
Closes https://github.com/facebook/react-native/pull/15322
Differential Revision: D5794791
Pulled By: hramos
fbshipit-source-id: 58ed9e134a097e321c85c417a142576f6a8952f8
2017-09-21 09:36:11 +03:00
|
|
|
* Animates a value according to an analytical spring model based on
|
2017-11-21 00:07:10 +03:00
|
|
|
* damped harmonic oscillation.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#spring
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
spring,
|
|
|
|
|
2015-12-11 00:27:52 +03:00
|
|
|
/**
|
|
|
|
* Creates a new Animated value composed from two Animated values added
|
|
|
|
* together.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#add
|
2015-12-11 00:27:52 +03:00
|
|
|
*/
|
|
|
|
add,
|
2016-09-27 02:32:27 +03:00
|
|
|
|
2018-03-31 06:57:42 +03:00
|
|
|
/**
|
|
|
|
* Creates a new Animated value composed by subtracting the second Animated
|
|
|
|
* value from the first Animated value.
|
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#subtract
|
2018-03-31 06:57:42 +03:00
|
|
|
*/
|
|
|
|
subtract,
|
|
|
|
|
2016-09-27 02:32:27 +03:00
|
|
|
/**
|
|
|
|
* Creates a new Animated value composed by dividing the first Animated value
|
|
|
|
* by the second Animated value.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#divide
|
2016-09-27 02:32:27 +03:00
|
|
|
*/
|
|
|
|
divide,
|
|
|
|
|
2015-12-11 00:27:52 +03:00
|
|
|
/**
|
|
|
|
* Creates a new Animated value composed from two Animated values multiplied
|
|
|
|
* together.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#multiply
|
2015-12-11 00:27:52 +03:00
|
|
|
*/
|
|
|
|
multiply,
|
|
|
|
|
2016-02-26 04:18:27 +03:00
|
|
|
/**
|
|
|
|
* Creates a new Animated value that is the (non-negative) modulo of the
|
2017-11-21 00:07:10 +03:00
|
|
|
* provided Animated value.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#modulo
|
2016-02-26 04:18:27 +03:00
|
|
|
*/
|
|
|
|
modulo,
|
|
|
|
|
2016-08-23 23:59:07 +03:00
|
|
|
/**
|
|
|
|
* Create a new Animated value that is limited between 2 values. It uses the
|
2017-11-21 00:07:10 +03:00
|
|
|
* difference between the last value so even if the value is far from the
|
|
|
|
* bounds it will start changing when the value starts getting closer again.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#diffclamp
|
2016-08-23 23:59:07 +03:00
|
|
|
*/
|
|
|
|
diffClamp,
|
|
|
|
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
|
|
|
* Starts an animation after the given delay.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#delay
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
delay,
|
|
|
|
/**
|
|
|
|
* Starts an array of animations in order, waiting for each to complete
|
2017-11-21 00:07:10 +03:00
|
|
|
* before starting the next. If the current running animation is stopped, no
|
2015-09-04 05:29:04 +03:00
|
|
|
* following animations will be started.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#sequence
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
sequence,
|
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Starts an array of animations all at the same time. By default, if one
|
|
|
|
* of the animations is stopped, they will all be stopped. You can override
|
2015-09-04 05:29:04 +03:00
|
|
|
* this with the `stopTogether` flag.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#parallel
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
parallel,
|
|
|
|
/**
|
|
|
|
* Array of animations may run in parallel (overlap), but are started in
|
|
|
|
* sequence with successive delays. Nice for doing trailing effects.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#stagger
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
|
|
|
stagger,
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Loops a given animation continuously, so that each time it reaches the
|
|
|
|
* end, it resets and begins again from the start.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#loop
|
2017-12-07 04:25:06 +03:00
|
|
|
*/
|
Adds Animated.loop to Animated API
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop
Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.
I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.
I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.
Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973
Differential Revision: D4704381
fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
2017-03-14 09:49:47 +03:00
|
|
|
loop,
|
2015-09-04 05:29:04 +03:00
|
|
|
|
|
|
|
/**
|
2017-02-18 01:41:23 +03:00
|
|
|
* Takes an array of mappings and extracts values from each arg accordingly,
|
2017-11-21 00:07:10 +03:00
|
|
|
* then calls `setValue` on the mapped outputs.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#event
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
event,
|
|
|
|
|
2015-09-04 05:29:04 +03:00
|
|
|
/**
|
|
|
|
* Make any React component Animatable. Used to create `Animated.View`, etc.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#createanimatedcomponent
|
2015-09-04 05:29:04 +03:00
|
|
|
*/
|
2015-07-07 23:34:09 +03:00
|
|
|
createAnimatedComponent,
|
2015-09-04 05:29:04 +03:00
|
|
|
|
2017-03-03 02:09:39 +03:00
|
|
|
/**
|
2017-12-07 04:25:06 +03:00
|
|
|
* Imperative API to attach an animated value to an event on a view. Prefer
|
2017-11-21 00:07:10 +03:00
|
|
|
* using `Animated.event` with `useNativeDrive: true` if possible.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#attachnativeevent
|
2017-03-03 02:09:39 +03:00
|
|
|
*/
|
|
|
|
attachNativeEvent,
|
|
|
|
|
2017-03-07 08:42:33 +03:00
|
|
|
/**
|
2017-11-21 00:07:10 +03:00
|
|
|
* Advanced imperative API for snooping on animated events that are passed in
|
|
|
|
* through props. Use values directly where possible.
|
2017-12-07 04:25:06 +03:00
|
|
|
*
|
2021-11-18 07:33:58 +03:00
|
|
|
* See https://reactnative.dev/docs/animated#forkevent
|
2017-03-07 08:42:33 +03:00
|
|
|
*/
|
|
|
|
forkEvent,
|
|
|
|
unforkEvent,
|
|
|
|
|
2019-01-16 18:01:30 +03:00
|
|
|
/**
|
|
|
|
* Expose Event class, so it can be used as a type for type checkers.
|
|
|
|
*/
|
|
|
|
Event: AnimatedEvent,
|
2015-07-07 23:34:09 +03:00
|
|
|
};
|