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 }
]