0
191
VistasReanimated v2 - Valores compartidos sincronizados
Pregunta
Estoy tratando de crear esta animación usando Reanimated v2:
Esta es la implementación actual:
const opacity1 = useSharedValue(0); const opacity2 = useSharedValue(0); const opacity3 = useSharedValue(0); useEffect(() => { const duration = 600; const timingOptions = { duration: duration }; const pulse = withTiming(1, timingOptions); const repeated = withRepeat(pulse, -1, true); opacity1.value = repeated; // * opacity2.value = withDelay(duration / 2, repeated); // * opacity3.value = withDelay(duration, repeated); }, []); El problema es que donde he marcado el código con // * parece haber un retraso aleatorio (probablemente debido a la ejecución de JS) que hace que los tres puntos a veces terminen sincronizados (con la misma opacidad).
Supongo que el problema es que actualizar esos 3 valores no es atómico, por lo que puede pasar cualquier cosa entre esas asignaciones.
¿Cuál es la mejor manera de resolver esto y tener esos 3 valores compartidos con un retraso determinista entre ellos?
¿Qué he probado?
- Intenté usar 1
useSharedValuey 2useDerivedValues, pero las matemáticas para hacer que uno comience en 0, uno en 0.5 y otro en 1 no es trivial (simplemente agregando 0.5 entre cada uno y modulando (%) a 1 no tiene en cuenta quewithRepeatretrocede después de llegar a 1) - Intenté usar un
useSharedValue([0, 0, 0])y luego actualizarlo con una operación atómica, pero eso no parece ser compatible
·
Santiago Gelvez
1 Respuestas
Responde la pregunta0
Encontré una solución, no estoy seguro de si es la mejor, pero actualmente funciona.
La idea es:
- tener un valor compartido "progreso" cuyo 0 -> 1 se asigna a un ciclo de animación completo (por ejemplo, 0 -> 1 -> 0)
- tienen 3 valores derivados que comienzan en diferentes momentos y se interpolan de manera diferente:
- uno 0 -> 0.5 -> 1 -> 0.5 -> 0
- uno 0.5 -> 1 -> 0.5 -> 0 -> 0.5
- uno 1 -> 0.5 -> 0 -> 0.5 -> 1
y aquí está el código:
const progress = useSharedValue(0); useEffect(() => { const pulse = withTiming(1, { duration: 1200, easing: Easing.linear }); progress.value = withRepeat(pulse, -1, false); }, []); const opacity1 = useDerivedValue(() => interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [0, 0.5, 1, 0.5, 0]) ); const opacity2 = useDerivedValue(() => interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [0.5, 1, 0.5, 0, 0.5]) ); const opacity3 = useDerivedValue(() => interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [1, 0.5, 0, 0.5, 1]) );
·
Santiago Gelvez
Denunciar
Responde la pregunta