Estoy tratando de obtener esta animación de rotación con un punto de anclaje, similar al atributo transform-origin estándar de CSS. He leído sobre cambiar todo antes de la rotación como en esta publicación , pero no puedo hacer que eso funcione en mi caso.

Mi elemento se define así:

 <Animated.View style={[ styles.test, { transform: [{ rotate: rotateInterpolator }] }, ]} > <Text style={{ color: "white" }}>Test</Text> </Animated.View>

con los siguientes estilos aplicados directamente, ya que son necesarios en el montaje:

 test: { position: "absolute", top: 0, height: containerHeight, width: containerWidth, justifyContent: "center", alignItems: "center", backgroundColor: "green", transform: [{ translateX: -containerHeight / 2 }, { translateY: -containerHeight / 2 }], },

He definido mi interpolador para la rotación de esta manera:

 const rotateInterpolator = rotateValue.interpolate({ inputRange: [0, 1], outputRange: ["90deg", "0deg"], });

En la entrada del usuario, empiezo la animación para el Valor animado rotateValue :

 Animated.timing(rotateValue, { toValue: 1, duration: 500, easing: Easing.linear, useNativeDriver: false, }).start();

Pero como no hay opción para definir el punto de anclaje, el elemento rotará alrededor de su centro, que es el centro del contenedor definido por containerWidth y containerHeight .

Sin embargo, quiero que el ancla esté en el centro de la parte inferior del contenedor, que sería (containerWidth / 2, containerHeight) .

Cualquier ayuda es apreciada :)