[ReactNative] Remove POPAnimation
Summary: Thanks to @vjeux' work on Animated, we have transitioned away from POPAnimation entirely
This commit is contained in:
Eric Vicenti
parent
4b28a847e6
commit
6f17dba39b
|
|
@ -1,268 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule POPAnimationMixin
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var POPAnimationOrNull = require('POPAnimation');
|
||||
var React = require('React');
|
||||
|
||||
if (!POPAnimationOrNull) {
|
||||
// POP animation isn't available in the OSS fork - this is a temporary
|
||||
// workaround to enable its availability to be determined at runtime.
|
||||
module.exports = (null : ?{});
|
||||
} else {
|
||||
|
||||
// At this point, POPAnimationOrNull is guaranteed to be
|
||||
// non-null. Bring it local to preserve type refinement.
|
||||
var POPAnimation = POPAnimationOrNull;
|
||||
|
||||
var invariant = require('invariant');
|
||||
var warning = require('warning');
|
||||
|
||||
var POPAnimationMixin = {
|
||||
/**
|
||||
* Different ways to interpolate between beginning and end states
|
||||
* of properties during animation, such as spring, linear, and decay.
|
||||
*/
|
||||
AnimationTypes: POPAnimation.Types,
|
||||
AnimationProperties: POPAnimation.Properties,
|
||||
|
||||
getInitialState: function(): Object {
|
||||
this._popAnimationEnqueuedAnimationTimeouts = [];
|
||||
return {
|
||||
_currentAnimationsByNodeHandle: {},
|
||||
};
|
||||
},
|
||||
|
||||
_ensureBookkeepingSetup: function(nodeHandle: any) {
|
||||
if (!this.state._currentAnimationsByNodeHandle[nodeHandle]) {
|
||||
this.state._currentAnimationsByNodeHandle[nodeHandle] = [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Start animating the View with ref `refKey`.
|
||||
*
|
||||
* @param {key} refKey The key to reference the View to be animated.
|
||||
*
|
||||
* @param {number|Object} anim Either the identifier returned by
|
||||
* POPAnimation.create* or an object defining all the necessary
|
||||
* properties of the animation you wish to start (including type, matching
|
||||
* an entry in AnimationTypes).
|
||||
*
|
||||
* @param {func} doneCallback A callback fired when the animation is done, and
|
||||
* is passed a `finished` param that indicates whether the animation
|
||||
* completely finished, or was interrupted.
|
||||
*/
|
||||
startAnimation: function(
|
||||
refKey: string,
|
||||
anim: number | {type: number; property: number;},
|
||||
doneCallback: (finished: bool) => void
|
||||
) {
|
||||
var animID: number = 0;
|
||||
if (typeof anim === 'number') {
|
||||
animID = anim;
|
||||
} else {
|
||||
invariant(
|
||||
anim instanceof Object &&
|
||||
anim.type !== undefined &&
|
||||
anim.property !== undefined,
|
||||
'Animation definitions must specify a type of animation and a ' +
|
||||
'property to animate.'
|
||||
);
|
||||
animID = POPAnimation.createAnimation(anim.type, anim);
|
||||
}
|
||||
invariant(
|
||||
this.refs[refKey],
|
||||
'Invalid refKey ' + refKey + ' for anim:\n' + JSON.stringify(anim) +
|
||||
'\nvalid refs: ' + JSON.stringify(Object.keys(this.refs))
|
||||
);
|
||||
var refNodeHandle = React.findNodeHandle(this.refs[refKey]);
|
||||
this.startAnimationWithNodeHandle(refNodeHandle, animID, doneCallback);
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts an animation on a native node.
|
||||
*
|
||||
* @param {NodeHandle} nodeHandle Handle to underlying native node.
|
||||
* @see `startAnimation`.
|
||||
*/
|
||||
startAnimationWithNodeHandle: function(
|
||||
nodeHandle: any,
|
||||
animID: number,
|
||||
doneCallback: (finished: bool) => void
|
||||
) {
|
||||
this._ensureBookkeepingSetup(nodeHandle);
|
||||
var animations = this.state._currentAnimationsByNodeHandle[nodeHandle];
|
||||
var animIndex = animations.length;
|
||||
animations.push(animID);
|
||||
var cleanupWrapper = (finished) => {
|
||||
if (!this.isMounted()) {
|
||||
return;
|
||||
}
|
||||
animations[animIndex] = 0; // zero it out so we don't try to stop it
|
||||
var allDone = true;
|
||||
for (var ii = 0; ii < animations.length; ii++) {
|
||||
if (animations[ii]) {
|
||||
allDone = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (allDone) {
|
||||
this.state._currentAnimationsByNodeHandle[nodeHandle] = undefined;
|
||||
}
|
||||
doneCallback && doneCallback(finished);
|
||||
};
|
||||
// Hack to aviod race condition in POP:
|
||||
var animationTimeoutHandler = setTimeout(() => {
|
||||
POPAnimation.addAnimation(nodeHandle, animID, cleanupWrapper);
|
||||
}, 1);
|
||||
this._popAnimationEnqueuedAnimationTimeouts.push(animationTimeoutHandler);
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts multiple animations with one shared callback that is called when all
|
||||
* animations complete.
|
||||
*
|
||||
* @param {Array(Object} animations Array of objects defining all the
|
||||
* animations to start, each with shape `{ref|nodeHandle, anim}`.
|
||||
* @param {func} onSuccess A callback fired when all animations have returned,
|
||||
* and is passed a finished arg that is true if all animations finished
|
||||
* completely.
|
||||
* @param {func} onFailure Not supported yet.
|
||||
*/
|
||||
startAnimations: function(
|
||||
animations: Array<Object>,
|
||||
onSuccess: (finished: boolean) => void,
|
||||
onFailure: () => void
|
||||
) {
|
||||
var numReturned = 0;
|
||||
var numFinished = 0;
|
||||
var numAnimations = animations.length;
|
||||
var metaCallback = (finished) => {
|
||||
if (finished) {
|
||||
++numFinished;
|
||||
}
|
||||
if (++numReturned === numAnimations) {
|
||||
onSuccess && onSuccess(numFinished === numAnimations);
|
||||
}
|
||||
};
|
||||
animations.forEach((anim) => {
|
||||
warning(
|
||||
anim.ref != null || anim.nodeHandle != null &&
|
||||
!anim.ref !== !anim.nodeHandle,
|
||||
'Animations must be specified with either ref xor nodeHandle'
|
||||
);
|
||||
if (anim.ref) {
|
||||
this.startAnimation(anim.ref, anim.anim, metaCallback);
|
||||
} else if (anim.nodeHandle) {
|
||||
this.startAnimationWithNodeHandle(anim.nodeHandle, anim.anim, metaCallback);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop any and all animations operating on the View with native node handle
|
||||
* `nodeHandle`.
|
||||
*
|
||||
* @param {NodeHandle} component The instance to stop animations
|
||||
* on. Do not pass a composite component.
|
||||
*/
|
||||
stopNodeHandleAnimations: function(nodeHandle: any) {
|
||||
if (!this.state._currentAnimationsByNodeHandle[nodeHandle]) {
|
||||
return;
|
||||
}
|
||||
var anims = this.state._currentAnimationsByNodeHandle[nodeHandle];
|
||||
for (var i = 0; i < anims.length; i++) {
|
||||
var anim = anims[i];
|
||||
if (anim) {
|
||||
// Note: Converting the string key to a number `nodeHandle`.
|
||||
POPAnimation.removeAnimation(+nodeHandle, anim);
|
||||
}
|
||||
}
|
||||
this.state._currentAnimationsByNodeHandle[nodeHandle] = undefined;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop any and all animations operating on the View with ref `refKey`.
|
||||
*
|
||||
* @param {key} refKey The key to reference the View to be animated.
|
||||
*/
|
||||
stopAnimations: function(refKey: string) {
|
||||
invariant(this.refs[refKey], 'invalid ref');
|
||||
this.stopNodeHandleAnimations(React.findNodeHandle(this.refs[refKey]));
|
||||
},
|
||||
|
||||
/**
|
||||
* Stop any and all animations created by this component on itself and
|
||||
* subviews.
|
||||
*/
|
||||
stopAllAnimations: function() {
|
||||
for (var nodeHandle in this.state._currentAnimationsByNodeHandle) {
|
||||
this.stopNodeHandleAnimations(nodeHandle);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Animates size and position of a view referenced by `refKey` to a specific
|
||||
* frame.
|
||||
*
|
||||
* @param {key} refKey ref key for view to animate.
|
||||
* @param {Object} frame The frame to animate the view to, specified as {left,
|
||||
* top, width, height}.
|
||||
* @param {const} type What type of interpolation to use, selected from
|
||||
* `inperpolationTypes`.
|
||||
* @param {Object} event Event encapsulating synthetic and native data that
|
||||
* may have triggered this animation. Velocity is extracted from it if
|
||||
* possible and applied to the animation.
|
||||
* @param {func} doneCallback A callback fired when the animation is done, and
|
||||
* is passed a `finished` param that indicates whether the animation
|
||||
* completely finished, or was interrupted.
|
||||
*/
|
||||
animateToFrame: function(
|
||||
refKey: string,
|
||||
frame: {left: number; top: number; width: number; height: number;},
|
||||
type: number,
|
||||
velocity: number,
|
||||
doneCallback: (finished: boolean) => void
|
||||
) {
|
||||
var animFrame = { // Animations use a centered coordinate system.
|
||||
x: frame.left + frame.width / 2,
|
||||
y: frame.top + frame.height / 2,
|
||||
w: frame.width,
|
||||
h: frame.height
|
||||
};
|
||||
var posAnim = POPAnimation.createAnimation(type, {
|
||||
property: POPAnimation.Properties.position,
|
||||
toValue: [animFrame.x, animFrame.y],
|
||||
velocity: velocity || [0, 0],
|
||||
});
|
||||
var sizeAnim = POPAnimation.createAnimation(type, {
|
||||
property: POPAnimation.Properties.size,
|
||||
toValue: [animFrame.w, animFrame.h]
|
||||
});
|
||||
this.startAnimation(refKey, posAnim, doneCallback);
|
||||
this.startAnimation(refKey, sizeAnim);
|
||||
},
|
||||
|
||||
// Cleanup any potentially leaked animations.
|
||||
componentWillUnmount: function() {
|
||||
this.stopAllAnimations();
|
||||
this._popAnimationEnqueuedAnimationTimeouts.forEach(animationTimeoutHandler => {
|
||||
clearTimeout(animationTimeoutHandler);
|
||||
});
|
||||
this._popAnimationEnqueuedAnimationTimeouts = [];
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = POPAnimationMixin;
|
||||
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule POPAnimation
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var RCTPOPAnimationManager = require('NativeModules').POPAnimationManager;
|
||||
if (!RCTPOPAnimationManager) {
|
||||
// POP animation isn't available in the OSS fork - this is a temporary
|
||||
// workaround to enable its availability to be determined at runtime.
|
||||
// For Flow let's pretend like we always export POPAnimation
|
||||
// so all our users don't need to do null checks
|
||||
module.exports = null;
|
||||
} else {
|
||||
|
||||
var ReactPropTypes = require('ReactPropTypes');
|
||||
var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
|
||||
var getObjectValues = require('getObjectValues');
|
||||
var invariant = require('invariant');
|
||||
var merge = require('merge');
|
||||
|
||||
var RCTTypes = RCTPOPAnimationManager.Types;
|
||||
var RCTProperties = RCTPOPAnimationManager.Properties;
|
||||
|
||||
var Properties = {
|
||||
bounds: RCTProperties.bounds,
|
||||
opacity: RCTProperties.opacity,
|
||||
position: RCTProperties.position,
|
||||
positionX: RCTProperties.positionX,
|
||||
positionY: RCTProperties.positionY,
|
||||
zPosition: RCTProperties.zPosition,
|
||||
rotation: RCTProperties.rotation,
|
||||
rotationX: RCTProperties.rotationX,
|
||||
rotationY: RCTProperties.rotationY,
|
||||
scaleX: RCTProperties.scaleX,
|
||||
scaleXY: RCTProperties.scaleXY,
|
||||
scaleY: RCTProperties.scaleY,
|
||||
shadowColor: RCTProperties.shadowColor,
|
||||
shadowOffset: RCTProperties.shadowOffset,
|
||||
shadowOpacity: RCTProperties.shadowOpacity,
|
||||
shadowRadius: RCTProperties.shadowRadius,
|
||||
size: RCTProperties.size,
|
||||
subscaleXY: RCTProperties.subscaleXY,
|
||||
subtranslationX: RCTProperties.subtranslationX,
|
||||
subtranslationXY: RCTProperties.subtranslationXY,
|
||||
subtranslationY: RCTProperties.subtranslationY,
|
||||
subtranslationZ: RCTProperties.subtranslationZ,
|
||||
translationX: RCTProperties.translationX,
|
||||
translationXY: RCTProperties.translationXY,
|
||||
translationY: RCTProperties.translationY,
|
||||
translationZ: RCTProperties.translationZ,
|
||||
};
|
||||
|
||||
var Types = {
|
||||
decay: RCTTypes.decay,
|
||||
easeIn: RCTTypes.easeIn,
|
||||
easeInEaseOut: RCTTypes.easeInEaseOut,
|
||||
easeOut: RCTTypes.easeOut,
|
||||
linear: RCTTypes.linear,
|
||||
spring: RCTTypes.spring,
|
||||
};
|
||||
|
||||
type Attrs = {
|
||||
type?: $Enum<typeof Types>;
|
||||
property?: $Enum<typeof Properties>;
|
||||
fromValue?: any;
|
||||
toValue?: any;
|
||||
duration?: any;
|
||||
velocity?: any;
|
||||
deceleration?: any;
|
||||
springBounciness?: any;
|
||||
dynamicsFriction?: any;
|
||||
dynamicsMass?: any;
|
||||
dynamicsTension?: any;
|
||||
}
|
||||
|
||||
var POPAnimation = {
|
||||
Types: Types,
|
||||
Properties: Properties,
|
||||
|
||||
attributeChecker: createStrictShapeTypeChecker({
|
||||
type: ReactPropTypes.oneOf(getObjectValues(Types)),
|
||||
property: ReactPropTypes.oneOf(getObjectValues(Properties)),
|
||||
fromValue: ReactPropTypes.any,
|
||||
toValue: ReactPropTypes.any,
|
||||
duration: ReactPropTypes.any,
|
||||
velocity: ReactPropTypes.any,
|
||||
deceleration: ReactPropTypes.any,
|
||||
springBounciness: ReactPropTypes.any,
|
||||
dynamicsFriction: ReactPropTypes.any,
|
||||
dynamicsMass: ReactPropTypes.any,
|
||||
dynamicsTension: ReactPropTypes.any,
|
||||
}),
|
||||
|
||||
lastUsedTag: 0,
|
||||
allocateTagForAnimation: function(): number {
|
||||
return ++this.lastUsedTag;
|
||||
},
|
||||
|
||||
createAnimation: function(typeName: number, attrs: Attrs): number {
|
||||
var tag = this.allocateTagForAnimation();
|
||||
|
||||
if (__DEV__) {
|
||||
POPAnimation.attributeChecker(
|
||||
{attrs},
|
||||
'attrs',
|
||||
'POPAnimation.createAnimation'
|
||||
);
|
||||
POPAnimation.attributeChecker(
|
||||
{attrs: {type: typeName}},
|
||||
'attrs',
|
||||
'POPAnimation.createAnimation'
|
||||
);
|
||||
}
|
||||
|
||||
RCTPOPAnimationManager.createAnimationInternal(tag, typeName, attrs);
|
||||
return tag;
|
||||
},
|
||||
|
||||
createSpringAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.spring, attrs);
|
||||
},
|
||||
|
||||
createDecayAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.decay, attrs);
|
||||
},
|
||||
|
||||
createLinearAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.linear, attrs);
|
||||
},
|
||||
|
||||
createEaseInAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.easeIn, attrs);
|
||||
},
|
||||
|
||||
createEaseOutAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.easeOut, attrs);
|
||||
},
|
||||
|
||||
createEaseInEaseOutAnimation: function(attrs: Attrs): number {
|
||||
return this.createAnimation(this.Types.easeInEaseOut, attrs);
|
||||
},
|
||||
|
||||
addAnimation: function(nodeHandle: any, anim: number, callback: Function) {
|
||||
RCTPOPAnimationManager.addAnimation(nodeHandle, anim, callback);
|
||||
},
|
||||
|
||||
removeAnimation: function(nodeHandle: any, anim: number) {
|
||||
RCTPOPAnimationManager.removeAnimation(nodeHandle, anim);
|
||||
},
|
||||
};
|
||||
|
||||
// Make sure that we correctly propagate RCTPOPAnimationManager constants
|
||||
// to POPAnimation
|
||||
if (__DEV__) {
|
||||
var allProperties = merge(
|
||||
RCTPOPAnimationManager.Properties,
|
||||
RCTPOPAnimationManager.Properties
|
||||
);
|
||||
for (var key in allProperties) {
|
||||
invariant(
|
||||
POPAnimation.Properties[key] === RCTPOPAnimationManager.Properties[key],
|
||||
'POPAnimation doesn\'t copy property ' + key + ' correctly'
|
||||
);
|
||||
}
|
||||
|
||||
var allTypes = merge(
|
||||
RCTPOPAnimationManager.Types,
|
||||
RCTPOPAnimationManager.Types
|
||||
);
|
||||
for (var key in allTypes) {
|
||||
invariant(
|
||||
POPAnimation.Types[key] === RCTPOPAnimationManager.Types[key],
|
||||
'POPAnimation doesn\'t copy type ' + key + ' correctly'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = POPAnimation;
|
||||
|
||||
}
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
'use strict';
|
||||
|
||||
var NativeModules = require('NativeModules');
|
||||
var RCTPOPAnimationManager = NativeModules.POPAnimationManager;
|
||||
var RCTUIManager = NativeModules.UIManager;
|
||||
var TextInputState = require('TextInputState');
|
||||
|
||||
|
|
@ -38,32 +37,8 @@ type MeasureLayoutOnSuccessCallback = (
|
|||
height: number
|
||||
) => void
|
||||
|
||||
var animationIDInvariant = function(
|
||||
funcName: string,
|
||||
anim: number
|
||||
) {
|
||||
invariant(
|
||||
anim,
|
||||
funcName + ' must be called with a valid animation ID returned from' +
|
||||
' POPAnimation.createAnimation, received: "' + anim + '"'
|
||||
);
|
||||
};
|
||||
|
||||
var NativeMethodsMixin = {
|
||||
addAnimation: function(anim: number, callback?: (finished: bool) => void) {
|
||||
animationIDInvariant('addAnimation', anim);
|
||||
RCTPOPAnimationManager.addAnimation(
|
||||
findNodeHandle(this),
|
||||
anim,
|
||||
mountSafeCallback(this, callback)
|
||||
);
|
||||
},
|
||||
|
||||
removeAnimation: function(anim: number) {
|
||||
animationIDInvariant('removeAnimation', anim);
|
||||
RCTPOPAnimationManager.removeAnimation(findNodeHandle(this), anim);
|
||||
},
|
||||
|
||||
measure: function(callback: MeasureOnSuccessCallback) {
|
||||
RCTUIManager.measure(
|
||||
findNodeHandle(this),
|
||||
|
|
|
|||
Loading…
Reference in New Issue