Как масштабировать размер кнопки, когда пользователь удерживает нажатой в Animated React / React Native? - PullRequest
Новая
       26

Как масштабировать размер кнопки, когда пользователь удерживает нажатой в Animated React / React Native?

0 голосов
/ 08 марта 2019

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

Я относительно новичок в React / RN и искал тонны сайтов, чтобы найти результат, но, похоже, ничего не нашел.

Я не могу сказать, должен ли я использовать PanResponder здесь или нет. Я также пытался использовать Animated.timing, но время жестко запрограммировано и не привязано к промежутку времени, когда пользователь удерживает кнопку нажатой. Я попробовал Animated.spring, но опять же, это не связано с тем, сколько времени пользователь удерживает кнопку нажатой.

Я выложу быстрый GIF, который копирует то, что я пытаюсь пойти.

https://imgur.com/a56pSQl

Вот что у меня есть: 

this.scaleAnimation = new Animated.value(3)

handlePress = () => {
   Animated.spring(this.scaleAnimation, {
      toValue: 4,
      friction: 2,
      tension: 160
   }).start()
}

render() {
   const pauseStyle = {
       transform: [

            { scale: this.scaleAnimation }

       ]
   }
  return (
       <TouchableWithoutFeedback onPress={this.handlePress}>
          <Animated.View style={[ pauseStyle ]}>
              <Ionicons name="md-pause" />
          </Animated.View>
       </TouchableWithoutFeedback>
  )
}

Будем благодарны за любые дубли: D

1 Ответ

0 голосов
/ 08 марта 2019

Пожалуйста, найдите подробный ответ с фрагментами кода.

Добавьте это к конструктору компонента 

this.handlePressIn = this.handlePressIn.bind(this);
this.handlePressOut = this.handlePressOut.bind(this);
this.animatedValue = new Animated.Value(1);

Этот метод предназначен для масштабирования кнопки с анимацией при нажатии кнопки 

handlePressIn() {
    Animated.spring(this.animatedValue, {
        toValue: 3,
        friction: 3,
        tension: 40
    }).start();
}

Этот метод предназначен для сброса кнопки в исходный масштаб с анимацией при отпускании касания. 

handlePressOut() {
    Animated.spring(this.animatedValue, {
        toValue: 1,
        friction: 3,
        tension: 40
    }).start();
}

Метод рендеринга 

render() {
    const animatedStyle = {
        transform: [{ scale: this.animatedValue }]
    }
    return (
        <TouchableWithoutFeedback
            onPressIn={this.handlePressIn}
            onPressOut={this.handlePressOut}
        >
            <Animated.View style={animatedStyle}>
                <Text style={styles.text}>Press Me</Text>
            </Animated.View>
        </TouchableWithoutFeedback>
    );
}

Вы можете использовать различные типы анимации.Пожалуйста, найдите ссылку для справки: https://facebook.github.io/react-native/docs/animated#configuring-animations

...