React Native Redash
AnimationsArraysColorsCoordinatesGesturesHooksMathReadmeRun AnimationsSVGStringsTransformationstranslateZ()transformOrigin()processTransform2d()decompose2d()scaleTranslation()rotateTranslation()TransitionsVectors

Transformations


translateZ()

const translateZ: (perspective: Animated.Adaptable<number>, z: Animated.Adaptable<number>) => {
scale: Animated.Node<number>;
};

Convert a translateZ transformation into a scale transformation. This function is based on weak perspective projection and is not appropriate for every 3D transformations. Example usage with transform.

const perspective = 800;
const z = new Value(100);
//...
transform: [{ perspective }, translateZ(perspective, z)];

transformOrigin()

const transformOrigin: ({ x, y }: Point, ...transformations: AnimatedTransform[]) => AnimatedTransform[];

Changes the origin of the transformations.

Example:

<View
style={{
transform: transformOrigin({x: cx, y: cy}, { rotateX })
}}
/>

processTransform2d()

const processTransform2d: (transform: AnimatedTransform2d) => Matrix3;

Given a set of 2d transformations, returns a 3x3 matrix of animated nodes. The Matrix is are formated using the row-major-indices. See example below.

const m = processTransform2d([
{ translateX: 100 },
{ translateX: -CARD_WIDTH / 2 },
{ rotateZ: -Math.PI / 6 },
{ translateX: CARD_WIDTH / 2 },
]);
const [translateX, translateY] = vec.create(m[0][2], m[1][2]);

decompose2d()

const decompose2d: (matrix3: Matrix3 | AnimatedTransform2d) => AnimatedTransform2d;

Given any 3x3 matrix or a 2d transform array, this function decompose it into a translate, rotate, scale, rotate transform. It can be useful to interpolate between any 2d transforms or to keep offset values of complex transformations associated to gestures. See example below.

Simple:

const transform = decompose2d([
[1.25, tan(Math.PI/12), 50],
[tan(Math.PI/12), 1.25, 50],
[0, 0, 1]
]);
return (
<Animated.View style={{ transform }}>
<Card />
</Animated.View>
);

Example with a 3x3 matrix:

const transform = decompose2d([
[1.5, Math.tan(Math.PI / 6), 50],
[Math.tan(Math.PI / 6), 1.5, 50],
[0, 0, 1]
]);
return (
<Animated.View style={{ transform }}>
<Card />
</Animated.View>
);

Each transform is decomposed into a translation, rotation, scale, and a rotation:

const transform = decompose2d([
[1.25, tan(Math.PI/12), 50],
[tan(Math.PI/12), 1.25, 50],
[0, 0, 1]
]);
const { translateX } = transform[0];
const { translateY } = transform[1];
const { skewX } = transform[2];
const { scaleX } = transform[3];
const { scaleY } = transform[4];
const { rotateZ } = transform[5];
return (
<Animated.View style={{ transform: [
{ translateX },
{ translateY },
{ rotateZ: skewX },
{ scaleX },
{ scaleY },
{ rotateZ }
] }}>
<Card />
</Animated.View>
);

scaleTranslation()

export declare const scaleTranslation: (tr: Vector<Animated.Adaptable<number>>, scale: Animated.Adaptable<number>) => Vector<Animated.Node<number>>;

Scale a translation vector. Useful to accumulate transformations. For instance:

transform: [
...translate(vec.add(translation, origin)),
{ scale },
...translate(vec.dot(-1, origin))
]

Can be rewritten to:

transform: [
...translate(vec.add(translation, origin, scaleTranslation(vec.dot(-1, origin), scale))),
{ scale }
]

rotateTranslation()

export declare const rotateTranslation: (tr: Vector<Animated.Adaptable<number>>, rotate: Animated.Adaptable<number>) => Vector<Animated.Node<number>>;

Rotate a translation vector. Useful to accumulate transformations. For instance:

transform: [
...translate(vec.add(translation, origin)),
{ rotate },
...translate(vec.dot(-1, origin))
]

Can be rewritten to:

transform: [
...translate(vec.add(translation, origin, rotateTranslation(vec.dot(-1, origin), scale))),
{ rotate }
]