контроль скорости панорамирования в React Native

Я использую это для реализации панорамирования на animated.view https://software-mansion.github.io/react-native-gesture-handler/docs/handler-pan.html

Этот анимированный вид также поддерживает масштабирование и масштабирование с использованием той же библиотеки.

<Animated.View 
  style={[{width: this.props.width, height: this.props.height, backgroundColor:this.props.bgColor},
      {
       transform: [
         { scale: this._scale },
         { translateX: this._translateX },
         { translateY: this._translateY },
         ],
          },
       ]} collapsable={false}>
        {this.props.children}
 </Animated.View>

Когда представление находится в нормальном масштабе/масштабе, панорамирование работает так, как вы ожидаете. Вид перемещается вместе с пальцем.

Если вы уменьшаете масштаб (представление становится меньше), жест панорамирования перемещает представление на меньшее количество пикселей для каждого эквивалентного движения пальца.

Если вы увеличиваете масштаб (вид действительно большой), жест панорамирования сильно перемещает вид. Таким образом, даже малейшее движение вашего пальца значительно меняет вид, и трудно получить точное панорамирование.

Есть ли способ настроить чувствительность панорамирования в зависимости от того, насколько у вас есть масштаб/масштаб? Кажется, я не могу найти какие-либо свойства в документах, которые заставили бы это работать. Есть ли обходные пути для этого?

Требуемый конечный результат:
уменьшить масштаб, увеличить скорость/чувствительность панорамирования
увеличить масштаб, уменьшить скорость/чувствительность панорамирования.


react-native javascript react-animated react-native-gesture-handler
person zoonosis    schedule 10.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно сделать некоторые математические вычисления со значением шкалы.

Что-то вроде этого должно работать.

<Animated.View 
  style={[{width: this.props.width, height: this.props.height, backgroundColor:this.props.bgColor},
      {
       transform: [
         { scale: this._scale },
         { translateX: Animated.divide(this._translateX, this._scale) },
         { translateY: Animated.divide(this._translateY, this._scale) },
         ],
          },
       ]} collapsable={false}>
        {this.props.children}
 </Animated.View>

Если вы позволяете нескольким щипкам продолжать масштабирование или нескольким панорамам постоянно изменять значения преобразования, вам также потребуется сохранить предыдущий масштаб и учесть его при расчетах преобразования.

person Rob Walker    schedule 16.07.2020