Skip to content

Commit

Permalink
Enable animating transform matrix (facebook#36935)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: facebook#36935

With the addition of AnimatedObject, animating prop values with arbitrary map/array nestings are possible (including transform matrix).

Note: this is only enabled when ReactNativeFeatureFlags.useAnimatedObjectForTransform is true.

Changelog:
[General][Added] - Enable animating skew in transforms with native driver

Differential Revision: D45055381

fbshipit-source-id: 76cc0af2cf13c829d48cde3e4431d120be9e0f35
  • Loading branch information
genkikondo authored and facebook-github-bot committed Apr 17, 2023
1 parent fe20081 commit 5ea2b58
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,7 @@ const SUPPORTED_TRANSFORMS = {
rotateY: true,
rotateZ: true,
perspective: true,
matrix: ReactNativeFeatureFlags.useAnimatedObjectForTransform(),
};

const SUPPORTED_INTERPOLATION_PARAMS = {
Expand All @@ -451,19 +452,19 @@ function addWhitelistedInterpolationParam(param: string): void {
}

function isSupportedColorStyleProp(prop: string): boolean {
return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
return SUPPORTED_COLOR_STYLES[prop] === true;
}

function isSupportedStyleProp(prop: string): boolean {
return SUPPORTED_STYLES.hasOwnProperty(prop);
return SUPPORTED_STYLES[prop] === true;
}

function isSupportedTransformProp(prop: string): boolean {
return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
return SUPPORTED_TRANSFORMS[prop] === true;
}

function isSupportedInterpolationParam(param: string): boolean {
return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
}

function validateTransform(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

import type {PlatformConfig} from '../AnimatedPlatformConfig';

import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
import flattenStyle from '../../StyleSheet/flattenStyle';
import Platform from '../../Utilities/Platform';
import NativeAnimatedHelper from '../NativeAnimatedHelper';
Expand All @@ -30,7 +31,10 @@ function createAnimatedStyle(
for (const key in style) {
const value = style[key];
if (key === 'transform') {
animatedStyles[key] = new AnimatedTransform(value);
animatedStyles[key] =
ReactNativeFeatureFlags.useAnimatedObjectForTransform()
? new AnimatedObject(value)
: new AnimatedTransform(value);
} else if (value instanceof AnimatedNode) {
animatedStyles[key] = value;
} else if (hasAnimatedNode(value)) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ export type FeatureFlags = {|
* Enables access to the host tree in Fabric using DOM-compatible APIs.
*/
enableAccessToHostTreeInFabric: () => boolean,
/**
* Enables use of AnimatedObject for animating transform values.
*/
useAnimatedObjectForTransform: () => boolean,
|};

const ReactNativeFeatureFlags: FeatureFlags = {
Expand All @@ -55,6 +59,7 @@ const ReactNativeFeatureFlags: FeatureFlags = {
animatedShouldUseSingleOp: () => false,
isGlobalWebPerformanceLoggerEnabled: () => false,
enableAccessToHostTreeInFabric: () => false,
useAnimatedObjectForTransform: () => false,
};

module.exports = ReactNativeFeatureFlags;

0 comments on commit 5ea2b58

Please sign in to comment.