Прокачиваем анимацию с react-native-reanimated. Часть 1

			block([
  cond(not(clockRunning(clock)), startClock(clock)),
  timing(clock, state, config),
  cond(state.finished,stopClock(clock))
])
		

			# Установим библиотеку
npm i react-native-reanimated@1.13.3

# Для iOS
cd ios
pod install
		

			import Animated, {
  block,
  clockRunning,
  cond,
  Clock,
  debug,
  Easing,
  set,
  startClock,
  stopClock,
  timing,
  Value,
  useCode,
  Node,
  interpolateColors
} from 'react-native-reanimated';

const runTiming = (clock, value, dest) => {
	
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 5000,
    toValue: new Value(0),
    // Определяем какое будет "смягчение" относительно, линейного Clock 
    easing: Easing.inOut(Easing.ease),
  };

  // Возвращаем узел, который объединяет несколько функций, вызывает их
  // в порядке, в котором они передаются в block и возвращает результат 
  // последнего узла.
  return block([
    cond(
      clockRunning(clock),
      [
        // Если счетчик уже запущен, то мы обновляем значение toValue.
        set(config.toValue, dest),
      ],
      [
        // Если счётчик не запущен, то мы сбрасываем все значения и
    	  // запускаем счётчик.
        set(state.finished, 0),
        set(state.time, 0),
        set(state.position, value),
        set(state.frameTime, 0),
        set(config.toValue, dest),
        startClock(clock),
      ]
    ),
    // Мы определяем здесь шаг, который запускает процесс расчёта значений.
    timing(clock, state, config),
    // Если анимация закончилась, то мы останавливаем счётчик.
    cond(state.finished, debug('stop clock', stopClock(clock))),
    // Определяем узел возвращения обновлённого значения.
    state.position,
  ]);
}
		

			function useClock() {
  const ref = useRef(new Clock());
  return ref.current;
}
		

			export default () => {
  const clock = useClock();

  // Вызываем функцию runTiming, определённый выше, чтобы создать
  // узел, который будет использоваться для translateX трансформации. 
  const translateX = runTiming(clock, -120, 120)

  return (
     <View style={styles.container}>
       <Animated.View
         style={[styles.box, { transform: [{ translateX }] }]}
       />
     </View>
   );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: '#4585E6'
  }
}
		

			interface AnimationTimingProps {
  value: Value;
  trigger: boolean;
  easing: Animated.EasingFunction;
  duration: number;
}

// Получить объект с настройками для описания узлов анимации
const getTimingSettings = ({
  value,
  trigger = false,
  easing = Easing.inOut(Easing.circle),
  duration = 300,
}: AnimationTimingProps) => {
  return {
    clock: new Clock(),
    state: {
      finished: new Value(0),
      position: value || new Value(trigger ? 1 : 0),
      time: new Value(0),
      frameTime: new Value(0),
    },
    config: {
      duration,
      toValue: new Value(trigger ? 0 : 1),
      easing,
    },
  };
};

// Определим какие настройки мы будем использовать для расчётов
interface HookTimingProps {
  trigger: boolean;
  range: [number, number];
  duration?: number;
  callback?: () => void;
  easing?: Animated.EasingFunction;
}

// Хук, возвращающий анимированное значение для вёрстки.
function useTiming({
  range: [from, to],
  callback,
  trigger = false,
  easing = Easing.inOut(Easing.circle),
  duration = 300,
}: HookTimingProps) {
  const value = useValue(trigger ? 1 : 0);

	// Хук запуска расчёта анимации
  useCode(() => {
    const { clock, config, state } = getTimingSettings({
      trigger,
      value,
      easing,
      duration,
    });

    return [
      cond(not(clockRunning(clock)), startClock(clock)),
      timing(clock, state, config),
      cond(state.finished, block([stopClock(clock), call([], callback)])),
      state.position,
    ];
  }, [trigger]);

	// мапим значения, потому что значение "value" менялось в интервале от 0 до 1
  return value.interpolate({
    inputRange: [0, 1],
    outputRange: [from, to],
    extrapolate: Extrapolate.CLAMP,
  });
}
		

			const [trigger, setTrigger] = useState(false);

  const translateX = useTiming({
    trigger,
    range: [-120, 120],
    easing: Easing.inOut(Easing.cubic),
    duration: 400,
		// Вызов после выполнения анимации
    callback: () => {
      setTimeout(() => {
        setTrigger(!trigger);
      }, 600);
    },
  });
		

			// ...
// Изменяем тип функции
function useTiming<P = number>({
  range: [from, to],
  callback = () => 0,
  trigger = false,
  easing = Easing.inOut(Easing.circle),
  duration = 300,
}: HookTimingProps): Animated.Node<P> {
// ...
		

			// ...
// возвращаем из функции
if (typeof from === 'string' && typeof to === 'string') {
    // преобразовать число "value" в цвет, который будет находится в градиенте 
    // между from и to
    return interpolateColors(value, {
      inputRange: [0, 1],
      outputColorRange: [from, to],
	 }) as Animated.Node<P & string>;
 }
 return value.interpolate({
   inputRange: [0, 1],
   outputRange: [from, to],
   extrapolate: Extrapolate.CLAMP,
 }) as Animated.Node<P & number>;
// ...
		

			// Расположим рядом с translateX
const boxBackColor = useTiming({
  trigger,
  range: ['#4585E6', '#37BA96'],
});
// И добавим анимированный цвет к квадрату
<Animated.View
  style={[
    styles.box,
    { 
      transform: [{ translateX }],
      backgroundColor: boxBackColor,
    }, 
  ]} 
/>