react-native-reanimated
Version:
More powerful alternative to Animated library for React Native.
160 lines (155 loc) • 6.92 kB
JavaScript
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { withTiming } from '../../animation';
import { LayoutAnimationType, SharedTransitionType } from '../animationBuilder/commonTypes';
import { configureLayoutAnimations } from '../../core';
import { ProgressTransitionManager } from './ProgressTransitionManager';
const supportedProps = ['width', 'height', 'originX', 'originY', 'transform', 'borderRadius'];
export class SharedTransition {
constructor() {
_defineProperty(this, "_customAnimationFactory", null);
_defineProperty(this, "_animation", null);
_defineProperty(this, "_transitionDuration", 500);
_defineProperty(this, "_customProgressAnimation", undefined);
_defineProperty(this, "_progressAnimation", undefined);
_defineProperty(this, "_defaultTransitionType", undefined);
}
custom(customAnimationFactory) {
this._customAnimationFactory = customAnimationFactory;
return this;
}
progressAnimation(progressAnimationCallback) {
this._customProgressAnimation = (viewTag, values, progress) => {
'worklet';
const newStyles = progressAnimationCallback(values, progress);
_notifyAboutProgress(viewTag, newStyles, true);
};
return this;
}
duration(duration) {
this._transitionDuration = duration;
return this;
}
defaultTransitionType(transitionType) {
this._defaultTransitionType = transitionType;
return this;
}
registerTransition(viewTag, sharedTransitionTag) {
const transitionAnimation = this.getTransitionAnimation();
const progressAnimation = this.getProgressAnimation();
if (!this._defaultTransitionType) {
if (this._customAnimationFactory && !this._customProgressAnimation) {
this._defaultTransitionType = SharedTransitionType.ANIMATION;
} else {
this._defaultTransitionType = SharedTransitionType.PROGRESS_ANIMATION;
}
}
const layoutAnimationType = this._defaultTransitionType === SharedTransitionType.ANIMATION ? LayoutAnimationType.SHARED_ELEMENT_TRANSITION : LayoutAnimationType.SHARED_ELEMENT_TRANSITION_PROGRESS;
configureLayoutAnimations(viewTag, layoutAnimationType, transitionAnimation, sharedTransitionTag);
SharedTransition._progressTransitionManager.addProgressAnimation(viewTag, progressAnimation);
}
unregisterTransition(viewTag) {
SharedTransition._progressTransitionManager.removeProgressAnimation(viewTag);
}
getTransitionAnimation() {
if (!this._animation) {
this.buildAnimation();
}
return this._animation;
}
getProgressAnimation() {
if (!this._progressAnimation) {
this.buildProgressAnimation();
}
return this._progressAnimation;
}
buildAnimation() {
const animationFactory = this._customAnimationFactory;
const transitionDuration = this._transitionDuration;
this._animation = values => {
'worklet';
let animations = {};
const initialValues = {};
if (animationFactory) {
animations = animationFactory(values);
for (const key in animations) {
if (!supportedProps.includes(key)) {
throw Error(`The prop '${key}' is not supported yet.`);
}
}
} else {
for (const propName of supportedProps) {
if (propName === 'transform') {
const matrix = values.targetTransformMatrix;
animations.transformMatrix = withTiming(matrix, {
duration: transitionDuration
});
} else {
const keyToTargetValue = 'target' + propName.charAt(0).toUpperCase() + propName.slice(1);
animations[propName] = withTiming(values[keyToTargetValue], {
duration: transitionDuration
});
}
}
}
for (const propName in animations) {
if (propName === 'transform') {
initialValues.transformMatrix = values.currentTransformMatrix;
} else {
const keyToCurrentValue = 'current' + propName.charAt(0).toUpperCase() + propName.slice(1);
initialValues[propName] = values[keyToCurrentValue];
}
}
return {
initialValues,
animations
};
};
}
buildProgressAnimation() {
if (this._customProgressAnimation) {
this._progressAnimation = this._customProgressAnimation;
return;
}
this._progressAnimation = (viewTag, values, progress) => {
'worklet';
const newStyles = {};
for (const propertyName of supportedProps) {
if (propertyName === 'transform') {
// this is not the perfect solution, but at this moment it just interpolates the whole
// matrix instead of interpolating scale, translate, rotate, etc. separately
const currentMatrix = values.currentTransformMatrix;
const targetMatrix = values.targetTransformMatrix;
const newMatrix = new Array(9);
for (let i = 0; i < 9; i++) {
newMatrix[i] = progress * (targetMatrix[i] - currentMatrix[i]) + currentMatrix[i];
}
newStyles.transformMatrix = newMatrix;
} else {
// PropertyName == propertyName with capitalized fist letter, (width -> Width)
const PropertyName = propertyName.charAt(0).toUpperCase() + propertyName.slice(1);
const currentValue = values['current' + PropertyName];
const targetValue = values['target' + PropertyName];
newStyles[propertyName] = progress * (targetValue - currentValue) + currentValue;
}
}
_notifyAboutProgress(viewTag, newStyles, true);
};
}
// static builder methods
static custom(customAnimationFactory) {
return new SharedTransition().custom(customAnimationFactory);
}
static duration(duration) {
return new SharedTransition().duration(duration);
}
static progressAnimation(progressAnimationCallback) {
return new SharedTransition().progressAnimation(progressAnimationCallback);
}
static defaultTransitionType(transitionType) {
return new SharedTransition().defaultTransitionType(transitionType);
}
}
_defineProperty(SharedTransition, "_progressTransitionManager", new ProgressTransitionManager());
//# sourceMappingURL=SharedTransition.js.map