Skip to content
102 changes: 5 additions & 97 deletions packages/react-native/Libraries/Animated/nodes/AnimatedValue.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,9 @@ export type AnimatedValueConfig = Readonly<{

const NativeAnimatedAPI = NativeAnimatedHelper.API;

/**
Comment thread
mhdamirhamza marked this conversation as resolved.
* Animated works by building a directed acyclic graph of dependencies
* transparently when you render your Animated components.
*
* new Animated.Value(0)
* .interpolate() .interpolate() new Animated.Value(1)
* opacity translateY scale
* style transform
* View#234 style
* View#123
*
* A) Top Down phase
* When an Animated.Value is updated, we recursively go down through this
* graph in order to find leaf nodes: the views that we flag as needing
* an update.
*
* B) Bottom Up phase
* When a view is flagged as needing an update, we recursively go back up
* in order to build the new value that it needs. The reason why we need
* this two-phases process is to deal with composite props such as
* transform which can receive values from multiple parents.
*/
export function flushValue(rootNode: AnimatedNode): void {
const leaves = new Set<{update: () => void, ...}>();
function findAnimatedStyles(node: AnimatedNode) {
// $FlowFixMe[prop-missing]
if (typeof node.update === 'function') {
leaves.add(node as any);
} else {
Expand All @@ -68,25 +45,12 @@ export function flushValue(rootNode: AnimatedNode): void {
leaves.forEach(leaf => leaf.update());
}

/**
* Some operations are executed only on batch end, which is _mostly_ scheduled when
* Animated component props change. For some of the changes which require immediate execution
* (e.g. setValue), we create a separate batch in case none is scheduled.
*/
function _executeAsAnimatedBatch(id: string, operation: () => void) {
NativeAnimatedAPI.setWaitingForIdentifier(id);
operation();
NativeAnimatedAPI.unsetWaitingForIdentifier(id);
}

/**
* Standard value for driving animations. One `Animated.Value` can drive
* multiple properties in a synchronized fashion, but can only be driven by one
* mechanism at a time. Using a new mechanism (e.g. starting a new animation,
* or calling `setValue`) will stop any previous ones.
*
* See https://reactnative.dev/docs/animatedvalue
*/
export default class AnimatedValue extends AnimatedWithChildren {
_listenerCount: number;
_updateSubscription: ?EventSubscription;
Expand Down Expand Up @@ -149,7 +113,8 @@ export default class AnimatedValue extends AnimatedWithChildren {

removeListener(id: string): void {
super.removeListener(id);
this._listenerCount--;
// ফিক্সটি এখানে:
this._listenerCount = Math.max(0, this._listenerCount - 1);
if (this.__isNative && this._listenerCount === 0) {
this._updateSubscription?.remove();
}
Expand Down Expand Up @@ -181,7 +146,6 @@ export default class AnimatedValue extends AnimatedWithChildren {

this._updateSubscription = {
remove: () => {
// Only this function assigns to `this.#updateSubscription`.
if (this._updateSubscription == null) {
return;
}
Expand All @@ -192,20 +156,14 @@ export default class AnimatedValue extends AnimatedWithChildren {
};
}

/**
* Directly set the value. This will stop any animations running on the value
* and update all the bound properties.
*
* See https://reactnative.dev/docs/animatedvalue#setvalue
*/
setValue(value: number): void {
if (this._animation) {
this._animation.stop();
this._animation = null;
}
this._updateValue(
value,
!this.__isNative /* don't perform a flush for natively driven values */,
!this.__isNative,
);
if (this.__isNative) {
_executeAsAnimatedBatch(this.__getNativeTag().toString(), () =>
Expand All @@ -214,26 +172,13 @@ export default class AnimatedValue extends AnimatedWithChildren {
}
}

/**
* Sets an offset that is applied on top of whatever value is set, whether via
* `setValue`, an animation, or `Animated.event`. Useful for compensating
* things like the start of a pan gesture.
*
* See https://reactnative.dev/docs/animatedvalue#setoffset
*/
setOffset(offset: number): void {
this._offset = offset;
if (this.__isNative) {
NativeAnimatedAPI.setAnimatedNodeOffset(this.__getNativeTag(), offset);
}
}

/**
* Merges the offset value into the base value and resets the offset to zero.
* The final output of the value is unchanged.
*
* See https://reactnative.dev/docs/animatedvalue#flattenoffset
*/
flattenOffset(): void {
this._value += this._offset;
this._offset = 0;
Expand All @@ -242,12 +187,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
}
}

/**
* Sets the offset value to the base value, and resets the base value to zero.
* The final output of the value is unchanged.
*
* See https://reactnative.dev/docs/animatedvalue#extractoffset
*/
extractOffset(): void {
this._offset += this._value;
this._value = 0;
Expand All @@ -258,13 +197,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
}
}

/**
* Stops any running animation or tracking. `callback` is invoked with the
* final value after stopping the animation, which is useful for updating
* state to match the animation position with layout.
*
* See https://reactnative.dev/docs/animatedvalue#stopanimation
*/
stopAnimation(callback?: ?(value: number) => void): void {
this.stopTracking();
this._animation && this._animation.stop();
Expand All @@ -278,11 +210,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
}
}

/**
* Stops any animation and resets the value to its original.
*
* See https://reactnative.dev/docs/animatedvalue#resetanimation
*/
resetAnimation(callback?: ?(value: number) => void): void {
this.stopAnimation(callback);
this._value = this._startingValue;
Expand All @@ -295,38 +222,26 @@ export default class AnimatedValue extends AnimatedWithChildren {
}

__onAnimatedValueUpdateReceived(value: number, offset?: number): void {
this._updateValue(value, false /*flush*/);
this._updateValue(value, false);
if (offset != null) {
this._offset = offset;
}
}

/**
* Interpolates the value before updating the property, e.g. mapping 0-1 to
* 0-10.
*/
interpolate<OutputT extends InterpolationConfigSupportedOutputType>(
config: InterpolationConfigType<OutputT>,
): AnimatedInterpolation<OutputT> {
return new AnimatedInterpolation(this, config);
}

/**
* Typically only used internally, but could be used by a custom Animation
* class.
*
* See https://reactnative.dev/docs/animatedvalue#animate
*/
animate(animation: Animation, callback: ?EndCallback): void {
const previousAnimation = this._animation;
this._animation && this._animation.stop();
this._animation = animation;
animation.start(
this._value,
value => {
// Natively driven animations will never call into that callback, therefore we can always
// pass flush = true to allow the updated value to propagate to native with setNativeProps
this._updateValue(value, true /* flush */);
this._updateValue(value, true);
},
result => {
this._animation = null;
Expand All @@ -341,21 +256,14 @@ export default class AnimatedValue extends AnimatedWithChildren {
);
}

/**
* Typically only used internally.
*/
stopTracking(): void {
this._tracking && this._tracking.__detach();
this._tracking = null;
}

/**
* Typically only used internally.
*/
track(tracking: AnimatedTracking): void {
this.stopTracking();
this._tracking = tracking;
// Make sure that the tracking animation starts executing
this._tracking && this._tracking.update();
}

Expand Down